React Design Patterns and Best Practices电子书

React Design Patterns and Best Practices

React Design Patterns and Best Practices

Credits

About the Author

About the Reviewer

www.PacktPub.com

Why subscribe?

Customer Feedback

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Errata

Piracy

Questions

1. Everything You Should Know About React

Declarative programming

React elements

Unlearning everything

Common misconceptions

Summary

2. Clean Up Your Code

JSX

Babel

Hello, World!

DOM elements and React components

Props

Children

Differences with HTML

Attributes

Style

Root

Spaces

Boolean attributes

Spread attributes

JavaScript templating

Common patterns

Multi-line

Multi-properties

Conditionals

Loops

Control statements

Sub-rendering

ESLint

Installation

Configuration

React plugin

Airbnb configuration

The basics of functional programming

First-class objects

Purity

Immutability

Currying

Composition

FP and user interfaces

Summary

3. Create Truly Reusable Components

Creating classes

The createClass factory

Extending React.Component

The main differences

Props

State

Autobinding

Stateless functional components

Props and context

The this keyword

State

Lifecycle

Refs and event handlers

No reference to component

Optimization

The state

External libraries

How it works

Asynchronous

React lumberjack

Using the state

Derivables

The render method

Prop types

React Docgen

Reusable components

Living style guides

Summary

4. Compose All the Things

Communication between components

Children

Container and Presentational pattern

Mixins

Higher-order Components

Recompose

Context

Function as Child

Summary

5. Proper Data Fetching

Data flow

Child-parent communication (callbacks)

Common parent

Data fetching

React-refetch

Summary

6. Write Code for the Browser

Forms

Uncontrolled components

Controlled components

JSON schema

Events

Refs

Animations

React motion

Scalable Vector Graphics

Summary

7. Make Your Components Look Beautiful

CSS in JS

Inline styles

Radium

CSS Modules

Webpack

Setting up a project

Locally scoped CSS

Atomic CSS Modules

React CSS Modules

Styled Components

Summary

8. Server-Side Rendering for Fun and Profit

Universal applications

Reasons to implement Server-Side Rendering

SEO

A common code base

Better performance

Don't underestimate the complexity

A basic example

A data fetching example

Next.js

Summary

9. Improve the Performance of Your Applications

Reconciliation and keys

Optimization techniques

Should component update

Stateless functional components

Common solutions

Why did you update?

Creating functions inside the render method

Constants props

Refactoring and good design

Tools and libraries

Immutability

Monitoring tools

Babel plugins

Summary

10. About Testing and Debugging

The benefits of testing

Painless JavaScript testing with Jest

Mocha is a flexible testing framework

JavaScript testing utilities for React

A real-world testing example

React tree Snapshot Testing

Code coverage tools

Common testing solutions

Testing Higher-Order Components

The Page Object pattern

React Dev Tools

Error handling with React

Summary

11. Anti-Patterns to Be Avoided

Initializing the state using props

Mutating the state

Using indexes as a key

Spreading props on DOM elements

Summary

12. Next Steps

Contributing to React

Distributing your code

Publishing a npm package

Summary