Learning React essentials 1

• What is it : Javascript UI library
• Why learn : is one of the core skill set of front end developer
• What to learn : React, JSX, Redux, React-Redux
• Runtime : Node JS
• Rivals : Vue, Angular
• One step further : React with Typescript, React with Node JS
• Goal : Meow canvas refactoring with React/TS

Create a React app

npx create-react-app

Once you create a react app, look at the directories to get more understanding of React.

• /public : index.html => root div
• /src : React codes contained
• /src/App.js : Updates and compile React codes
• /src/index.js : Imports React, ReactDOM, reportWebVitals, and css files
• Everything loads into App component and export the App component into index.js
• class component : (constructor) + render(required). A class component must include render method and return statement only can return one parent element.
• simple component : does not use class keyword

What is reportWebVitals in React?A built-in tool to measure your React app performance.

```javascript
import reportWebVitals from './reportWebVitals'; 
reportWebVitals(console.log);
```

Element in React

the smallest unit in React codes. It shows what is displayed in screen.

• Immutable, meaning can't add or change once react element is created.
• Updated in virtual DOM and reflected to actual DOM.
• What is Virtual DOM in React?

DOM comparison(click to unfold)

React has its own strength in performance since it updates HTML DOM where only update needed by exploiting virtual DOM.

• 1. State changes (update needed)
• 1. Render virtual DOM
• 1. Updates the actual DOM

// element in react
const element = <h1> Hello React </h1>

// Root DOM node : one and only. manages all the child elements
<div id="root"></div>

// ReactDom.render(element, container) - renders a React element and returns a reference to that. Only mutate partial DOM if the previous element needs an update. 
ReactDom.render(
    element, 
    document.getElementById('root')
);