React
RE01 - React Components and JSX
Complexity
Junior
Timeframe
4h
Summary
You should understand how to write basic React components using JSX.
Skill Breakdown
You should understand how to write a React component.
You should know what JSX is and how to apply it in React:
- JSX is HTML-like syntax (transpiled to JavaScript)
- how to write JavaScript inside JSX using
{}
You should know how to pass props to components.
You should know how to pass children to a component via the children prop.
You should know to render a component conditionally.
You should know to render lists and how to use React keys.
Required Resources
Getting Things Done in Next.js:
Optional Resources
React Learn:
- Your First Component (opens in a new tab)
- Importing and Exporting Components (opens in a new tab)
- Writing Markup with JSX (opens in a new tab)
- JavaScript in JSX with Curly Braces (opens in a new tab)
- Passing Props to a Component (opens in a new tab)
- Conditional Rendering (opens in a new tab)
- Rendering Lists (opens in a new tab)
- Keeping Components Pure (opens in a new tab)
- Your UI as a tree (opens in a new tab)
RE02 - React State
Complexity
Junior
Timeframe
4h
Summary
You should understand how to use React state.
Skill Breakdown
You should understand the concept of React state and how to use the useState hook.
You should know how to update state correctly.
You should know how to choose the state structure:
- avoid duplication in state
- avoid redundant/contradictory state
- group related state
Required Resources
Getting Things Done in Next.js:
Optional Resources
React Learn:
- Responding to Events (opens in a new tab)
- State: A Component's Memory (opens in a new tab)
- Render and Commit (opens in a new tab)
- State as a Snapshot (opens in a new tab)
- Queueing a Series of State Updates (opens in a new tab)
- Updating Objects in State (opens in a new tab)
- Updating Arrays in State (opens in a new tab)
- Reacting to Input with State (opens in a new tab)
- Choosing the State Structure (opens in a new tab)
- Sharing State Between Components (opens in a new tab)
- Preserving and Resetting State (opens in a new tab)
RE03 - React Effects
Complexity
Junior
Timeframe
3h
Summary
You should understand how to use React effects.
Skill Breakdown
You should understand the concept of React effects and how to use the useEffect hook.
You should understand effect dependencies.
You should understand how to use fetch together with useEffect to synchronize your component with an API.
Required Resources
Getting Things Done in Next.js:
Optional Resources
React Learn:
- Synchronizing with Effects (opens in a new tab)
- You Might Not Need an Effect (opens in a new tab)
- Lifecycle of Reactive Effects (opens in a new tab)
- Separating Events from Effects (opens in a new tab)
- Removing Effect Dependencies (opens in a new tab)
RE04 - React Refs
Complexity
Middle
Timeframe
2h
Summary
You should how to use React refs.
Skill Breakdown
You should understand the concept of a ref and how to use the useRef hook.
You shoul understand how refs are different from state.
You should know to use refs to manipulate the DOM.
You should understand the concept of a forward ref.
Required Resources
React Learn:
- Referencing Values with Refs (opens in a new tab)
- Manipulating the DOM with Refs (opens in a new tab)
Optional Resources
React Reference:
RE05 - React Context and Reducer
Complexity
Middle
Timeframe
3h
Summary
You should understand how to manage complex state with context and reducers.
Skill Breakdown
You should understand the concept of a React context and be able to use:
- the
createContextfunction - the
useContexthook - context providers
You should understand the concept of a reducer and be able to use:
- the
useReducerhook - dispatching actions
- reducer functions
Required Resources
React Learn:
- Extracting State Logic into a Reducer (opens in a new tab)
- Passing Data Deeply with Context (opens in a new tab)
- Scaling Up with Reducer and Context (opens in a new tab)
Optional Resources
React Reference:
RE06 - React Hooks
Complexity
Middle
Timeframe
2h
Summary
You should know how to create your own hooks and be familiar with other hooks in React.
Skill Breakdown
You should understand the following hooks:
useCallbackuseMemo
You should know how to write your own hooks.
Required Resources
React Learn:
React Reference:
Optional Resources
There are no optional resources for this section.