React Quickly
Painless web apps with React, JSX, Redux, and GraphQL
Azat Mardan
Foreword by: John Sonmez
  • August 2017
  • ISBN 9781617293344
  • 528 pages
  • printed in black & white
pBook available Sep 6, 2017
ePub + Kindle available Sep 15, 2017

Simply the best way to learn React.js.

From the Foreword by John Sonmez, Author of Soft Skills

React Quickly is for anyone who wants to learn React.js fast. This hands-on book teaches you the concepts you need with lots of examples, tutorials, and a large main project that gets built throughout the book.

Table of Contents detailed table of contents

Part 1: Core React

1. Meeting React

1.1. What is React and What Problems It Solves

1.1.1. React Benefits

1.1.2. React Disadvantages

1.2. How Does React Fit Into My Web Application?

1.2.1. React Libraries and Rendering Targets

1.2.2. Single-Page Applications and React

1.2.3. React Stack

1.3. Your First React Code: Hello World

1.4. Quiz

1.5. Summary

1.6. Quiz Answers

2. Baby Steps with React

2.1. Nesting Elements

2.2. Creating Component Class

2.3. Working with Properties

2.4. Quiz

2.5. Summary

2.6. Answers to Quiz

3. Introduction to JSX

3.1. What is JSX and Its Benefits?

3.2. Understanding JSX

3.2.1. Creating Elements with JSX

3.2.2. Working with JSX in Components

3.2.3. Outputting Variables in JSX

3.2.4. Working with Properties in JSX

3.2.5. Creating React Component Methods

3.2.6. If/Else in JSX

3.2.7. Comments in JSX

3.3. Setting Up JSX Transpiler with Babel

3.4. React and JSX gotchas

3.4.1. Special Characters

3.4.2. data- Attributes

3.4.3. style Attribute

3.4.4. class and for

3.4.5. Boolean Attribute Values

3.5. Quiz

3.6. Summary

3.7. Quiz Answers

4. Making React Interactive with States

4.1. What is React Component State

4.2. Working with States

4.2.1. Accessing States

4.2.2. Setting the Initial State

4.2.3. Updating States

4.3. States and Properties

4.4. Stateless Components

4.5. Stateful vs. Stateless Components

4.6. Quiz

4.7. Summary

4.8. Quiz Answers

5. React Component Lifecycle Events

5.1. A Bird’s-eye View of React Component Lifecycle Events

5.2. Categories of Events

5.3. Implementing an Event

5.4. All Events Together

5.5. Mounting Events

5.5.1. componentWillMount()

5.5.2. componentDidMount()

5.6. Updating Events

5.6.1. componentWillReceiveProps()

5.6.2. shouldComponentUpdate()

5.6.3. componentWillUpdate()

5.6.4. componentDidUpdate()

5.7. Unmounting Event

5.7.1. componentWillUnmount()

5.8. A Simple Example

5.9. Quiz

5.10. Summary

5.11. Quiz Answers

6. Handling Events in React

6.1. Working with DOM Events in React

6.1.1. Capture and Bubbling Phases

6.1.2. React Events Under The Hood

6.1.3. Working with React Event Object SyntheticEvent

6.1.4. Using Events and State

6.1.5. Passing Event Handlers as Properties

6.1.6. Exchanging Data Between Components

6.2. Responding to DOM Events Not Supported by React

6.3. Integrating React with Other Libraries: jQuery UI Events

6.3.1. Integrating Buttons

6.3.2. Integrating Label

6.4. Quiz

6.5. Summary

6.6. Quiz Answers

7. Working with Forms in React

7.1.1. Defining Form and Its Events in React

7.1.2. Defining Form Elements

7.1.3. Capturing Form Changes

7.1.4. Account Field Example

7.2. Alternative Ways to Work with Forms

7.2.1. Uncontrolled Elements with Capturing Changes

7.2.2. Uncontrolled Elements Without Capturing Changes

7.2.3. Using References to Access Values

7.2.4. Default Values

7.3. Quiz

7.4. Summary

7.5. Quiz Answers

8. Scaling React Components

8.1. Default Properties in Components

8.2. React Property Types and Validation

8.3. Rendering Any Children

8.4. Creating React Higher-Order Components for Code Re-Use

8.4.1. Using displayName: Distinguish child components from their parent

8.4.2. Using the Spread Operator: Pass all your attributes

8.4.3. Using Higher-Order Components

8.5. Best Practices: Presentational vs. Container Components

8.6. Quiz

8.7. Summary

8.8. Quiz Answers

9. Project: Menu

9.1. Project Structure and Scaffolding

9.2. Building the Menu without JSX

9.2.1. The Menu Component

9.2.3. Getting It Running

9.3. Building the Menu in JSX

9.3.1. Refactoring the Menu Component

9.3.3. Getting it Running

9.4. Homework

9.5. Summary

10. Project: Tooltip

10.1. Project Structure and Scaffolding

10.2. The Tooltip component

10.2.1. The toggle() Function

10.2.2. The render() function

10.3. Getting It Running

10.4. Homework

10.5. Summary

11. Project: Timer

11.1. Project Structure and Scaffolding

11.2. App Architecture

11.3. The TimerWrapper Component

11.4. The Timer Component

11.5. The Button Component

11.6. Getting It Running

11.7. Homework

11.8. Summary

Part 2: React & Friends

12. The Webpack Build Tool

12.1. What Does Webpack Do?

12.2. Adding Webpack to a Project

12.2.1. Installing Webpack & Its Dependencies

12.2.2. Configuring Webpack

12.3. Modularizing Your Code

12.4. Running Webpack and Testing The Build

12.5. Hot Module Replacement

12.5.1. Configuring Hot Module Replacement

12.5.2. Hot Module Replacement in Action

12.6. Quiz

12.7. Summary

12.8. Quiz Answers

13. React Routing

13.1. Implementing Router from Scratch

13.1.1. Setting up the Project

13.1.2. Creating the Route Mapping in app.jsx

13.1.3. Creating the Router in router.jsx

13.2. React Router

13.2.1. React Router’s JSX Style

13.2.2. Hash History

13.2.3. Browser History

13.2.4. React Router Dev Setup with Webpack

13.2.5. Creating a Layout Component

13.3. React Router Features

13.3.1. Accessing Router with withRouter HOC

13.3.2. Navigating Programmatically

13.3.3. URL Params and Other Route Data

13.3.4. Passing Props in React Router

13.4. Routing with Backbone

13.5. Quiz

13.6. Summary

13.7. Quiz Answers

14. Working with Data Using Redux

14.1. React supports Unidirectional Data Flow

14.2. Flux Data Architecture

14.3. Redux Data Library

14.3.1. Redux Netflix Clone

14.3.2. Dependencies and Configs

14.3.3. Enabling Redux

14.3.4. Routes

14.3.5. Combining Reducers

14.3.6. Reducer for Movies

14.3.7. Actions

14.3.8. Action Creators

14.3.9. Connecting Component to the Store

14.3.10. Dispatching an Action

14.3.11. Passing Action Creators into Component Props

14.3.12. Running the Netflix Clone

14.3.13. Wrap-up

14.4. Quiz

14.5. Summary

14.6. Quiz Answers

15. Working with Data Using GraphQL

15.1. Server Data with GraphQL and Node

15.1.1. Installing GraphQL on a Server

15.1.2. Data Structure

15.1.3. GraphQL Schema

15.1.4. Querying the API and Saving Response into Store

15.1.5. Showing the List of Movies

15.1.6. Wrap-up

15.2. Quiz

15.3. Summary

15.4. Quiz Answers

16. Unit Testing React with Jest

16.1. Why Jest (vs Mocha or Others)

16.2. Unit Testing with Jest

16.2.1. Writing Unit Test in Jest

16.2.2. Jest Assertions

16.3. UI Testing React with Jest and TestUtils

16.3.1. Finding Elements with TestUtils

16.3.2. UI Testing Password Widget

16.3.3. Shallow Rendering

16.4. Quiz

16.5. Summary

16.6. Quiz Answers

17. React on Node and Universal JavaScript

17.1. Why React on the Server and What is Universal JavaScript

17.1.1. Ability for Search Engines to Index Pages Properly

17.1.2. Better Performance with Faster Loading Time

17.1.3. Better Code Maintainability

17.1.4. Universal JavaScript with React and Node

17.2. React on Node

17.3. React and Express: Rendering on the Server-side From Components

17.3.1. Rendering Simple Text Server-side

17.3.2. Rendering An HTML Page

17.4. Universal JavaScript with Express and React

17.4.1. Project Structure and Configuration

17.4.2. Setting up the Server

17.4.3. Server-Side Layout Templates with Handlebars

17.4.4. Composing React Components on the Server

17.4.5. Client-side React Code

17.4.6. Setting up Webpack

17.4.7. Running the App

17.5. Quiz

17.6. Summary

17.7. Quiz Answers

18. Project: Nile Book Store with React Router

18.1. Project Structure and Webpack Configuration

18.2. The Host HTML File

18.3. Creating Components

18.3.1. Main File: app.jsx

18.3.2. Cart

18.3.3. Checkout

18.3.4. Modal

18.3.5. Product

18.4. Launching the Project

18.5. Homework

18.6. Summary

19. Project Password with Jest

19.1. Project Structure and Webpack Configuration

19.2. The Host HTML File

19.3. Implementing a Strong Password Module

19.3.1. The Tests

19.3.2. The Code

19.4. Implementing the Password Component

19.4.1. The Tests

19.4.2. The Code

19.5. Putting it into Action

19.6. Homework

19.7. Summary

20. Project: Autocomplete with Jest, Express and MongoDB

20.1. Project Structure and Webpack Configuration

20.2. Implementing the Web Server

20.2.1. Defining the RESTful APIs

20.2.2. Rendering React on the Server

20.3. Adding the Browser Script

20.4. Creating the Server Template

20.5. Implementing the Autocomplete Component

20.5.1. The Tests for Autocomplete

20.5.2. The Code for Autocomplete

20.6. Putting it All Together

20.7. Homework

20.8. Summary


Appendix A: Installations

A.1. Installing React

A.2. Installing Node.js

A.3. Installing Express

A.4. Installing Bootstrap

A.5. Installing Browserify

A.6. Installing MongoDB

A.7. Using Babel To Compile Your JSX and ES6

A.7.1. Node.js and ES6

A.7.2. Browser Standalone Babel

Appendix B: React Cheatsheet

B.1. Installation

B.2. Rendering

B.2.1. Rendering (ES5)

B.2.2. Rendering (ES5+JSX)

B.3. Server-side Rendering

B.4. Components

B.4.1. ES5

B.4.2. ES5 + JSX

B.4.3. ES6 + JSX

B.5. Advanced Components

B.5.1. Options (ES5)

B.6. Lifecycle Events

B.7. Special Props

B.8. propTypes

B.8.1. Custom Validation

B.9. Component Properties and Methods

B.10. React Addons

B.11. React Components

Appendix C: Express.js 4 Cheatsheet

C.1. Installation

C.2. Generator

C.3. Basics

C.4. HTTP Verbs and Routes

C.5. Request

C.6. Request Header Shortcuts

C.7. Response

C.8. Handlers Signatures

C.9. Stylus and Jade

C.10. Body

C.11. Static

C.12. Connect Middleware

C.14. Resources

Appendix D: MongoDB and Mongoose Cheatsheet

D.1. MongoDB

D.2. MongoDB Console

D.3. Mongoose Installation

D.4. Mongoose Basic Usage

D.5. Mongoose Schema

D.6. Create, Read, Update, Delete (CRUD) Mongoose Example

D.7. Mongoose Model Methods

D.8. Mongoose Document Methods

Appendix E: ES6 for Success

E.1. 1. Default Parameters in ES6

E.2. 2. Template Literals in ES6

E.3. 3. Multi-line Strings in ES6

E.4. 4. Destructuring Assignment in ES6

E.5. 5. Enhanced Object Literals in ES6

E.6. 6. Arrow Functions in ES6

E.7. 7. Promises in ES6

E.8. 8. Block-Scoped Constructs Let and Const

E.9. 9. Classes in ES6

E.10. 10. Modules in ES6

E.11. How to Use ES6 Today (Babel)

E.12. Summary of ES6 Things

About the Technology

Successful user interfaces need to be visually interesting, fast, and flowing. The React.js JavaScript library supercharges view-heavy web applications by improving data flow between UI components. React sites update visual elements efficiently and smoothly, minimizing page reloads. React is developer friendly, with a strong ecosystem to support the dev process along the full application stack. And because it's all JavaScript, React is instantly familiar.

About the book

React Quickly is the tutorial for web developers who want to get started fast with React.js. Following carefully chosen and clearly explained examples, you'll learn React development using your existing JavaScript and web dev skills. You'll explore a host of different projects as you learn about web components, forms, and data.

What's inside

  • Master React fundamentals
  • Build full web apps with data and routing
  • Test components
  • Optimize React apps

About the reader

This book is for developers comfortable building web applications with JavaScript.

About the author

Azat Mardan is a Tech Fellow at Capital One with extensive experience using and teaching JavaScript and Node, and author of several books on JavaScript, Node, React, and Express.

combo $49.99 pBook + eBook + liveBook
eBook $39.99 pdf + ePub + kindle + liveBook

FREE domestic shipping on three or more pBooks

A one-stop shop for anyone who wants a guided introduction, not only to React, but to the ecosystem of tools, concepts, and libraries surrounding it.

Peter Cooper, Editor of JavaScript Weekly

Perfect for new React developers and seasoned veterans alike.

Matthew Heck, TechChange

An absolutely engaging read, where theory meets practice!

Dane Balia, Hetzner

Excellent introduction for getting up to speed on React...quickly!

Art Bergquist, Cognetic Technologies