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 Reactpage2 - Reacting to changespage3 - Fetching Data

Last updated