professional-programming/training/front-end/02-react.md

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
## Table of Contents

- [An introduction to React](#an-introduction-to-react)
  - [Recap of the previous session](#recap-of-the-previous-session)
  - [Before getting into React...](#before-getting-into-react)
    - [Manipulating the DOM](#manipulating-the-dom)
  - [Learning React](#learning-react)
  - [Exercise](#exercise)
  - [Self-assessment](#self-assessment)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

# An introduction to React

## Recap of the previous session

See previous session

- Arrow functions
- Classes
- `let` and `const`
- Object and array destructuring
- Template literals

## Before getting into React...

### Manipulating the DOM

- https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents
- https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction

## Learning React

Follow the tutorial: https://reactjs.org/docs/hello-world.html

We have chosen this tutorial over the "learn by doing" one because it introduces the concepts behind React. It is very well done and very complete.

## Exercise

Use one of our hiring exercises.

## Self-assessment

Basics:

- What is the difference between elements and components?
- What is JSX?
- Is it ok to modify props?
- How should you modify state?
- What does "the data flows down" mean?
- How do you pass arguments to event handlers?
- How do you put conditionals in JSX?
- How do you put inline if-else in JSX?
- How do you prevent a component from rendering?
- What is the `key` prop?
- What are controlled and uncontrolled components?
- What does it mean to "lift state up"?
- Should you use composition or inheritance with React?

Advanced: