React

Module Introduction

Learning Objectives

By the end of the three lessons & homework, trainees 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 trainees, some further objectives would be:
  • Use class components instead of functional 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
  • Styled Components
  • In depth functional programming

Lessons

Export as PDF
Copy link