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

Figure 4.2. We need another data type that’s mutable in the component to make the view change.

Figure 4.3. The clock component shows the current time in digital format and is updated every second.

Figure 4.4. The Clock is ticking.

Figure 4.5. React is updating the time’s text, not the <div> element (I manually added color: blue, and the <div> remained blue).

Figure 4.6. New values for properties and states can change the UI. New property values come from a parent, and new state values come from the component.

Figure 4.7. Clock with two ways to show time: analog and digital

Figure 4.8. React DevTools v0.15.4 shows two components.

Chapter 5. React component lifecycle events

Figure 5.1. Categories of lifecycle events as a component proceeds through its lifecycle, and how many times events in a category can be called

Figure 5.2. The second log shows the DOM node because componentDidMount() was fired when the element was rendered and mounted to the real DOM. Thus, you have the node.

Figure 5.3. The logger has been mounted.

Figure 5.4. Content was removed from the logger after 2 seconds; hence, the componentWillUnmount() log entry right before the removal.

Figure 5.5. Showing a list of users (fetched from a data store) styled with Twitter Bootstrap

Figure 5.6. A dialog confirmation when the user tries to leave the page

Figure 5.7. Note will be replaced by another element in 5, 4, ... seconds.

Figure 5.8. Note is replaced by a div, and there will be no dialog confirmation when the user tries to leave the page.

Figure 5.9. Dialog confirmation when the user tries to leave the page

Chapter 6. Handling events in React

Figure 6.1. Clicking the button prints the value of SaveButtonthis: SaveButton.

Figure 6.2. Capture, target, and bubbling phases

Figure 6.3. The capture event happens before the regular event.

Figure 6.4. A DOM event (1) bubbling to its ancestors (2-3), where it’s captured by a regular (bubblingstage) React event listener (4), because in React, events are captured at the root (Document)

Figure 6.5. Inspecting events on the <div> element (there are none)

Figure 6.6. Inspecting events on the document elementdocument element (there is one)

Figure 6.7. React reuses event listeners on the root, so you see only one of each type even when you have one or more elements with mouseover.

Figure 6.8. Hovering the mouse over the box prints the event object in the DevTools console.

Figure 6.9. Saving a synthetic event object for later use isn’t possible by default—hence, the warning.

Figure 6.10. Clicking the button increments the counter, which has an initial value of 0.

Figure 6.11. Passing an event handler as a property to a button (presentational component) enables the incrementing of the counter in the button label, which is also a property of a button.

Figure 6.12. Splitting state and working with two stateless child components (by allowing them to exchange data via a parent): one for the counter (text) and another for the button

Figure 6.13. Scalable CSS radio buttons managed by React, which is listening to a window resize event. As the window size changes, so does the size of the radio buttons.

Figure 6.14. React components (buttons and the text “Value: ...”) can be integrated with other libraries, such as jQuery SliderjQuery Slider, to make all elements from all libraries communicate with each other.

Figure 6.15. Programmatically disabling the Less button to prevent negative values

Chapter 7. Working with forms in React

Figure 7.1. The correct way to work with form elements: from user input to events, then to the state and the view

Figure 7.2. One-way binding is responsible for the model-to-view transition. two-way bindingTwo-way binding also handles changes from view to model.

Figure 7.3. Radio button group

Figure 7.4. Rendering check boxes with React as the preselected option

Figure 7.5. Defining and rendering the <textarea> element

Figure 7.6. Rendering and preselecting the value of a drop-down

Figure 7.7. Rendering and preselecting multiselect elements

Figure 7.8. You can type anything you want, as shown in the console. But only digits are allowed as the value and in the view, because this element is controlled.

Figure 7.9. The controlled element filters input by setting state to digits only.

Figure 7.10. This uncontrolled component has no value set by the application.

Figure 7.11. Typing updates the state due to capturing changes, but the value of the DOM text-input element isn’t controlled.

Figure 7.12. Using an uncontrolled element without capturing changes and instead accessing values via references

Figure 7.13. Uncontrolled form that gets data from two fields and prints it in logs

Figure 7.14. The value of an <input> element appears frozen (unchangeable) on a web page when you set the value to a string.

Chapter 8. Scaling React components

Figure 8.1. The first button has a label that’s set on creation. The other elements don’t and thus fall back to the default property value.

Figure 8.2. Warnings due to wrong property types

Figure 8.3. Expanding a warning revealed the problematic line number: 9.

Figure 8.4. Inspecting the compiled source code is often enough to understand the problem.

Figure 8.5. Rendering a single Content component with a heading and paragraph using this.props .children, which shows two items

Figure 8.6. Rendering four elements with different content using a single component class

Figure 8.7. Simplified representation of the higher-order component pattern, where an enhanced component has properties not just of A but of A and B

Figure 8.8. By using the displayName static attribute, you can change the name of the component from _LoadWebsite to EnhancedComponent.

Figure 8.9. All three components load the React website, thanks to the function that provides the code to load it.

Chapter 9. Project: Menu component

Figure 9.1. The menu you’re going to build

Figure 9.2. React DevTools show you the keys of the list elements.

Figure 9.3. React menu showing rendering of nested components

Figure 9.4. The menu created with JSX

Chapter 10. Project: Tooltip component

Figure 10.1. A tooltip appears when a user hovers their cursor over the marked text.

Figure 10.2. The help text is shown on mouse-over by using an opacity value of 1 and zIndex value of 1000.

Figure 10.3. When the user hovers over blue text, a black container with text and a pointy arrow appears, offering additional information.

Chapter 11. Project: Timer component

Figure 11.1. The timer example in action, with 14 seconds remaining. The selected 15 Seconds button was clicked a second ago.

Figure 11.2. Timer and Button components

Figure 11.3. Timer app execution, starting at the top

Figure 11.4. Clicking 15 Seconds launched the timer. Now it says that 14 seconds remain.

Chapter 12. The Webpack build tool

Figure 12.1. Original email project before using Webpack

Figure 12.2. Webpack listens for code changes and sends update notifications along with updates to the running app in the browser.

Figure 12.3. HMR updated the view from “Email” to “Your Email” without erasing the data in the fields, as shown in the log.

Chapter 13. React routing

Figure 13.1. Navigating from the home page to the Profile page and changing the URL by clicking a link

Figure 13.2. Navigating to /about renders the About text in the Content component, changes the URL, and makes the button active.

Figure 13.3. The Login page (/#/login) doesn’t use the common layout (Content) that includes a menu. There’s only a Login element.

Figure 13.4. The Content component as the Home page (no children)

Figure 13.5. The Posts page renders the Posts component in the Content (menu) component because it’s defined as a child route of Content in app.jsx.

Chapter 14. Working with data using Redux

Figure 14.1. Unidirectional vs. bidirectional data flow

Figure 14.2. A simplified view of unidirectional data flow, in which views can’t modify models directly

Figure 14.3. A simplified view of the bidirectional data flow typical for an MVC-like architecture

Figure 14.4. An MVC-like architecture introduces complexity by allowing views to trigger changes on any model, and vice versa.

Figure 14.5. The Flux architecture simplifies the data flow by having it go in one direction (from store to view).

Figure 14.6. The Flux architecture in a nutshell: actions trigger the dispatcher, which triggers the store, which renders views.

Figure 14.7. The Netflix clone will show a grid of movies on the home page.

Figure 14.8. Details of a movie are shown when you click its poster.

Figure 14.9. Individual movie view on a small screen. The URL includes the movie ID.

Chapter 15. Working with data using GraphQL

Figure 15.1. Single-movie view server from Express server (port 3000) with browser history (no hash signs!)

Chapter 16. Unit testing React with Jest

Figure 16.1. Testing pyramid according to software engineering’s best practices

Figure 16.2. Password widget that autogenerates a password according to the given strength criteria

Chapter 17. React on Node and Universal JavaScript

Figure 17.1. SPA that doesn’t need SEO support because it’s behind a login screen

Figure 17.2. Universal HTML generation and code sharing between browser and server vs. no code sharing in a traditional SPA

Figure 17.3. Practical application of Universal JavaScript with React, Node, and Express

Figure 17.4. The Express/Node server will generate HTML and send it to the browser.

Figure 17.5. Rendering from the React component on the server side

Figure 17.6. Rendering React markup from a Handlebars layout using Express gives you an HTML page.

Figure 17.7. Message board app with a form to post a message and a list of existing messages

Figure 17.8. Gist of Universal JavaScript with React and Express

Figure 17.9. Universal app in action, with server and browser rendering

Figure 17.10. Loading the server-side HTML is 10 times faster than complete loading, which is slower due to bundle.js.

Figure 17.11. Localhost (first response) for browser-only rendering (top) vs. server-side rendering (bottom)

Chapter 18. Project: Building a bookstore with React Router

Figure 18.1. Nile Book Store home page with a list of books

Figure 18.2. Product view in a modal window of the Nile bookstore

Figure 18.3. A direct link opens the product view in a new window rather than a modal.

Figure 18.4. An invoice shouldn’t have the header shown on other views.

Figure 18.5. If you don’t check for isModal and use previousChildren, the list of books isn’t shown.

Figure 18.6. Shopping cart

Figure 18.7. Checkout doesn’t need a header.

Chapter 19. Project: Checking passwords with Jest

Figure 19.1. Password widgetPassword widget that lets you enter a password or autogenerate one that meets the given strength criteria

Figure 19.2. The widget with some of the criteria fulfilled and the password visible

Figure 19.3. The Save button is enabled when all the strength criteria are met.

Chapter 20. Project: Implementing autocomplete with Jest, Express, and MongoDB

Figure 20.1. In Slack, when you start typing, the widget offers matches.

Figure 20.2. Autocomplete form with an empty field

Figure 20.3. Typing angu filters the matches and shows only angular and angular2.

Figure 20.4. The Add button is shown only when there are no matches.

Figure 20.5. The room name has been saved and now appears in the list.

Figure 20.6. Inspect the localhost response by clicking Network (1) and Localhost (2) to ensure that server-side rendering (3) is working properly.

Appendix E. ES6 for success

Figure E.1. Objects in ES5

Figure E.2. The ES6 object literal extends from serviceBase and defines methods and attributes.