React V2 D5.md

React V2 D5.md

React Day 5

WIFI: Penguine House

Password: Penguin2019

Agenda

1st Day

• Introduction
• JS Catch Up
• Kahoot Quiz: https://kahoot.it/
• React Project Setup
• Creating React Elements
• Creating React Components
• Passing Props
• Reusing Components

2nd Day

• Checkin
• Kahoot Quiz: https://kahoot.it/
• Handling Events
• Conditional Rendering
• Rendering Lists
• Using State

3rd Day

• Checkin
• Kahoot Quiz: https://kahoot.it/
• Importing / Exporting in JS
• Firebase Setup
• Promises
• useEffect
• Hooks
• Todo App Interaction with Backend
  • Get Todos
  • Create Todo
  • Update Todos
  • Delete Todo

4th Day

• Checkin
• Kahoot Quiz: https://kahoot.it/
• Authentication with Firebase
• Tab
• Login / Signup Forms
• Form Validation
• Custom Hooks
• Cleaning up Memory Leaks

5th Day

• Checkin
• Kahoot Quiz: https://kahoot.it/
• Context Introduction
• Applying Context to our application
• useReducer Introduction
• Applying useReducer to out SignupForm
• Routing

General Info

1. Have a recent version of node installed or download it now from nodejs

   • (If you are on windows you probably also want to install windows bash)

2. Join Whatsapp Group link: https://chat.whatsapp.com/HhEbt2Sb3ClJNfHFPttnn5

3. Join Penguin Academy: https://tribe.penguin.academy/

4. Create your solutions on CodeSandbox. You can log in with your Github account. https://codesandbox.io/

5. Download VS Code Life Share

Let's Continue

• Starting Point: Repository

git clone https://github.com/dominikkaegi/react-todo
git cd react-todo

npm install

npm run start

Render Children

export default function App() {
  return (
    <div className="App">
      <WrapInDivs>
        <h2>Very Nice</h2>
      </WrapInDivs>
      <span>Whats up</span>
    </div>
  );
}

function WrapInDivs(props) {
  const { children } = props;
  return (
    <div className="wrapped">
      <div>{children}</div>
    </div>
  );
}

Context Introduction

Context Example 1

import React, { createContext, useState, useContext } from "react";


const CounterContext = createContext();

function App() {
  const [count, setCount] = useState(0);

  const handleIncrease = () => setCount(count + 1);
  const handleDecrease = () => setCount(count - 1);

  const contextValues = { count, handleIncrease, handleDecrease };

  return (
    <div>
      <CounterContext.Provider value={contextValues}>
        <CountDisplay />
        <CounterOptions />
      </CounterContext.Provider>
    </div>
  );
}

function CountDisplay() {
  const context = useContext(CounterContext);
  return (
    <div>
      <h1>{context.count}</h1>
    </div>
  );
}

function CounterOptions() {
  const context = useContext(CounterContext);
  console.log("CounterOptions: ", context);
  return (
    <div>
      <button onClick={context.handleIncrease}>Increase</button>
      <button onClick={context.handleDecrease}>Decrease</button>
    </div>
  );
}

• Context Example 2 / with {children}.

import React, {createContext, useContext} from "react";

export default function ContextExample() {
  return (
    <div>
      <Parent>
        <Child />
      </Parent>
    </div>
  );
}

// ---------------------

const ParentContext = createContext();

export const Parent = ({ children }) => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Parent</h1>
      <ParentContext.Provider value={{ count, setCount }}>
        {children}
      </ParentContext.Provider>
    </div>
  );
};

export const Child = ({ children }) => {
  const { count, setCount } = useContext(ParentContext);
  return (
    <div className="child">
      <h2>Count: {count}</h2>
      <button onClick={() => setCount(count + 1)}>Increase Count</button>
      <div style={{ border: "1px solid black" }}>{children}</div>
    </div>
  );
};

Applying Context to our application

useReducer Introduction

const initialState = {count: 0};

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}

Applying useReducer to out SignupForm

Routing

• Example: React Router Code Sandbox

Additional Content:

Daily Challenges

1. Build a Tab Component

2. Build your own Calculator

3. Fetch Data