List of Figures

Chapter 1. Meeting React

Figure 1.1. Once a component has been rendered, if its state changes, it’s compared to the in-memory virtual DOM and rerendered if necessary.

Figure 1.2. A typical SPA architecture

Figure 1.3. Inside a single-page application

Figure 1.4. Hello World

Figure 1.5. Inspecting the Hello World app as rendered by React

Chapter 2. Baby steps with React

Figure 2.1. The React Quickly website has many nested UI elements.

Figure 2.2. Rendering a single heading element

Figure 2.3. Structuring a React render by using a wrapper <div> container to render sibling headings

Figure 2.4. React DevTools shows a <div> wrapper for nested sibling h1 elements.

Figure 2.5. Rendering a <div> element created from a custom component class instead of rendering it directly

Figure 2.6. Rendering an element created from a custom HelloWorld component class

Figure 2.7. The component class HelloWorld renders properties that are standard HTML attributes, but not frameworkName.

Figure 2.8. The HelloWorld class is used three times to generate three h1 elements that have different attributes and innerHTML.

Figure 2.9. Result of reusing HelloWorld with different properties to render three different headings

Chapter 3. Introduction to JSX

Figure 3.1. JSX is transpiled into regular JavaScript.

Figure 3.2. Results of rendering a link with the value from a method

Chapter 4. Making React interactive with states

Figure 4.1. The react-autocomplete component in action