Create React App 2 Quick Start Guide by Richey, Brandon -- Read -- Imperial Library of Trantor

Index

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

← Prev
Back
Next →

← Prev
Back
Next →