74 lines
2.1 KiB
Markdown
74 lines
2.1 KiB
Markdown
<!-- 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)
|
|
- [Using CodeSandbox](#using-codesandbox)
|
|
- [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.
|
|
|
|
### 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:
|