reading-notes

Class 26 Reading: Component Based UI

Resources

• React Quick Start
• Render and Commit

React Quick Start

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

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 can be used to build elements for a user interface.

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

   • An HTML element is a tag that is used to define the structure of a web page. A React component is a reusable piece of code that can be used to build elements for a user interface. React components are written in JavaScript and can be used to build HTML elements.

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

   • JSX is a syntax extension to JavaScript that allows us to write HTML elements in JavaScript and place them in the DOM without using React.createElement(). We use JSX because it allows us to write HTML elements in JavaScript and place them in the DOM without using React.createElement(). JSX is also easier to read and write than JavaScript.

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

   • To embed JavaScript expressions in JSX, we wrap the JavaScript expression in curly braces. For example, if we wanted to embed a JavaScript expression that adds two numbers, we would write {1 + 1}. If we wanted to embed a JavaScript expression that calls a function, we would write {myFunction()}. If we wanted to embed a JavaScript expression that calls a function and passes in a parameter, we would write {myFunction(myParameter)}.

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

   • React has a special feature for iteration called map(). The map() method creates a new array with the results of calling a provided function on every element in the calling array. The map() method is used to iterate over an array of data and return a new array of React elements. The map() method is used to iterate over an array of data and return a new array of React elements. The map() method is used to iterate over an array of data and return a new array of React elements. The map() method is used to iterate over an array of data and return a new array of React elements. The map() method is used to iterate over an array of data and return a new array of React elements. The map() method is used to iterate over an array of data and return a new array of React elements. The map() method is used to iterate over an array of data and return a new array of React elements. The map() method is used to iterate over an array of data and return a new array of React elements. The map() method is used to iterate over an array of data and return a new array of React elements. The map() method is used to iterate over an array of data and return a new array of React elements. The map() method is used to iterate over an array of data and return a new array of React elements.

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

   • React uses a virtual DOM to keep track of changes to the DOM. When a user interacts with a React component, React updates the virtual DOM and then compares the virtual DOM to the real DOM. If the virtual DOM and the real DOM are different, React updates the real DOM to match the virtual DOM. If the virtual DOM and the real DOM are the same, React does nothing.

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

   • The word useState indicates that a React component manages data with a Hook.

8. How can two react components share data?

   • Two React components can share data by using props.

Render and Commit

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

   • The three steps of refreshing a React UI are:
     1. React updates the virtual DOM.
     2. React compares the virtual DOM to the real DOM.
     3. React updates the real DOM to match the virtual DOM.

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

   • You trigger updates to a component after the initial render by calling setState().

3. Does React recreate DOM nodes on every rerender?

   • No, React does not recreate DOM nodes on every rerender. React only updates the DOM when it needs to.

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 still needs to repaint the screen before the user sees the change. The browser repaints the screen when it receives a request to repaint the screen.

Bookmark and Review

• Your First Component
• Importing and Exporting Components
• Writing Markup with JSX
• SASS Cheatsheet
• React Cheatsheet

Additional Questions

1. Note the naming conventions in the AirBnB React/JSX Style Guide. What patterns do you see?

   • I can see that the naming conventions are camelCase for variables and functions, PascalCase for components, and UPPER_CASE for constants.

2. Looking ahead at this module’s Course Schedule, what do you look forward to learning?

   • I look forward to learning more about React and how to use it to build a full-stack application. I also look forward to learning more about the different types of components and how to use them. I would like to implement more advanced components than I have in past projects.

3. What are your learning goals after reading the the Class README?

   • Goal 1: I want to read up on Angular and Vue to see how they compare to React.
   • Goal 2: I want to get to lawyer level when debating Libraries vs. Frameworks.

Things I Want to Know More About

1. No, I’m done.