Create React App 2 Quick Start Guide电子书

Title Page

Copyright and Credits

Create React App 2 Quick Start Guide

Dedication

About Packt

Why subscribe?

Packt.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

Introducing Create React App 2

What is Create React App?

What is the history of Create React App?

The early days of JavaScript development

The bundle era

What problems does CRA solve?

Installing prerequisites for Create React App

Creating our first Create React App project

A quick look at the options of CRA

The yarn start command

The yarn build command

The yarn test command

The yarn eject command

Let's explore the created project

Adding code to our project

Creating our first component

Wait, what is JSX?

Embedding style sheets in our component

Looking forward – what will we do?

The project plan

Summary

Creating Our First Create React App Application

Creating our first major project

Designing our application

Building the baseline functionality for our application

Creating our project

Initializing our components to build on top off

Building separate components in separate files

Introducing props

Writing a class-based component

Bringing state into our component

Adding interactivity via state modifications

Indicating our state with CSS

Iterating our project further

Building a List component

Adding the TodoList to our App

Adding state to TodoList

Creating and using a helper render() function

Creating a new Todo component

Passing a function as a prop

Removing items is important too

Summary

Create React App and Babel

Babel and the latest JavaScript syntax

What is Babel?

Understanding the history

Where does Babel fit into the puzzle?

Exploring modern JavaScript with Babel

JSX

Function syntax

Destructuring

Optional arguments

The spread operator

React Fragments

A quick recap

Summary

Keep Your App Healthy with Tests and Jest

The why and when of testing

The history of testing React

About Jest

Analyzing the structure of Jest tests

Exploring the test output

A development test workflow with the F key

It's time to add some new tests!

Writing a generic snapshot test

Writing tests for content

What’s a shallow render?

Testing interactions

Completing our interactivity tests

Returning to our mocked function

Adding tests for TodoList

Adding tests for NewTodo

Summary

Applying Modern CSS to Create React App Projects

What tools are available?

CSS conflicts can ruin your application

A quick example of CSS conflicts

Introducing CSS Modules

Better project organization

How to use CSS Modules

Introducing CSS Modules to our application

Composability with CSS Modules

Introducing SASS to our project

What is SASS?

Installing and configuring SASS

Mixing SASS and CSS Modules

Adding CSS frameworks

Cleaning up our design, starting with the header

Cleaning up the NewTodo component

Cleaning up our Todo component

Making our tests pass again

Summary

Simulate Your Backend with a Proxy API

Simulating a backend server with the proxy API

Setting up the backend API

Figuring out our backend requests

Building the Todos index API request

Building the add Todo API request

Building the remove Todo API request

The React component life cycle for mounting

Where to put API requests

Communicating with your proxy server with React

Working with Async/Await

Introducing Fetch

Getting our list of Todos from the server

Creating a new Todo on the server

Deleting a Todo

Getting back to passing tests

Fixing the Todo test

Fixing our last failing test suite through refactoring

Building service libraries

Implementing our service library in TodoList

Finally fixing our last failing test suite

Summary

Building Progressive Web Applications

Understanding and building PWAs

What is a PWA?

How do we define a PWA?

Building a PWA in Create React App

Starting with our manifest file

Viewing our manifest file in action with Chrome

Exploring the manifest file options

name and short_name

icons

start_url

background_color

display

orientation

scope

theme_color

Customizing our manifest file

Hooking up Service Workers

What is a Service Worker?

The Service Worker life cycle

How can we use a Service Worker in our app?

Summary

Getting Your App Ready for Production

Adding other libraries

Other popular React libraries

React Router

React Final Form

Adding Redux for state management

Creating a production build

How to create a production build

Thoughts on the deployment process

Ejecting our project

How to eject

Drawbacks of using eject

Summary

Other Books You May Enjoy

Leave a review - let other readers know what you think