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

page1 - Hello React

page2 - Reacting to changes

page3 - Fetching Data