Intro the React

Objectives

• Explain what react is
• Describe how react works using terms like Virtual DOM, Render, and State
• Use create-react-app to generate react applications
• Explain the purpose of each file in a generated react app
• Use JSX to build react components
• List the ways JSX is different from plain HTML
• use useState to manage component state
• Handle DOM events on react elements
• Use the React Developer Tools to effectively debug React apps

---

What is React?

---

Describe how React state works using words like Virtual DOM, Render and State

---

State

• All the data in our application at a specific point in time
• State changes as the user interacts with the application

---

Virtual DOM

• A virtual (JSON) representation of the DOM (Document Object Model)
• React compares the previous and next VDOM trees to efficiently update the real DOM

---

Render

• The process of applying the latest state changes to the UI

---

How it all works

1. When state changes, react re-runs our render function to get a new VDOM tree.
2. React then compares this new VDOM tree with the current VDOM.
3. Any changes are then applied to the real DOM.

React allows us to write declarative code (we declare what we want react to do, and it takes care of the details) instead of imperative code (we write exactly the code needed to do the thing we want to do .. (like jQuery)

---

Use create-react-app to generate react applications

---

Explain the purpose of each file in a generated react app

---

Use JSX to build react components

---

List all the ways JSX is different from plain HTML

see the article here

---

Use useState to manage component state

---

Handle DOM events on react elements

---

Use the React Developer Tools to effectively debug React Apps

---