React Design Patterns and Best Practices电子书

Contributors

About the author

About the reviewer

Packt is searching for authors like you

Preface

Who this book is for

What this book covers

To get the most out of this book

Download the example code files

Download the color images

Conventions used

Get in touch

Reviews

Section 1: Hello React!

Taking Your First Steps with React

Declarative programming

React elements

Unlearning everything

Common misconceptions

Summary

Clean Up Your Code

JSX

Babel 7

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

Code style

EditorConfig

Configuring EditorConfig

ESLint

Installation

Configuration

Git hooks

React plugin

Airbnb React/JSX style guide

The basics of functional programming

First-class objects

Purity

Immutability

Currying

Composition

FP and user interfaces

Summary

Section 2: How React works

Creating Truly Reusable Components

Creating classes

The createClass factory

Extending React.Component

The main differences

Props

State

Autobinding

Stateless components

Props and context

The this keyword

State

Life cycle

Refs and event handlers

Optimization

Layout components

The state

External libraries

How it works

Asynchronous

Using the state

Derivables

The render method

React hooks

Prop types

React Docgen

Reusable components

Fragments

Summary

Compose All the Things

Communication between components

Children

The container and presentational pattern

Mixins

Higher order components

Recompose

Context

FunctionAsChild

Summary

Proper Data Fetching

Data flow

Child-parent communication (callbacks)

Common parent

Data fetching

React-refetch

Context API

Summary

Write Code for the Browser

Forms

Uncontrolled components

Controlled components

JSON schema

Handling events

Refs

Animations

React motion

Scalable Vector Graphics

Summary

Section 3: Performance, Improvements and Production!

Make Your Components Look Beautiful

CSS in JavaScript

Inline styles

Radium

CSS modules

Webpack 4

Setting up a project

Locally scoped CSS

Atomic CSS modules

React CSS modules

Styled components

Summary

Server-Side Rendering for Fun and Profit

Universal applications

Reasons to implement SSR

SEO

A common code base

Better performance

Don't underestimate the complexity

A basic example

A data fetching example

Next.js

Summary

Improve the Performance of Your Applications

Reconciliation

Keys

Optimization techniques

shouldComponentUpdate

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

Babel plugins

Summary

About Testing and Debugging

The benefits of testing

Painless JavaScript testing with Jest

Testing events

React DevTools

Redux DevTools

Summary

React Router

Installation and configuration

Creating our sections

Adding parameters to the routes

Summary

Anti-Patterns to be Avoided

Initializing the state using properties

Mutating the state

Using indexes as a key

Spreading properties on DOM elements

Summary

Deploying to Production

Creating our first Digital Ocean Droplet

Signing up to Digital Ocean

Creating our first Droplet

Installing Node.js

Configuring Git and GitHub

Turning off our droplet

Configuring nginx, PM2, and a domain

Installing and configuring nginx

Setting up a reverse proxy server

Adding a domain to our droplet

Implementing CircleCI for continuous integration

Adding an SSH key to CircleCI

Configuring CircleCI

Creating ENV variables in CircleCI

Summary

Next Steps

Contributing to React

Distributing your code

Publishing an npm package

Summary

Other Books You May Enjoy

Leave a review - let other readers know what you think