Overview

WeekContentHomework
Week 1React 101React 101 Homework
Week 2Reacting to ChangesReacting to Changes Homework
Week 3Fetching DataFetching Data Homework
React RouterRouting (optional)
Class ComponentsClass Components (optional)

Overall Learning Objectives - React module

By the end of the three lessons & homework, students should be able to build a React application:

  • Written with components
    • Appropriately composed/nested
    • Split across multiple files
  • Uses props to pass values between components
    • Data like numbers/strings/objects/arrays
    • Functions as event handlers
  • Uses state to react to user interaction
    • E.g. a button can be clicked to increment a counter
  • That fetches data from an API
    • Loading, success and error states are shown
  • Containing a form
    • Form inputs that can be filled out by the user
    • Can be submitted, triggering an update in the app

For advanced students, some further objectives would be:

  • Use class components instead of function components/Hooks
  • Explain why React state is used over plain old JavaScript variables

Out of scope

These topics are considered out-of-scope:

  • Object-Orientated JavaScript (classes/inheritance)
    • Details of extends/super() are not necessary to use React (they are an implementation detail of Component class), so don't go out of the way to teach this
  • Redux
    • Want to focus on learning and practising the basics of React, before introducing new concepts
    • Learning Redux will be easier once confident with React
  • CSS-in-JS
  • In depth functional programming