Table of Contents for

React Quickly: Painless web apps with React, JSX, Redux, and GraphQL

List of Listings

Chapter 1. Meeting React

Listing 1.1. Loading React libraries and code (index.html)

Listing 1.2. Creating and rendering an h1 element (index.html)

Chapter 2. Baby steps with React

Listing 2.1. Creating a <div> element with two <h1> children

Listing 2.2. HTML for the nested elements example without the React code

Listing 2.3. Creating and rendering a React component class

Listing 2.4. Using the frameworkName property in the render() method

Listing 2.5. Passing all the properties from HelloWorld to <h1>

Listing 2.6. Using properties passed during element creation

Chapter 3. Introduction to JSX

Listing 3.1. Hello World in JavaScript

Listing 3.2. Hello World in JSX

Listing 3.3. Creating a HelloWorld class in JSX

Listing 3.4. Outputting variables in JSX

Listing 3.5. Working with properties

Listing 3.6. Invoking a component method to get a URL

Chapter 4. Making React interactive with states

Listing 4.1. Rendering state in JSX

Listing 4.2. Clock component constructor

Listing 4.3. Implementing a clock with state

Listing 4.4. Stateless Hello World

Listing 4.5. Passing state to children

Listing 4.6. Stateless digital display component

Listing 4.7. Stateless analog display component

Chapter 5. React component lifecycle events

Listing 5.1. Rendering and updating a Logger component three times

Listing 5.2. Observing component lifecycle events

Listing 5.3. Fetching data to display in a table

Listing 5.4. Adding and removing an event listener

Listing 5.5. Rendering Note before removing it

Chapter 6. Handling events in React

Listing 6.1. Declaring an event handler as a class method

Listing 6.2. Capture event following by bubbling event

Listing 6.3. Event handler receiving a synthetic event

Listing 6.4. Event handler as a class method; binding in render()

Listing 6.5. Nullifying a synthetic event

Listing 6.6. Updating state as a result of a click action

Listing 6.7. Stateless button component

Listing 6.8. Passing an event handler as a property

Listing 6.9. Button component using an event handler from Content

Listing 6.10. Passing an event handler and state to two components

Listing 6.11. Using lifecycle events to listen to DOM events

Listing 6.12. Using state values for styles to resize elements

Listing 6.13. Integrating with a jQuery plug-in via its events

Listing 6.14. Rendering slider buttons

Listing 6.15. Integrating with a jQuery plug-in via window

Listing 6.16. Setting up event listeners on a jQuery UI plug-in

Chapter 7. Working with forms in React

Listing 7.1. Rendering radio buttons and handling changes

Listing 7.2. Defining check boxes

Listing 7.3. Rendering form elements

Listing 7.4. Rendering form elements and capturing changes

Listing 7.5. Rendering form elements

Listing 7.6. Implementing a controlled component

Listing 7.7. Uncontrolled element that captures changes

Listing 7.8. Beginning of the email form

Listing 7.9. placeholder propertyrender() method of the email form

Chapter 8. Scaling React components

Listing 8.1. Using propTypes and defaultProps

Listing 8.2. Rendering six buttons

Listing 8.3. Rendering elements using Content

Listing 8.4. Implementing a higher-order component

Listing 8.5. HOCs sharing an event handler

Chapter 9. Project: Menu component

Listing 9.1. Basic skeleton of the Menu script

Listing 9.2. Menu component that uses map() to render links

Listing 9.3. Link component

Listing 9.4. package.json for Menu in JSX

Listing 9.5. Menu with JSX

Listing 9.6. JSX version of Link

Chapter 10. Project: Tooltip component

Listing 10.1. Tooltip project package.json file

Listing 10.2. Tooltip project index.html file

Listing 10.3. Tooltip component and text

Listing 10.4. toggle() function

Listing 10.5. Full render() function for Tooltip

Chapter 11. Project: Timer component

Listing 11.1. Timer project package.json file

Listing 11.2. Timer project index.html file

Listing 11.3. Outline of timer.jsx

Listing 11.4. TimerWrapper component

Listing 11.5. Timer component, showing time remaining

Listing 11.6. Button component that triggers the countdown

Chapter 12. The Webpack build tool

Listing 12.1. Setting up the dev environment

Listing 12.2. Webpack configuration file

Listing 12.3. Refactoring app.jsx

Listing 12.4. webpack-dev-server and HMR configuration

Chapter 13. React routing

Listing 13.1. Setting up the dev environment

Listing 13.2. webpack.config.js

Listing 13.3. require() functionRoute mapping (app.jsx)

Listing 13.4. Implementing a URL router

Listing 13.5. Defining Router

Listing 13.6. Dependencies to use Webpack v1, React Router v2.6, React v15.2, and JSX

Listing 13.7. Defining React explicitly

Listing 13.8. index.html

Listing 13.9. Configuring Webpack

Listing 13.10. Complete Content component

Listing 13.11. Calling router.push() to navigate

Listing 13.12. Rendering post data

Listing 13.13. Posts implementation with data from props.route

Chapter 14. Working with data using Redux

Listing 14.1. Dependences for the Netflix clone

Listing 14.2. Netflix clone Webpack configuration file

Listing 14.3. Main app entry point

Listing 14.4. Defining URL routing with React Router

Listing 14.5. Combining reducers

Listing 14.6. Using the redux-actions library

Listing 14.7. Passing action creators into Movies properties

Listing 14.8. Movie implementation

Chapter 15. Working with data using GraphQL

Listing 15.1. Netflix clone package.json

Listing 15.2. Express server to provide data and static assets

Listing 15.3. GraphQL schema

Listing 15.4. fetchMovie() component class method

Chapter 16. Unit testing React with Jest

Listing 16.1. Module for generating passwords

Listing 16.2. Saving a test CLI command

Listing 16.3. Test file for the password-generating module

Listing 16.4. Rendering a React element in Jest

Listing 16.5. Finding a React element’s child element <div>

Chapter 17. React on Node and Universal JavaScript

Listing 17.1. ReactDOMServerServer-side setup code

Listing 17.2. Server-side Email (node/email.jsx)

Listing 17.3. node/email.jsx rendered into strings

Listing 17.4. Using React on Express to show HTML on a page

Listing 17.5. Full code for React, Express, hbs server

Listing 17.6. Server side of the message board app

Listing 17.7. Rendering HTML generated from React components

Listing 17.8. Outputting HTML generated by React in Handlebars

Listing 17.9. Server-side layout to render HTML from React components

Listing 17.10. Fetching messages and sending a message

Listing 17.11. Rendering client React components on the browser

Chapter 18. Project: Building a bookstore with React Router

Listing 18.1. Nile Book Store project dependencies and setup

Listing 18.2. Webpack configuration for the Nile store

Listing 18.3. Host HTML file

Listing 18.4. Main app file

Listing 18.5. App component

Listing 18.6. Index component for the home page

Listing 18.7. Cart component

Listing 18.8. Checkout component

Listing 18.9. Modal component

Listing 18.10. Individual product information

Chapter 19. Project: Checking passwords with Jest

Listing 19.1. Dependencies and setup for the project

Listing 19.2. Webpack configuration

Listing 19.3. Host HTML file

Listing 19.4. testingof password modulesTests for the password module

Listing 19.5. testingof Password componentSpec for the Password component

Listing 19.6. Rules for password strength

Listing 19.7. Implementing the Password component

Listing 19.8. Implementing render()

Listing 19.9. PasswordGenerate component

Listing 19.10. PasswordInput component

Listing 19.11. PasswordVisibility component

Listing 19.12. PasswordInfo component

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

Listing 20.1. Dependencies and setup for the project

Listing 20.2. Webpack configuration

Listing 20.3. Components and libraries for the web server

Listing 20.4. RESTful API routes

Listing 20.5. Server-side React

Listing 20.6. Main client-side script

Listing 20.7. Express app rendering data for browser React

Listing 20.8. Host markup page