React Quickly
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.
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. Recommended Way of 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.2. The Link Component
9.2.3. Getting It Running
9.3. Building the Menu in JSX
9.3.1. Refactoring the Menu Component
9.3.2. Refactoring the Link 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. HMR 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 and GraphQL
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. Server Data with GraphQL and Node
14.4.1. Installing GraphQL on a Server
14.4.2. Data Structure
14.4.3. GraphQL Schema
14.4.4. Querying the API and Saving Response into Store
14.4.5. Showing the List of Movies
14.4.6. Wrap-up
14.5. Quiz
14.6. Summary
14.7. Quiz Answers
15. Unit Testing React with Jest
15.1. Why Jest (vs Mocha or Others)
15.2. Unit Testing with Jest
15.2.1. Writing Unit Test in Jest
15.2.2. Jest Assertions
15.3. UI Testing React with Jest and TestUtils
15.3.1. Finding Elements with TestUtils
15.3.2. UI Testing Password Widget
15.3.3. Shallow Rendering
15.4. Quiz
15.5. Summary
15.6. Quiz Answers
16. React on Node and Universal JavaScript
16.1. Why React on the Server and What is Universal JavaScript
16.1.1. Ability for Search Engines to Index Pages Properly
16.1.2. Better Performance with Faster Loading Time
16.1.3. Better Code Maintainability
16.1.4. Universal JavaScript with React and Node
16.2. React on Node
16.3. React and Express: Rendering on the Server-side From Components
16.3.1. Rendering Simple Text Server-side
16.3.2. Rendering An HTML Page
16.4. Universal JavaScript with Express and React
16.4.1. Project Structure and Configuration
16.4.2. Setting up the Server
16.4.3. Server-Side Layout Templates with Handlebars
16.4.4. Composing React Components on the Server
16.4.5. Client-side React Code
16.4.6. Setting up Webpack
16.4.7. Running the App
16.5. Quiz
16.6. Summary
16.7. Quiz Answers
17. Project: Nile Book Store with React Router
18. Project Password with Jest
19. Project: Autocomplete with Jest, Express and MongoDB
Appendixes
Appendix A: Installation
Appendix B: React Cheatsheet
Appendix C: Express Cheatsheet
Appendix D: MongoDB \ Mongoose Cheatsheet
Appendix E: ES2015 Cheatsheet
About the book
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.
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