ReactJS

Concepts

3 main concepts in React:
- Components - Split interface into small obj
- Props - Passing information to components
- States - Handle information which change

A component is a function that returns UI elements. Inside the return statement of the function.

React has a set of functions called hooks. We use hooks to add additional logic such as state to our components.
State as any information in your UI that changes over time, usually triggered by user interaction.
Unlike props which are passed to components as the first function parameter, the state is initiated and stored within a component. You can pass the state information to children components as props, but the logic for updating the state should be kept within the component where state was initially created.

Network Boundary is a conceptual line that separates the different environments. In React, you choose where to place the network boundary in your component tree.
- server module graph/ client module graph (or tree)
- After Server Components are rendered, a special data format called the React Server Component Payload (RSC) is sent to the client: (1) Rendered result of Server Components. (2) Placeholders for where Client Components should be rendered and references to JS files.

React needs something to uniquely identify items in an array so it knows which elements to update in the DOM.
In React, data flows down the component tree. This is referred to as one-way data flow. State can be passed from parent to child components as props.
Babel script ⇒ Convert JSX to JavaScript (seem like ERB/Slim/… code?)