Notes

The main focus is on building single page applications with ReactJS that use REST APIs built with Node.js. 
The course also contains a section on GraphQL, a modern alternative to REST APIs.

-------

Tools and Technologies
GitHub
Command line
Visual Studio Code
Node.js
React

--------

GIT
To initialize a git repository in the root of the folder, run the git init command
Create file: (Windows CP) type nul > FILENAME
See which files git knows exist: git status
To add file to staging (aka index) environment: git add FILENAME
To add all files: git add -A
To commit: git commit
           git commit -m "message"
To create a branch: git branch name
To create a branch (and move to new branch): git checkout -b <my branch name>
To list all branches: git branch -a

(FROM GITHUB AFTER CREATING A NEW REPO)
…or push an existing repository from the command line
git remote add origin https://github.com/kosteckiann/ddMD.git
git push -u origin master

To push a branch to GitHub: git push origin <yourbranchname>
To get changes from GitHub to computer: git pull origin <branch>

To see changes made: git log

--------

REACT
To create app: npx creat-react-app <name>
To run app: npm start
Any JavaScript code within the curly braces is evaluated and the result of this 
evaluation is embedded into the defined place in the HTML produced by the component.
Compiling is handled by Babel
JSX is muchl like HTML with the distinction that with JSX you can easily embed dynamic content
by writing appropriate JS within curly braces.
Every tag needs to be closed.  Example: <br />

Component names must be capitalized
component example:
const Hello = () => {  
   return (
      <div>      
         <p>Hello world</p>    
      </div>  
   )
}
const App = () => {
   return (
      <div>
         <Hello />
      </div>
   )
}



props: passing data to components
If the value of the prop is achieved using JS, it must be wrapped with curly braces



Ways to destruct:
const Hello = (props) => {
  const name = props.name  
  const age = props.age
  
  const { name, age } = props
  
const Hello = ({ name, age }) => {



stateful component: 
import React, { useState } from 'react'import ReactDOM from 'react-dom'

const App = (props) => {
  //function call adds state to the component and renders it initialized with the value of zero
  //function returns an array that contains two items, assign items to vars counter and setCounter
  //counter is assigned initial value, which is 0
  //setCounter is assigned function that will be used to modify the state
  const [ counter, setCounter ] = useState(0)
  
  //two parameters: function to increment counter state and timeout of one second
  //function passed as first parameter is invoked 1 second after calling setTimeout function
  //when setCounter is called, React re-renders the component
  //every time setCounter modifies the state, it causes the component to re-render  *************
  setTimeout(    () => setCounter(counter + 1),    1000  )
  return (
    <div>{counter}</div>
  )
}

ReactDOM.render(
  <App />, 
  document.getElementById('root')
)



Best practice: lift the state up as high as possible in the component hierarchy,
preferably to the App root component

object spread syntax: ...
{...clicks} creates a new object that has copies of all the properties of the clicks object
When we add new properties to the object, e.g. {...clicks, right: 1}, the value of the right
property in the new object will be 1
It is forbidden in React to mutate state directly - example: can't do clicks.left++
Changing the state has to always be done by setting the state to a new object

useState and useEffect must not be called from inside of a loop, conditional expression, or
any place that is not a function defining a component.
This is done to ensure that hooks are always called in the same order


Event handlers must always be a function or a reference to a function


--------

JS
arrow function expression: syntactically compact alternative to aregular function expression,
although without its own bindings to the this, arguments, super, or new.target keywords
Arrow functions are ill suited as methods, and they cannot be used as constructors
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Transpalation: When a browser does not yet support all of JS's newest features, it will transpile 
from new version of JS to an older more compatible version.  Most popular way to transpile is with 
using Babel.  Transpilation is automatically configured in React applications created with create-react-app.

Variables: const and let (newly introduced, more or less replacing var)

Arrays:
const t = [1, -1, 3]
t.push(5)
t.forEach(value => {
   console.log(value)
})

const t = [1, 2, 3]
const m1 = t.map(value => value * 2)

When using React, techniques from functional programming are often used.  One characteristic
of the functional programming paradigm is the use of immutable data structures.
In React code, it is preferable to use the method concat, which does not add the item to the array,
but creates a new array in which the content of the old array and the new item are both included.

Destructuring assignment: assign to variables to access individual items of array
const t = [1, 2, 3, 4, 5]
const [first, second, ...rest] = t

object literal:
const object1 = {
  name: 'Arto Hellas',
  age: 35,
  education: 'PhD',
}

const object3 = {
  name: {
    first: 'Dan',
    last: 'Abramov',
  },
  grades: [2, 3, 5, 3],
  department: 'Stanford University',
}

console.log(object1.name)       
const fieldName = 'age' 
console.log(object1[fieldName]) 

Functions:
const sum = (p1, p2) => {
  console.log(p1)
  console.log(p2)
  return p1 + p2
}

when one parameter, can exclude parentheses:
const square = p => {
  console.log(p)
  return p * p
}

Ways functions can be referenced:
giving name in function declaration:
function product(a, b) {
  return a * b
}
const result = product(2, 6)

define function using function expression:
const average = function(a, b) {
  return (a + b) / 2
}
const result = average(2, 5)

--------

Node.js
Run file: node <filename.js>