> For the complete documentation index, see [llms.txt](https://volunteers.migracode.org/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://volunteers.migracode.org/coding-course/class-information/teaching-instructions/react.md).

# 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

{% content-ref url="/pages/-MT6mO4TPL-9zvR-U7ja" %}
[1 - Hello React](/coding-course/class-information/teaching-instructions/react/week-1.md)
{% endcontent-ref %}

{% content-ref url="/pages/-MT6mSs5xzx1p-tEyU7D" %}
[2 - Reacting to changes](/coding-course/class-information/teaching-instructions/react/week-2.md)
{% endcontent-ref %}

{% content-ref url="/pages/-MT6mYsaRhjoCYyEavZg" %}
[3 - Fetching Data](/coding-course/class-information/teaching-instructions/react/week-3.md)
{% endcontent-ref %}