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

Table of Contents

• An introduction to React
  • Recap of the previous session
  • Before getting into React...
    • Manipulating the DOM
  • Learning React
    • Using CodeSandbox
  • Exercise
  • Self-assessment

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.

Using CodeSandbox

It is a good exercise to start from a Vanilla JS template and setup CodeSandbox.

1. Go to https://codesandbox.io/
2. Start a Vanilla JS project
3. Add react and react-dom dependencies
4. Add the simplest React app from the tutorial and get it to work!

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: