[PDF] Learning React: Functional Web Development with React and Redux

View - Download Learning React: Functional Web Development with React and Redux

Previous PDF

Next PDF

Alex Banks and Eve Porcello

Learning React

Functional Web Development

with React and Redux

978-1-491-95462-1

[LSI]Learning React by Alex Banks and Eve Porcello Copyright © 2017 Alex Banks and Eve Porcello. All rights reserved.

Printed in the United States of America.

Published by O'Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472.

O'Reilly books may be purchased for educational, business, or sales promotional use. Online editions are

also available for most titles (http://oreilly.com/safari). For more information, contact our corporate/insti-

tutional sales department: 800-998-9938 or corporate@oreilly.com.Editor: Allyson MacDonald

Production Editor: Melanie Yarbrough

Copyeditor: Colleen Toporek

Proofreader: Rachel HeadIndexer: WordCo Indexing Services

Interior Designer: David Futato

Cover Designer: Karen Montgomery

Illustrator: Rebecca DemarestMay 2017:

First Edition

Revision History for the First Edition

2017-04-26: First Release

See http://oreilly.com/catalog/errata.csp?isbn=9781491954621 for release details.

The O'Reilly logo is a registered trademark of O'Reilly Media, Inc. Learning React, the cover image, and

related trade dress are trademarks of O'Reilly Media, Inc. While the publisher and the authors have used good faith efforts to ensure that the information and

instructions contained in this work are accurate, the publisher and the authors disclaim all responsibility

for errors or omissions, including without limitation responsibility for damages resulting from the use of

or reliance on this work. Use of the information and instructions contained in this work is at your own

risk. If any code samples or other technology this work contains or describes is subject to open source

licenses or the intellectual property rights of others, it is your responsibility to ensure that your use

thereof complies with such licenses and ghts.

Table of Contents

Preface. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . ix 1.

Welcome to React. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . 1

Obstacles and Roadblocks 1

React Is a Library 2

New ECMAScript Syntax 2

Popularity of Functional JavaScript 2

JavaScript Tooling Fatigue 2

Why React Doesn't Have to Be Hard to Learn 3

React's Future 3

Keeping Up with the Changes 4

Working with the Files 4

File Repository 4

React Developer Tools 5

Installing Node.js 6

2.

Emerging JavaScript. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . 9

Declaring Variables in ES6 10

const 10 let 10

Template Strings 12

Default Parameters 13

Arrow Functions 14

Transpiling ES6 17

ES6 Objects and Arrays 19

Destructuring Assignment 19

Object Literal Enhancement 20

The Spread Operator 22

iii

Promises

24

Classes

25

ES6 Modules 27

CommonJS 283.

Functional Programming with JavaScript. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

What It Means to Be Functional 32

Imperative Versus Declarative 34

Functional Concepts 36

Immutability 36

Pure Functions 38

Data Transformations 41

Higher-Order Functions 48

Recursion 49

Composition 52

Putting It All Together 54

4.

Pure React. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . 59

Page Setup

59

The Virtual DOM 60

React Elements 62

ReactDOM 64

Children

65

Constructing Elements with Data 67

React Components 68

React.createClass 69

React.Component 72

Stateless Functional Components 73

DOM Rendering 74

Factories

77
5.

React with JSX. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . 81

React Elements as JSX 81

JSX Tips 82

Babel 84

Recipes as JSX

85

Intro to Webpack 93

Webpack Loaders 94

Recipes App with a Webpack Build 94

6.

Props, State, and the Component Tree. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109

Property Validation 109

iv | Table of Contents

Validating Props with createClass 110

Default Props 114

Custom Property Validation 115

ES6 Classes and Stateless Functional Components 116 Refs 119

Inverse Data Flow 121

Refs in Stateless Functional Components 123

React State Management 123

Introducing Component State 124

Initializing State from Properties 128

State Within the Component Tree 130

Color Organizer App Overview 130

Passing Properties Down the Component Tree 131

Passing Data Back Up the Component Tree 1347.

Enhancing Components. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141

Component Lifecycles 141

Mounting Lifecycle 142

Updating Lifecycle 146

React.Children 157

JavaScript Library Integration 158

Making Requests with Fetch 159

Incorporating a D3 Timeline 160

Higher-Order Components 166

Managing State Outside of React 172

Rendering a Clock 173

Flux 174

Views 176

Actions and Action Creators 177

Dispatcher 177

Stores

178

Putting It All Together 179

Flux Implementations 180

8.

Redux. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . 183 State 184

Actions

187

Action Payload Data 189

Reducers

190

The Color Reducer 193

The Colors Reducer 195

The Sort Reducer 197

Table of Contents | v

The Store

198

Subscribing to Stores 201

Saving to localStorage 202

Action Creators 203

Middleware 206

Applying Middleware to the Store 2079.

React Redux. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . 211

Explicitly Passing the Store 213

Passing the Store via Context 216

Presentational Versus Container Components 220

The React Redux Provider 223

React Redux connect 224

10.

Testing. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . 229

ESLint 229

Testing Redux 233

Test-Driven Development 233

Testing Reducers 234

Testing the Store 242

Testing React Components 245

Setting Up the Jest Environment 245

Enzyme 247

Mocking Components 249

Snapshot Testing 258

Using Code Coverage 262

11.

React Router. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . 273

Incorporating the Router 274

Router Properties 277

Nesting Routes 279

Using a Page Template 279

Subsections and Submenus 281

Router Parameters 286

Adding Color Details Page 286

Moving Color Sort State to Router 292

12.

React and the Server. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. 297

Isomorphism versus Universalism 297

Server Rendering React 301

Universal Color Organizer 306

Universal Redux 308

vi | Table of Contents

Universal Routing 310

Communicating with the Server 318

Completing Actions on the Server 318

Actions with Redux Thunks 321

Index. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . 329Table of Contents | vii

Preface

This book is for developers who want to learn the React library while learning the latest techniques currently emerging in the JavaScript language. This is an exciting time to be a JavaScript developer. The ecosystem is exploding with new tools, syntax, and best practices that promise to solve many of our development problems. Our aim with this book is to organize these techniques, so you can get to work with React right away. We'll get into Redux, React Router, and build tooling, so we promise not to introduce only the basics and then throw you to the wolves. This book does not assume any knowledge of React at all. We'll introduce all of React's basics from scratch. Similarly, we won't assume that you've worked with ES6 or any of the latest JavaScript syntax. This will be introduced in Chapter 2 as founda- tion for the rest of the chapters. You'll be better prepared for the contents of the book if you're comfortable with HTML, CSS, and JavaScript. It's almost always best to be comfortable with these big three before diving into a JavaScript library. Along the way, check out the GitHub repository. All of the examples are there and will allow you to practice with hands-on examples.

Conventions Used in This Book

The following typographical conventions are used in this book:

Italic

Indicates new terms, URLs, email addresses, filenames, and file extensions.

Constant width

Used for program listings, as well as within paragraphs to refer to program ele- ments such as variable or function names, databases, data types, environment variables, statements, and keywords. ix

Constant width bold

Shows commands or other text that should be typed literally by the user.

Constant width italic

Shows text that should be replaced with user-supplied values or by values deter- mined by context.

This element signifies a tip or suggestion.

This element signifies a general note.

This element indicates a warning or caution.

Using Code Examples

Supplemental material (code examples, exercises, etc.) is available for download at This book is here to help you get your job done. In general, if example code is offered with this book, you may use it in your programs and documentation. You do not need to contact us for permission unless you're reproducing a significant portion of the code. For example, writing a program that uses several chunks of code from this book does not require permission. Selling or distributing a CD-ROM of examples from O'Reilly books does require permission. Answering a question by citing this book and quoting example code does not require permission. Incorporating a signifi- cant amount of example code from this book into your product's documentation does require permission. We appreciate, but do not require, attribution. An attribution usually includes the title, author, publisher, and ISBN. For example: "Learning React by Alex Banks and Eve Porcello (O'Reilly). Copyright 2017 Alex Banks, Eve Porcello,

978-1-491-95462-1."x | Preface

If you feel your use of code examples falls outside fair use or the permission given above, feel free to contact us at permissions@oreilly.com.

O'Reilly Safari

Safari (formerly Safari Books Online) is a membership-based training and reference platform for enterprise, government, educators, and individuals. Members have access to thousands of books, training videos, Learning Paths, interac- tive tutorials, and curated playlists from over 250 publishers, including O'Reilly Media, Harvard Business Review, Prentice Hall Professional, Addison-Wesley Profes- sional, Microsoft Press, Sams, Que, Peachpit Press, Adobe, Focal Press, Cisco Press, John Wiley & Sons, Syngress, Morgan Kaufmann, IBM Redbooks, Packt, Adobe Press, FT Press, Apress, Manning, New Riders, McGraw-Hill, Jones & Bartlett, andquotesdbs_dbs17.pdfusesText_23

[PDF] learning react: functional web development with react and redux

[PDF] learning ros for robotics programming pdf

[PDF] learning specialist job description

[PDF] learning techniques

[PDF] learning techniques for adults

[PDF] learning theories and their application to classroom pdf

[PDF] learning theories and their application to classroom ppt

[PDF] learning theories pdf

[PDF] learning welsh

[PDF] learning react 2nd edition github

[PDF] lease of a dwelling québec

[PDF] leased departments examples

[PDF] leasing land to cell phone companies

[PDF] leather industry

[PDF] lebanese civil code