Student Resources

ES6

ES6 CheatSheet
What is ES6
var vs let vs const
Arrow notation () => {}
Class Construction
ES6 Array Methods
- This includes all available array prototype methods, but some new to ES6 are forEach(), map(), etc.
Recursion
- You can learn more about recursion here

Presentational and Container Components This article written by Dan Abramov (Redux Author, React Core Contributor, Create React App Core Contributor).

He describes the pattern of separating components into "container" and "presentational" components. In a nutshell, this can be explained as follows:

Container components are primarily concerned with how things work and render very little, if any of their own markup. Instead they mostly render other components and pass down the logic and data they need to work.
Presentational components are concerned with how things look and typically don't contain any logic that doesn't have to do with their own individual UI.
This pattern helps us build components with little to no coupling that can more easily be reused in different parts of app or even across applications. It also lets us stub out our applications appearance by writing presentational components first, and then writing container components once we're ready to make things work.

The most important takeaway should be that there should be a few of these "container" components which act as the "brain" for their children.

Create React App allows us to use ES7 property initializer syntax. This allows us to attach properties to the class instance without writing out a constructor method - https://babeljs.io/docs/en/babel-plugin-transform-class-properties/
setState is built-in to all class components. We use this method to update our component's state by passing it an object containing parts of the component's state we want to update and their new values.
Children: https://reactjs.org/docs/introducing-jsx.html#specifying-children-with-jsx (edited)