reading-notes

Reading: Component Based UI

Building Blocks of a React App: The building blocks of a React app are components, which are reusable UI elements that encapsulate their own logic and state.
Difference Between HTML Element and React Component: An HTML element represents a static part of the UI, while a React component is a dynamic entity that can have its own behavior and state.
JSX: JSX is a syntax extension for JavaScript that allows us to write HTML-like code within JavaScript. It helps in creating React elements in a more intuitive and readable way.
Embedding JavaScript Expressions in JSX: JavaScript expressions can be embedded in JSX by wrapping them in curly braces {}. For example, {2 + 2} will be evaluated to 4.
Iteration and Conditional Logic in JSX: JSX supports JavaScript expressions, so you can use standard JavaScript iteration and conditional statements like map() for iteration and if statements for conditional rendering.
Responding to User Inputs: React components can respond to user inputs by attaching event handlers to DOM elements, such as onClick, onChange, etc.
React Components Managing Data with Hooks: The word useState indicates that a React component manages data with a Hook.
Sharing Data Between React Components: Data can be shared between React components by lifting state up to a common ancestor or using context API for global state management.

Three Steps of Refreshing a React UI: The three steps are reconciliation, rendering, and commit phase.
Triggering Updates to a Component: Updates to a component after the initial render can be triggered by calling setState or using hooks like useEffect.
Recreating DOM Nodes on Every Rerender: No, React uses a virtual DOM to efficiently update only the parts of the DOM that have changed.
After Updating the DOM: After updating the DOM, React still needs to apply the changes to the real DOM (commit phase) before the user sees the update.

Airbnb React/JSX Style Guide: The Airbnb React/JSX Style Guide emphasizes patterns such as camelCase for naming variables and functions, PascalCase for naming components, and using arrow functions for functional components.
Learning Goals: After reviewing the class README, my learning goals include mastering React component lifecycle, understanding state management with Redux, and building scalable and maintainable UI components.