reading-notes

Class 401.26

Notes

Readings

React Quick Start

  1. What are the building blocks of a React app?

    The building blocks of a React app are components. Components are reusable pieces of code that return a React element to be rendered to the page.

  2. What is the difference between an HTML element and a React component?

    An HTML element represents a part of the web page, while a React component is a JavaScript function or class that optionally accepts inputs and returns a React element.

  3. What is JSX and why do we use it?

    JSX is a syntax extension for JavaScript that resembles HTML. We use it in React to write HTML-like code, which is then transformed into lightweight JavaScript objects.

  4. Describe the process of embedding JavaScript expressions in JSX.

    JavaScript expressions can be embedded in JSX by wrapping the expression in curly braces. For example, {2 + 2} in JSX would evaluate to 4.

  5. Does React or JSX have any special features for iteration or conditional logic?

    No, React and JSX do not have any special features for iteration or conditional logic. They utilize standard JavaScript for these operations, such as map for iteration and ternary operators for conditional logic.

  6. How does React know to respond to a user’s inputs?

    React responds to user inputs by using event handlers. These are functions that are triggered when a specific event, like a click or key press, occurs.

  7. What word indicates that a React component manages data with a Hook?

    The word “use” in a function name, like useState or useEffect, indicates that a React component manages data with a Hook.

  8. How can two react components share data?

    Two React components can share data through “props”, which allow for data to be passed from a parent component to a child component.

Render and Commit

  1. What are the three steps of refreshing a React UI?

    The three steps of refreshing a React UI are: render (where React generates a new tree of React elements), compare (React compares this new tree to the old one), and update (React updates the DOM to match the new tree).

  2. How do you trigger updates to a component after the initial render?

    After the initial render, updates can be triggered in a component by calling a state setter function, which is provided by the useState Hook.

  3. Does React recreate DOM nodes on every rerender?

    No, React does not recreate DOM nodes on every re-render. Instead, it only updates the parts of the DOM that changed from the previous render.

  4. After React has updated the DOM, what still needs to happen before the user sees the change?

    After React has updated the DOM, the browser needs to paint these changes to the screen before the user can see them.

Bookmark and Review

Keep these pages handy - they answer questions that show up regularly for this lab.

Things I want to learn more about

References

This site is open source. Improve this page.