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
1 - Hello React
2 - Reacting to changes
3 - Fetching Data
​

3 - Workshop Part 2

1 - Hello React

Last modified 1yr ago

Export as PDF

Copy link

Contents

Module Introduction

Lessons