UMRE

OUTLINE

Section 1: A Taste of React

Section 2: Introducing JSX

Section 3: Props and More

Section 4: Introducing Create React App

Section 5: Pokedex Project

Section 6: Introducing State

Section 7: React State Dice Exercise

Section 8: React State Patterns

Section 9: State Exercises!

Section 10: The World of React Events

Section 11: Hangman Exercise

Section 12: Lights Out Game

Section 13: Forms in React

Section 14: Forms Exercise

Section 15: Todo List Project

Section 16: Building Yahtzee

Section 17: React Lifecycle Methods

Section 18: LifeCycle Methods & API Exercise

Section 19: Building the Dad Jokes App

Section 20: React Router:

Section 21: Vending Machine Exercise

Section 22: React Router Patterns

Section 23: Router Exercises Part 2

Section 24: The Massive Color Project Pt 1

Section 25: The Massive Color Project Pt 2

Section 26: JSS & withStyles (Color App)

Section 27: The Massive Color Project Pt 3

Section 28: The Massive Color Project Pt 4

Section 29: The Massive Color Project Pt 5

Section 30: The Massive Color Project Pt 6

Section 31: The Massive Color Project Pt 7

Section 32: Introducing React Hooks

Section 33: React Hooks Project

Section 34: Introducing The Context API!

Section 35: Using Context with Hooks

Section 36: State Management w/ useReducer & useContext

Section 37: Next JS

Section 38: Next: Fetching & Server API

Section 39: Bonus: Webpack Mini Course - Your Own

Simple Version of Create React App

---

OUTLINE B

Section 1: A Taste of React

Section 2: Introducing JSX

Section 3: Props and More

Section 4: Introducing Create React App

CONVENTIONS

• Each React component goes in separate file, file should be named for component
• EX: src/Cat.js for Cat component
• CRA skeleton assumes top object is App in App.js
• CSS: Conventional to add className="Cat" to Cat div and use that as a prefix for sub-items to style (e.g. className="Cat-title")
• IMAGES: Simply import pug from './pug.jpeg'; and use it like <img className="Dog-img" src={pug}>

Section 5: Pokedex Project

Section 6: Introducing State

Section 7: React State Dice Exercise

Section 8: React State Patterns

Section 9: State Exercises!

Section 10: The World of React Events

Section 11: Hangman Exercise

Section 12: Lights Out Game

Section 13: Forms in React

Section 14: Forms Exercise

Section 15: Todo List Project

Section 16: Building Yahtzee

Section 17: React Lifecycle Methods

Section 18: LifeCycle Methods & API Exercise

Section 19: Building the Dad Jokes App

Section 20: React Router:

Section 21: Vending Machine Exercise

Section 22: React Router Patterns

Section 23: Router Exercises Part 2

Section 24: The Massive Color Project Pt 1

Section 25: The Massive Color Project Pt 2

Section 26: JSS & withStyles (Color App)

Section 27: The Massive Color Project Pt 3

Section 28: The Massive Color Project Pt 4

Section 29: The Massive Color Project Pt 5

Section 30: The Massive Color Project Pt 6

Section 31: The Massive Color Project Pt 7

Section 32: Introducing React Hooks

• Lifecycle methods like componentDidMount do not work in functional components. They only work in class-based components.
• Functional components don’t have access to those lifecycle methods so what do we do?
• By default,useEffect runs both after every single render and every single update
• useEffect replaces the callback after setState

Section 33: React Hooks Project

Standard stuff you need for an input:

• onChange, piece of state for the value so we can control the input
• a way of resetting the input once you hit enter

Section 34: Introducing The Context API!

Section 35: Using Context with Hooks

Section 36: State Management w/ useReducer & useContext

282. First useReducer Example

ROUND 2 (8/31/20)

CODE SANDBOX

import React from "react";
import { useReducer } from "react";
import "./styles.css";

const reduceShareOptions = (state, action) => {
  if (action.type === "INCREMENT") return { runtime: state.runtime + 1 };
  if (action.type === "DECREMENT") return { runtime: state.runtime - 1 };
  if (action.type === "INCREMENT_BY_5") return { runtime: state.runtime + 5 };
};
export default function App() {
  const [state, dispatch] = useReducer(reduceShareOptions, { runtime: 3 });
  return (
    <div className="App">
      <h1> RUNTIME IS {state.runtime} </h1>
      <button onClick={() => dispatch({ type: "DECREMENT" })}>subtract</button>
      <button onClick={() => dispatch({ type: "INCREMENT" })}>add</button>
      <button onClick={() => dispatch({ type: "INCREMENT_BY_5" })}>
        add 5
      </button>
    </div>
  );
}

Section 37: Next JS

Section 38: Next: Fetching & Server API

Section 39: Bonus: Webpack Mini Course - Your Own

Simple Version of Create React App