Components are easy to create. The idea of React is that an entire application can be built using a bunch of simple, universal components. Components take the form of JS functions and are created in the following way:

const Hello = () => {
  return(
    <div>
      <p>Sup foo</p>
    </div>
}

The contents of a React component should be contained within one root element <div>ALL CONTENTS</div>. Or, contents could be contained in a tabular fashion [ALL CONTENTS] or within a fragment <>ALL CONTENTS</>.

Layout of React components is written using JSX. JSX returned by React components is translated into JavaScript at a lower level. Translation occurs via Babel. JSX is like XML in that each tag must be closed. In HTML, a line break would look like <br> when in JSX it should be written <br />.

Props are used to transmit data into components. They are added within the parentheses of the function:

const Hello = (props) => {
  return(
    <div>
      <p>Sup {props.name}</p>
    </div>
}

Now when we call

const App = () => {
  return (
    <div>
      <Hello name="Harambe"/>
    </div>
  )
}

Hello Harambe will be returned.

Node.js is a Javascript execution environment based on the Google Chrome V8 Javascript engine.

push can be used to add a new item to an array. In React, however, it is recommended to use concat which also adds a new item to an array but does so by creating a new array and leaving the original unchanged. In general, immutable object are utilized in React.

Immutable Object: an object whose state cannot be modified after it is created.

map can also be used to create a new array by modifying another.

const t = [1,2,3];
const t2 = t.concat(4);
const t3 = t.map(value => value *2)

const [first, second, ...rest] = t2;
console.log(first, second) // 1, 2
console.log(rest) // [3,4]

The methods mentioned in this section are irrelevant in newer versions of React (that use Hooks), but is useful to know regardless.

Methods can be attached to objects by defining fields as functions. Within a method, the values in the object can be referenced using the keyword this.

const dorian = {
  name: 'Dorian Finney-Smith',
  age: 28,
  college: 'Virginia Tech',
  position: 'Small Forward',
  introduce: function() {
    console.log(`At ${this.position}, from ${this.college}, welcome to the floor ${this.name}!!!!!`);
  },
}

dorian.introduce()
  // "At Small Forward, from Virginia Tech, welcome to the floor Dorian Finney-Smith!!!!!"

When a method is called by reference, is loses its knowledge of what the original this was.

const introduceDorian = dorian.introduce
introduceDorian()
  // "At , from , welcome to the floor !!!!!"

The same thing happens when we run into asynchronous functions:

setTimeout(dorian.introduce, 1000)
  // "At , from , welcome to the floor !!!!!"

There are several ways around this, one is the bind method.

setTimeout(dorian.introduce.bind(dorian), 1000)
  // "At Small Forward, from Virginia Tech, welcome to the floor Dorian Finney-Smith!!!!!"
  

Classes are a prototype in ES6 and simulate object-oriented programming classes. Objects are created from classes.

class Person {
  constructor(name, age) {
    this.name = name
    this.age = age
  }
  greet() {
    console.log(`hello my name is ${this.name} and I am ${this.age}`)
  }
}

const dorian = new Person('Dorian Finney-Smith", 25)
dorian.greet() // hello my name is Dorian Finney-Smith and I am 25

We will not use the class syntax in designing this application. Instead, the hook feature will be used in any instances where we would need a class object.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript https://github.com/getify/You-Dont-Know-JS https://javascript.info/

So that we don't need to write props.name each time we want to access that input, we can assign a variable name to props.name within the component. Destructurization can simplify this:

const Hello = (props) => {
  const { name, age } = props

We can take this a step forward.

const Hello = ({ name, age }) => {
}