2V9Vi76

Agenda:

Checkin
- Review Submission
- Counter
- Tab Components
- Calculator
- Routing
- Fetching Jokes
Kahoot Quiz
useReducer

R1 useReducer

Image of Reducing

Reducing an Array

function add(a, b) {
    return a + b
}

[10,20,30].reduce(add, 0)

Reducers in React

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>
    </>
  );
}

Refactor your calculator you created this week to use useReducer and move all your logic to the reducer so that you only dispatch actions.

If you were not able to create the calculator then you can get a copy of a calculator here.

R2 Additional Challenges

1. Extending the props of a child (ADVANCED & OPTIONAL)

Build a ButtonWrapper which extends the props of their children with their index within the IndexWrapper. The example below should display the following button texts First Button - 0, Second Button - 1, Third Button - 2.

export default function App() {
  return (
    <div className="App">
      <IndexWrapper>
        <RedButton>First Button</RedButton>
        <RedButton>Second Button</RedButton>
        <RedButton>Third Button</RedButton>
      </IndexWrapper>
    </div>
  );
}

2. JSX to JS

Rebuild the App component with no JSX syntax e.g. recreate it with React.createElement().

// App.jsx
export default function App() {
  return (
    <div className="App">
      <h1 id="title" style={{ color: "blue", fontSize: `${Math.pow(2, 6)}px` }}>
        React Bootcamp
      </h1>
      <h2 className="subheading">React is just javascript.</h2>
      <p>So let's go write some javascript!</p>
    </div>
  );
}

// styles.css
.App {
  font-family: sans-serif;
  text-align: center;
}


.subheading {
  color: grey;
}
Challenge:
Jokes on you

dominikkaegi/Day 5 - React.md