React by Stefanov, Stoyan -- Read -- Imperial Library of Trantor

Index

Preface

About This Book Conventions Used in This Book Using Code Examples Safari® Books Online How to Contact Us Acknowledgments

1. Hello World

Setup Hello React World What Just Happened? React.DOM.* Special DOM Attributes React DevTools Browser Extension Next: Custom Components

2. The Life of a Component

Bare Minimum Properties propTypes

Default Property Values

State A Stateful Textarea Component A Note on DOM Events

Event Handling in the Olden Days Event Handling in React

Props Versus State Props in Initial State: An Anti-Pattern Accessing the Component from the Outside Changing Properties Mid-Flight Lifecycle Methods Lifecycle Example: Log It All Lifecycle Example: Use a Mixin Lifecycle Example: Using a Child Component Performance Win: Prevent Component Updates PureRenderMixin

3. Excel: A Fancy Table Component

Data First Table Headers Loop Debugging the Console Warning Adding <td> Content

How Can You Improve the Component?

Sorting

How Can You Improve the Component?

Sorting UI Cues Editing Data

Editable Cell Input Field Cell Saving Conclusion and Virtual DOM Diffs

State and UI Filtering Content How Can You Improve the Search?

Instant Replay

How Can You Improve the Replay? An Alternative Implementation?

Download the Table Data

4. JSX

Hello JSX Transpiling JSX Babel Client Side About the JSX transformation JavaScript in JSX Whitespace in JSX Comments in JSX HTML Entities

Anti-XSS

Spread Attributes

Parent-to-Child Spread Attributes

Returning Multiple Nodes in JSX JSX Versus HTML Differences

No class, What for? style Is an Object Closing Tags camelCase Attributes

JSX and Forms

onChange Handler value Versus defaultValue <textarea> Value <select> Value

Excel Component in JSX

5. Setting Up for App Development

A Boilerplate App

Files and Folders index.html CSS JavaScript JavaScript: Modernized

Modules ECMAScript modules Classes All together

Installing Prerequisites

Node.js Browserify Babel React, etc.

Let’s Build

Transpile JavaScript Package JavaScript Package CSS Results! Windows Version Building During Development

Deployment Moving On

6. Building an App

Whinepad v.0.0.1

Setup Start Coding

The Components

Setup Discover <Button> Component Button.css Button.js

classnames package Destructuring assignment Stateless functional component propTypes

Forms <Suggest>

ref

<Rating> Component A <FormInput> “Factory” <Form> <Actions> Dialogs

App Config <Excel>: New and Improved <Whinepad> Wrapping It All Up

7. Lint, Flow, Test, Repeat

package.json

Configure Babel scripts

ESLint

Setup Running All the Rules

Flow

Setup Running Signing Up for Typechecking Fixing <Button> app.js More on Typechecking props and state Export/Import Types Typecasting Invariants

Testing

Setup First Test First React Test Testing the <Button> Component

First spec Second spec

Testing <Actions>

A component wrapper Mock functions find and scry

More Simulated Interactions Testing Complete Interactions Coverage

8. Flux

The Big Idea Another Look at Whinepad The Store

Store Events Using the Store in <Whinepad> Using the Store in <Excel> Using the Store in <Form> Drawing the Line

Actions

CRUD Actions Searching and Sorting Using the Actions in <Whinepad> Using the Actions in <Excel>

Flux Recap Immutable

Immutable Store Data Immutable Data Manipulation

Index

← Prev
Back
Next →

← Prev
Back
Next →