React Quickly
Azat Mardan
  • MEAP began December 2015
  • Publication in March 2017 (estimated)
  • ISBN 9781617293344
  • 400 pages (estimated)
  • printed in black & white

React is a JavaScript library developed for one main reason—to let you build reusable UI components that present data that changes. The React philosophy is to focus solely on the user interface, and to do it really well. In model-view-controller (MVC) terminology, React is the view. Because it has to work with models and other libraries, it's designed to play nicely with pretty much any other framework, router, style and model library. And it's well-supported—React emerged from Instagram and is now used by Facebook, Asana, Khan Academy, and Atom among lots of others.

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. You'll start with the basics, including how React fits in your application, JSX, and handling states and events. Next, you'll learn about the core topics like components, forms and data. Finally, you'll dive into React integration topics, like unit testing and isomorphic JavaScript with Express.js, and Gulp.

"In his new book, React Quickly, Azat Mardan has in his typical lucid style, laid out everything you need to learn about the React ecosystem and build performant SPA applications quickly. Just the chapters on React State and Universal Javascript are worth the price of the book."

~ Prakash Sarma, CEO, Newstar Corp. newstar-online.com

"Simple language with simple logical examples to get you up and running quickly is why this book truly justifies to its title, "React Quickly". This book covers all major topics that any developer new to a React needs to start getting productive writing Apps using React. This book will keep you engaged. I am thankful that Azat took time to share his React journey with us."

~ Suhas Deshpande, Software Engineer at Capital One

" React Quickly is a one-stop shop for anyone who wants a guided introduction not only to React but the ecosystem of tools, concepts, and libraries around it. Follow Azat's walkthroughs, work on the projects, and you'll soon understand React, Redux, GraphQL, Webpack, and Jest as well as how to put them to work."

~ Peter Cooper

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

Appendixes

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

What's inside

  • Concepts like props, components, and events
  • React.js + JSX
  • Best practices
  • Unit Testing
  • Isomorphic JavaScript

About the reader

This book is for web developers with some JavaScript experience.

About the author

Azat Mardan has extensive experience with JavaScript and Node as a developer, as well as a respected author and trainer.

Manning Early Access Program (MEAP) Read chapters as they are written, get the finished eBook as soon as it’s ready, and receive the pBook long before it's in bookstores.
Buy
MEAP combo $44.99 pBook + eBook
MEAP eBook $35.99 pdf + ePub + kindle

FREE domestic shipping on three or more pBooks