React in Action

by Mark Tielens Thomas

Overview

Summary
React in Action introduces front-end developers to the React framework and related tools. This clearly written, example-rich book begins by introducing you to React, diving into some of the fundamental ideas in React, and working with components. In the second section, you'll explore the different ways that data works in React as well as learning more about components. You'll also find several useful appendixes covering related topics like React tooling and the React ecosystem.

Purchase of the print book includes a free eBook in PDF, Kindle, and ePub formats from Manning Publications.

About the Technology
Facebook created React to help deliver amazing user experiences on a website with thousands of components and an incomprehensible amount of traffic. The same powerful tools are available to you too! The key is a clever design for managing state, data flow, and rendering, so your application is easy to think about and runs smoothly. Add an incredibly rich ecosystem of components and libraries, and you've got a recipe for building web apps that will delight both developers and users.

About the Book
React in Action teaches you to think like a pro about user interfaces and building them with React. This practical book gets you up and running quickly with hands-on examples in every chapter. You'll master core topics like rendering, lifecycle methods, JSX, data flow, forms, routing, integrating with third-party libraries, and testing. And the included application design ideas will help make your apps pop. As you learn to integrate React into full-stack applications, you'll explore state management with Redux and server-side rendering, and even dabble in React Native for mobile UIs.

What's Inside

• React from the ground up
• Implementing a routing system with components
• Server-side rendering in Node.js
• Working with third-party libraries
• Testing React components

About the Reader
Written for developers familiar with HTML, CSS, and JavaScript.

About the Author
Mark Thomas is an experienced software engineer who works daily with React, JavaScript, and Node.js. He loves clean code, beautiful systems, and good coffee.

Table of Contents
PART 1 - MEET REACT

1. Meet React
2. Our first component

PART 2 - COMPONENTS AND DATA IN REACT

1. Data and data flow in React
2. Rendering and lifecycle methods in React
3. Working with forms in React
4. Integrating third-party libraries with React
5. Routing in React
6. More routing and integrating Firebase
7. Testing React components

PART 3 - REACT APPLICATION ARCHITECTURE

1. Redux application architecture
2. More Redux and integrating Redux with React
3. React on the server and integrating React Router
4. An introduction to React Native

Product Details

ISBN-13:	9781617293856
Publisher:	Manning
Publication date:	07/08/2018
Edition description:	1st Edition
Pages:	360
Product dimensions:	7.30(w) x 9.10(h) x 0.90(d)

About the Author

Mark Thomas is a full-stack web developer working mainly in JavaScript and Node.js. He loves clean code, fast APIs, and good coffee.

Table of Contents

Preface xv

Acknowledgments xvii

About this book xix

About the author xxii

About the cover illustration xxiii

Part 1 Meet React 1

1 Meet React 3

1.1 Meet React 4

Who this book is for 6

A note on tooling 7

Who uses React? 7

1.2 What does React not do? 9

Tradeoffs of React 10

1.3 The virtual DOM 12

The DOM 13

The virtual DOM 15

Updates and diffing 16

Virtual DOM: Need for speed? 17

1.4 Components: The fundamental unit of React 17

Components in general 17

Components in React: Encapsulated and reusable 18

1.5 React for teams 19

2 <Hello World />: our first component 22

2.1 Introducing React components 24

Understanding the application data 26

Multiple components: Composition and parent-child relationships 28

Establishing component relationships 28

2.2 Creating components in React 31

Creating React elements 31

Rendering your first component 34

Creating React components 36

Creating React classes 37

The render method 37

Property validation via PropTypes 38

2.3 The life and times of a component 42

A React state of mind 43

Setting initial stale 44

2.4 Meet JSX 52

Creating components using JSX 53

Benefits of JSX and differences from HTML 55

Part 2 Components and Data in React 57

3 Data and data flow in React 59

3.1 Introducing state 60

What is state? 60

Mutable and immutable state 63

3.2 State in React 65

Mutable state in React: Component state 65

Immutable state in React: Props 69

Working with props: PropTypes and default props 70

Stateless functional components 71

3.3 Component communication 73

3.4 One-way data flow 74

4 Rendering and lifecycle methods in React 77

4.1 Getting set up with the Letters Social repo 78

Getting the source code 80

Winch version of node should I use? 80

Note on tooling and CSS 81

Deploying 81

The API server and database 81

Running the app 82

4.2 The render process and lifecycle methods 82

Introducing lifecycle methods 82

Types of lifecycle methods 84

Initial and "will" methods 88

Mounting components 89

Updating methods 93

Unmounting methods 96

Catching errors 98

4.3 Starting to create Letters Social 102

5 Working with forms in React 111

5.1 Creating posts in Letters Social 112

Data requirements 112

Component overview and hierarchy 113

5.2 Forms in React 115

Getting started with forms 115

Form elements and events 116

Updating stale in forms 120

Controlled and uncontrolled components 121

Form validation and samtization 123

5.3 Creating new posts 126

6 Integrating third-party libraries with React 129

6.1 Sending posts to the Letters Social API 130

6.2 Enhancing your component with maps 132

Creating the DisplayMap component using refs 133

Creating the LocationTypeAhead component 139

Updating CreatePost and adding maps to posts 145

7 Routing in React 151

7.1 What is routing? 152

Routing in modern front-end web applications 153

7.2 Creating a router 154

Component routing 155

Creating the <Route /> component 156

Starling to build the <Router/> component 157

Matching URL paths and parameterized routing 160

Adding routes to the Router component 162

8 More routing and integrating Firebase 170

8.1 Using the router 171

Creating a page for a post 177

Creating a <Link/> component 178

Creating a <NotFound/> component 182

8.2 Integrating Firebase 183

Ensuring a user is logged in 187

9 Testing React components 192

9.1 Types of testing 194

Why test? 195

9.2 Testing React components with jest, Enzyme, and React-test-renderer 197

9.3 Writing your first tests 199

Getting started with Jest 199

Testing a stateless functional component 201

Testing the CreatePost component without Enzyme 205

Test coverage 213

Part 3 React Application Architecture 219

10 Redux application architecture 221

10.1 The Flux application architecture 223

Meet Redux: A variation on Flux 226

Getting set up for Redux 227

10.2 Creating actions in Redux 229

Defining action types 230

Creating actions in Redux 232

Creating the Redux store and dispatching actions 232

Asynchronous actions and middleware 235

To Redux or not to Redux? 242

Testing actions 245

Creating custom Redux middleware for crash reporting 247

11 More Redux and integrating Redux with React 251

11.1 Reducers determine how state should change 252

State shape and initial state 253

Setting up reducers to respond to incoming action 254

Combining reducers together in our store 261

Testing reducers 262

11.2 Bringing React and Redux together 264

Containers vs. presentational components 264

Using <Provider /> to connect components to the Redux store 267

Binding actions to component event handlers 272

Updating your tests 274

12 React on the server and integrating React Router 277

12.1 What is server-side rendering? 278

Digging into server-side rendering 280

12.2 Why render on the server? 282

12.3 You might not need SSR 285

12.4 Rendering components on the server 286

12.5 Switching to React Router 292

Setting up React router 293

12.6 Handling authenticated routes with React router 297

12.7 Server rendering with data-fetching 301

13 An introduction to React Native 313

13.1 Introducing React Native 314

13.2 React and React Native 317

13.3 When to use React Native 319

13.4 The simplest "Hello World" 321

13.5 Where to go next 324

Index 327