Skills
React

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:

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:

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:

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:

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 createContext function
  • the useContext hook
  • context providers

You should understand the concept of a reducer and be able to use:

  • the useReducer hook
  • dispatching actions
  • reducer functions

Required Resources

React Learn:

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:

  • useCallback
  • useMemo

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.