React 16 Tooling

图书信息

作者	Adam Boduch
出版社	Packt Publishing
ISBN	9781788832083
出版时间	2018-04-30
字数	28.7万
分类	进口书,外文原版书,电脑,网络

读书简介

React 16 Tooling covers the most important tools, utilities, and libraries that every React developer needs to know - in detail. About This Book ? Each chapter presents meta-development solutions to help React developers ? The tools used are presented in a practical, solution-oriented approach with no fluff ? The chapters are arranged in a logical order that mirrors a typical React development workflow, but you are free to tweak the approaches discussed to fit your own unique style Who This Book Is For This book is for React developers of any skill level who want to make their lives easier. It helps to have some familiarity with React, but if you are an experienced web developer looking at React, then this book will show you how to build a resilient toolset around you before you begin. What You Will Learn ? Bootstrap a React application using create-react-app ? Isolate React component development using Storybook ? Write effective unit tests for your React components using Jest ? Ensure that your component code is to standard using ESLint ? Use browser extensions and built-in component instrumentation to debug React applications ? Enable type safety in React components with Flowtype ? Deploy React applications inside a Docker container as part of a larger application stack In Detail React 16 Tooling covers the most important tools, utilities, and libraries that every React developer needs to know - in detail. As React has grown, the amazing toolset around it has also grown, adding features and enhancing the development workflow. Each of these essential tools is presented in a practical manner and in a logical order mirroring the development workflow. These tools will make your development life simpler and happier, enabling you to create better and more performant apps. Adam starts with a hand-picked selection of the best tools for the React 16 ecosystem. For starters, there's the create-react-app utility that's officially supported by the React team. Not only does this tool bootstrap your React project for you, it also provides a consistent and stable framework to build upon. The premise is that when you don't have to think about meta development work, more focus goes into the product itself. Other React tools follow this same approach to automating and improving your development life. Jest makes unit testing quicker. Flow makes catching errors easier. Docker containers make deployment in a stack simpler. Storybook makes developing components straightforward. ESLint makes writing standardized code faster. The React DevTools plugin makes debugging a cinch. React 16 Tooling clears away the barriers so you can focus on developing the good parts. In this book, we'll look at each of these powerful tools in detail, showing you how to build the perfect React ecosystem to develop your apps within. Style and approach This book covers React tools that help developers with the most relevant challenges they face today. Each chapter begins by defining the challenge faced by developers and why the tool is required, then shows how to fix the problem using React tooling.

目录

Title Page

Copyright and Credits

React 16 Tooling

Packt Upsell

Why subscribe?

PacktPub.com

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

Creating a Personalized React Development Ecosystem

What's included with React

Components that compare render trees

The DOM render target

Introducing tooling?

Ancillary tasks outside of React

A construction site analogy

React tooling covered in this book

JSX needs to be compiled to JavaScript

Newer JavaScript language features need to be transpiled

Hot module loading to enable application development

Running unit tests automatically

Thinking about type safety

Linting for code quality

Isolating component development environments

Providing a browser-based debugging environment

Deploying React applications

Choosing the right tools

Essential tools

Optional tools

Summary

Efficiently Bootstrapping React Applications with Create React App

Installing Create React App

Creating your first app

Specifying a project name

Automatic dependency handling

Directory structure

Top-level files

Static assets

Source code

Summary

Development Mode and Mastering Hot Reloading

Starting the development server

Webpack configuration

Entry points

Build output

Resolving input files

Loading and compiling files

Configuring plugins

Hot reloading

Hot component reloading in action

Ejecting from Create React App

Summary

Optimizing Test-Driven React Development

The driving philosophy of Jest

Mock everything except the application code

Isolate tests and run in parallel

Tests should feel natural

Running tests

Running tests using react-scripts

Running tests using standalone Jest

Writing Jest tests

Organizing tests using suites

Basic assertions

Basic equality

Approximate equality

Value equality

Values in collections

Working with mocks

Asynchronous assertions

React component snapshots

Unit test coverage

Summary

Streamlining Development and Refactoring with Type-Safe React Components

What does type-safety solve?

Replacing guesswork with assurance

Removing runtime checks

Obvious low-severity bugs

Installing and initializing Flow

Validating component properties and state

Primitive property values

Object property values

Validating component state

Function property values

Enforcing child component types

Parents with specific children types

Parents with one child

Parents with an optional child

Parents with primitive child values

Validating event handler functions

Bringing Flow into the development server

Bringing Flow into your editor

Summary

Enforcing Code Quality to Improve Maintainability

Installing and configuring ESLint

Building on Airbnb standards

Adding React plugins to ESLint

Using ESLint with create-react-app

Using ESLint in a code editor

Automating code formatting with Prettier

Summary

Isolating Components with Storybook

The need for isolated component development

Installing and configuring Storybook

Developing components with stories

Experimenting with props

Experimenting with actions

Linking stories together

Stories as documentation

Building static Storybook apps

Summary

Debugging Components in the Browser

Installing the React Developer Tools add-on

Working with React elements in React Developer Tools

Selecting React elements

Searching for React elements

Inspecting component properties and state

Manipulating element state values

Profiling component performance

Removing reconciliation work

Finding CPU intensive components

Summary

Instrumenting Application State with Redux

Building a Redux app

The App component and state

The Home component and state

The NewBook component and state

The API abstraction

Putting it all together

Installing Redux DevTools

Selecting and examining actions

Action data

Action state trees and charts

Action state diffs

Time travel debugging

Manually triggering actions

Exporting and importing state

Summary

Building and Deploying Static React Sites with Gatsby

Why static React sites?

Types of React apps

Better user experience

Efficient resource usage

Building your first Gatsby site

Adding local filesystem data

Fetching remote data

Summary

Building and Deploying React Applications with Docker Containers

Building a messaging app

Starting Barely SMS

Logging in

The home page

The contacts page

The messages page

Sending a message

The API

Getting started with Node containers

Composing React apps with services

Static React builds for production

Summary

Another Book You May Enjoy

Leave a review – let other readers know what you think