Reading-Notes

Reading

React Quick Start

Read the React Quick Start quide, to refresh your memory on React.

What are the building blocks of a React app?

Components

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

HTML is lowercase, React must be capitalized

What is JSX and why do we use it?

JSX stands for JavaScript XML. It’s a syntax extension for JavaScript that allows you to write HTML-like code within your JavaScript code. JSX is primarily used in the React library for building user interfaces.

Describe the process of embedding JavaScript expressions in JSX.

By wrapping it in curly braces

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

In React, there is no special syntax for writing conditions. Instead, you’ll use the same techniques as you use when writing regular JavaScript code. For example, you can use an if statement to conditionally include JSX. If you prefer more compact code, you can use the conditional ? operator. Unlike if, it works inside JSX. When you don’t need the else branch, you can also use a shorter logical && syntax.

You will rely on JavaScript features like for loop and the array map() function to render lists of components.Inside your component, use the map() function to transform an array of products into an array of <li> items. The <li> has a key attribute. For each item in a list, you should pass a string or a number that uniquely identifies that item among its siblings. Usually, a key should be coming from your data, such as a database ID. React uses your keys to know what happened if you later insert, delete, or reorder the items.

https://react.dev/learn#conditional-rendering

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

React knows to respond to a user’s inputs through event handling, where you define event handlers to capture user actions, and state management, where you update the component’s state to trigger re-renders and reflect the changes in the user interface. This allows React to provide a reactive and interactive user experience.

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

use

How can two react components share data?

By passing the information through props.

Render and Commit

What are the three steps of refreshing a React UI?

• trigger
• render
• commit

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

Once the component has been initially rendered, you can trigger further renders by updating its state with the set function. Updating your component’s state automatically queues a render.

Does React recreate DOM nodes on every rerender?

React only changes the DOM nodes if there’s a difference between renders.

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

After rendering is done and React updated the DOM, the browser will… rerender the screen

https://react.dev/learn/render-and-commit

Bookmark and Review

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

Your First Component Importing and Exporting Components Writing Markup with JSX

sass cheatsheet react cheatsheet

Additional Questions

Note the naming conventions in the Airbnb React/JSX Style Guide. What pattern(s) do you see?

• File Naming: PascalCase is used for filenames, with each word capitalized, and the extension .jsx is used for React components.

• Reference Naming: PascalCase is used for importing React components. The reference name matches the filename.

• Higher-order Component Naming: The displayName property of the higher-order component is set to a composite name consisting of the higher-order component’s name and the passed-in component’s name, enclosed in parentheses.

• Props Naming: It is recommended to avoid using DOM component prop names (like style and className) for different purposes within your components. Instead, use descriptive prop names that clearly communicate their purpose.

Looking ahead at this module’s course schedule, What do you look forward to learning?

I only knid of understood a little bit of react the first time around, I’m looking forward to taking a deeper dive this time around.

What are your learning goals after reading and reviewing the class README?

Getting the basic principles of react down.

This site is open source. Improve this page.