Winter/Spring 2019 - React

In this course we will be learning the tools needed to build modern web apps with react.

Pre Work

Before we get started with react, there are some features of one of the most recent JavaScript specs we'll be using.

• arrow functions
• classes
• object literals
• template strings
• object and array destructuring
• default, rest, and spread operators
• let and const declarations
• ES Modules

A brief overview of all of these can be found in Luke Hoban's ES6 Features guide. There rest of the features on this list are useful, but won't be needed for this course.

Don't worry if you don't understand something fully, we'll go over it all and use them in class!

Tools we'll be using

• react
• create-react-app
• react-router
• styled-components
• antd

Timeline

Class 1

Needed Javascript to do React:

• ES6
• Classes

Intro to React

• create-react-app and folder structure
• function components and props
• JSX
• class based components and state
• forms and controlled inputs

Between Class

• Review class materials and docs
• Thinking in React
• Start converting the project from last time to React
  • just focus on a static version first

Class 2

Class based component lifecycle

• componentDidMount
• componentWillUnmount
• componentDidUpdate

Lifting state

React Hooks!

• useState
• useEffect
• useRef
• useReducer

Between Class

• Review the Hooks documentation
• Continue converting your project

Class 3

Hooks review

Styling

• Using CSS
• styled-components
• antd

Between Class

• Review the styled-components documentation
• Continue converting your project

Class 4

Routing

• react-router

Making network calls

• axios