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

React Quickly....1

brief contents....9

contents....11

foreword....19

preface....21

acknowledgments....23

about this book....25

Roadmap....25

Who this book is for (read this!)....26

What this book is not (read this too!)....26

How to use this book....27

Source code....27

Errata....28

Book forum....28

about the author....29

about the cover....31

Part 1: React foundation....33

Chapter 1: Meeting React....35

1.1 What is React?....37

1.2 The problem that React solves....37

1.3 Benefits of using React....38

1.3.1 Simplicity....39

1.3.2 Speed and testability....45

1.3.3 Ecosystem and community....46

1.4 Disadvantages of React....47

1.5 How React can fit into your web applications....47

1.5.1 React libraries and rendering targets....48

1.5.2 Single-page applications and React....50

1.5.3 The React stack....51

1.6 Your first React code: Hello World....53

1.7 Quiz....57

1.8 Summary....57

1.9 Quiz answers....58

Chapter 2: Baby steps with React....59

2.1 Nesting elements....59

2.2 Creating component classes....63

2.3 Working with properties....66

2.4 Quiz....71

2.5 Summary....72

2.6 Quiz answers....72

Chapter 3: Introduction to JSX....73

3.1 What is JSX, and what are its benefits?....74

3.2 Understanding JSX....77

3.2.1 Creating elements with JSX....77

3.2.2 Working with JSX in components....78

3.2.3 Outputting variables in JSX....80

3.2.4 Working with properties in JSX....81

3.2.5 Creating React component methods....85

3.2.6 if/else in JSX....87

3.2.7 Comments in JSX....90

3.3 Setting up a JSX transpiler with Babel....91

3.4 React and JSX gotchas....95

3.4.1 Special characters....96

3.4.2 data- attributes....97

3.4.3 style attribute....97

3.4.4 class and for....98

3.4.5 Boolean attribute values....98

3.5 Quiz....99

3.6 Summary....100

3.7 Quiz answers....100

Chapter 4: Making React interactive with states....101

4.1 What are React component states?....103

4.2 Working with states....104

4.2.1 Accessing states....104

4.2.2 Setting the initial state....106

4.2.3 Updating states....108

4.3 States and properties....112

4.4 Stateless components....113

4.5 Stateful vs. stateless components....115

4.6 Quiz....120

4.7 Summary....121

4.8 Quiz answers....121

Chapter 5: React component lifecycle events....122

5.1 A bird’s-eye view of React component lifecycle events....123

5.2 Categories of events....123

5.3 Implementing an event....127

5.4 Executing all events together....129

5.5 Mounting events....131

5.5.1 componentWillMount()....131

5.5.2 componentDidMount()....132

5.6 Updating events....135

5.6.1 componentWillReceiveProps(newProps)....136

5.6.2 shouldComponentUpdate()....136

5.6.3 componentWillUpdate()....137

5.6.4 componentDidUpdate()....137

5.7 Unmounting event....137

5.7.1 componentWillUnmount()....137

5.8 A simple example....138

5.9 Quiz....142

5.10 Summary....142

5.11 Quiz answers....142

Chapter 6: Handling events in React....143

6.1 Working with DOM events in React....144

6.1.1 Capture and bubbling phases....146

6.1.2 React events under the hood....149

6.1.3 Working with the React SyntheticEvent event object....152

6.1.4 Using events and state....156

6.1.5 Passing event handlers as properties....158

6.1.6 Exchanging data between components....161

6.2 Responding to DOM events not supported by React....163

6.3 Integrating React with other libraries: jQuery UI events....166

6.3.1 Integrating buttons....167

6.3.2 Integrating labels....168

6.4 Quiz....170

6.5 Summary....170

6.6 Quiz answers....171

Chapter 7: Working with forms in React....172

7.1 The recommended way to work with forms in React....173

7.1.1 Defining a form and its events in React....175

7.1.2 Defining form elements....177

7.1.3 Capturing form changes....183

7.1.4 Account field example....185

7.2 Alternative ways to work with forms....187

7.2.1 Uncontrolled elements with change capturing....188

7.2.2 Uncontrolled elements without capturing changes....190

7.2.3 Using references to access values....191

7.2.4 Default values....193

7.3 Quiz....194

7.4 Summary....195

7.5 Quiz answers....195

Chapter 8: Scaling React components....196

8.1 Default properties in components....197

8.2 React property types and validation....199

8.3 Rendering children....206

8.4 Creating React higher-order components for code reuse....209

8.4.1 Using displayName: distinguishing child components from their parent....211

8.4.2 Using the spread operator: passing all of your attributes....213

8.4.3 Using higher-order components....213

8.5 Best practices: presentational vs. container components....216

8.6 Quiz....217

8.7 Summary....217

8.8 Quiz answers....217

Chapter 9: Project: Menu component....218

9.1 Project structure and scaffolding....219

9.2 Building the menu without JSX....220

9.2.1 The Menu component....221

9.2.2 The Link component....224

9.2.3 Getting it running....226

9.3 Building the menu in JSX....227

9.3.1 Refactoring the Menu component....229

9.3.2 Refactoring the Link component....230

9.3.3 Running the JSX project....231

9.4 Homework....232

9.5 Summary....232

Chapter 10: Project: Tooltip component....233

10.1 Project structure and scaffolding....234

10.2 The Tooltip component....236

10.2.1 The toggle() function....237

10.2.2 The render() function....238

10.3 Getting it running....240

10.4 Homework....241

10.5 Summary....241

Chapter 11: Project: Timer component....242

11.1 Project structure and scaffolding....243

11.2 App architecture....245

11.3 The TimerWrapper component....247

11.4 The Timer component....251

11.5 The Button component....252

11.6 Getting it running....254

11.7 Homework....255

11.8 Summary....255

Part 2: React architecture....257

Chapter 12: The Webpack build tool....259

12.1 What does Webpack do?....260

12.2 Adding Webpack to a project....261

12.2.1 Installing Webpack and its dependencies....263

12.2.2 Configuring Webpack....265

12.3 Modularizing your code....266

12.4 Running Webpack and testing the build....268

12.5 Hot module replacement....271

12.5.1 Configuring HMR....272

12.5.2 Hot module replacement in action....275

12.6 Quiz....277

12.7 Summary....277

12.8 Quiz answers....277

Chapter 13: React routing....278

13.1 Implementing a router from scratch....279

13.1.1 Setting up the project....280

13.1.2 Creating the route mapping in app.jsx....282

13.1.3 Creating the Router component in router.jsx....282

13.2 React Router....284

13.2.1 React Router’s JSX style....288

13.2.2 Hash history....289

13.2.3 Browser history....290

13.2.4 React Router development setup with Webpack....291

13.2.5 Creating a layout component....294

13.3 React Router features....297

13.3.1 Accessing router with the withRouter higher-order component....297

13.3.2 Navigating programmatically....298

13.3.3 URL parameters and other route data....299

13.3.4 Passing properties in React Router....300

13.4 Routing with Backbone....301

13.5 Quiz....304

13.6 Summary....305

13.7 Quiz answers....305

Chapter 14: Working with data using Redux....306

14.1 React support for unidirectional data flow....307

14.2 Understanding the Flux data architecture....310

14.3 Using the Redux data library....311

14.3.1 Redux Netflix clone....313

14.3.2 Dependencies and configs....315

14.3.3 Enabling Redux....318

14.3.4 Routes....319

14.3.5 Combining reducers....321

14.3.6 Reducer for movies....322

14.3.7 Actions....324

14.3.8 Action creators....325

14.3.9 Connecting components to the store....326

14.3.10 Dispatching an action....329

14.3.11 Passing action creators into component properties....330

14.3.12 Running the Netflix clone....335

14.3.13 Redux wrap-up....335

14.4 Quiz....336

14.5 Summary....336

14.6 Quiz answers....336

Chapter 15: Working with data using GraphQL....337

15.1 GraphQL....338

15.2 Adding a server to the Netflix clone....340

15.2.1 Installing GraphQL on a server....342

15.2.2 Data structure....345

15.2.3 GraphQL schema....346

15.2.4 Querying the API and saving the response into the store....348

15.2.5 Showing the list of movies....353

15.2.6 GraphQL wrap-up....355

15.3 Quiz....355

15.4 Summary....356

15.5 Quiz answers....356

Chapter 16: Unit testing React with Jest....357

16.1 Types of testing....358

16.2 Why Jest (vs. Mocha or others)?....359

16.3 Unit testing with Jest....361

16.3.1 Writing unit tests in Jest....362

16.3.2 Jest assertions....364

16.4 UI testing React with Jest and TestUtils....365

16.4.1 Finding elements with TestUtils....368

16.4.2 UI-testing the password widget....369

16.4.3 Shallow rendering....374

16.5 TestUtils wrap-up....375

16.6 Quiz....376

16.7 Summary....376

16.8 Quiz answers....376

Chapter 17: React on Node and Universal JavaScript....377

17.1 Why React on the server? And what is Universal JavaScript?....378

17.1.1 Proper page indexing....378

17.1.2 Better performance with faster loading times....380

17.1.3 Better code maintainability....380

17.1.4 Universal JavaScript with React and Node....380

17.2 React on Node....383

17.3 React and Express: rendering on the server side from components....386

17.3.1 Rendering simple text on the server side....386

17.3.2 Rendering an HTML page....387

17.4 Universal JavaScript with Express and React....395

17.4.1 Project structure and configuration....397

17.4.2 Setting up the server....398

17.4.3 Server-side layout templates with Handlebars....403

17.4.4 Composing React components on the server....405

17.4.5 Client-side React code....407

17.4.6 Setting up Webpack....408

17.4.7 Running the app....410

17.5 Quiz....414

17.6 Summary....415

17.7 Quiz answers....415

Chapter 18: Project: Building a bookstore with React Router....416

18.1 Project structure and Webpack configuration....419

18.2 The host HTML file....422

18.3 Creating components....423

18.3.1 Main file: app.jsx....423

18.3.2 The Cart component....430

18.3.3 The Checkout component....432

18.3.4 The Modal component....433

18.3.5 The Product component....435

18.4 Launching the project....436

18.5 Homework....436

18.6 Summary....437

Chapter 19: Project: Checking passwords with Jest....438

19.1 Project structure and Webpack configuration....440

19.2 The host HTML file....443

19.3 Implementing a strong password module....444

19.3.1 The tests....444

19.3.2 The code....445

19.4 Implementing the Password component....447

19.4.1 The tests....447

19.4.2 The code....448

19.5 Putting it into action....454

19.6 Homework....456

19.7 Summary....456

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

20.1 Project structure and Webpack configuration....460

20.2 Implementing the web server....464

20.2.1 Defining the RESTful APIs....465

20.2.2 Rendering React on the server....466

20.3 Adding the browser script....467

20.4 Creating the server template....467

20.5 Implementing the Autocomplete component....468

20.5.1 The tests for Autocomplete....468

20.5.2 The code for the Autocomplete component....470

20.6 Putting it all together....473

20.7 Homework....476

20.8 Summary....477

Appendix A: Installing applications used in this book....479

Installing React....479

Installing Node.js....480

Installing Express....481

Installing Bootstrap....482

Installing Browserify....483

Installing MongoDB....483

Using Babel to compile JSX and ES6....485

Node.js and ES6....486

Standalone browser Babel....486

Appendix B: React cheatsheet....487

Installation....488

React....488

React DOM....488

Rendering....488

ES5....488

ES5+JSX....488

Server-side rendering....488

Components....488

ES5....488

ES5 + JSX....489

ES6 + JSX....489

Advanced components....489

Options (ES5)....489

ES5....489

ES5 + JSX....489

ES6 + JSX....490

Lifecycle events....490

Sequence of lifecycle events (inspired by http://react.tips)....491

Special properties....492

propTypes....492

Custom validation....492

Component properties and methods....493

Properties....493

Methods....493

React add-ons....493

React components....493

Appendix C: Express.js cheatsheet....495

Installing Express.js....496

Generator....496

Usage....496

Options....496

Basics....496

HTTP verbs and routes....496

Requests....497

Request-header shortcuts....497

Response....497

Handler signatures....498

Stylus and Jade....498

Body....498

Static....498

Connect middleware....498

Other popular middleware....499

Resources....499

Appendix D: MongoDB and Mongoose cheatsheet....500

MongoDB....501

MongoDB console....501

Installing Mongoose....501

Mongoose basic usage....501

Mongoose schema....502

Create, read, update, delete (CRUD) Mongoose example....502

Mongoose model methods....502

Mongoose document methods....503

Appendix E: ES6 for success....504

Default parameters....504

Template literals....505

Multiline strings....506

Destructuring assignment....506

Enhanced object literals....507

Arrow functions....509

Promises....511

Block-scoped constructs: let and const....512

Classes....513

Modules....515

Using ES6 today with Babel....516

Other ES6 features....516

index....517

Symbols....517

A....517

B....517

C....518

D....519

E....520

F....521

G....521

H....521

I....522

J....522

K....522

L....522

M....523

N....523

O....523

P....524

Q....524

R....524

S....526

T....526

U....527

V....527

W....528

X....528

Z....528

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.