## 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) # 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: