Create React App 2 Quick Start Guide
Brandon Richey更新时间：2021-07-02 12:53:50
最新章节：Leave a review - let other readers know what you thinkcoverpage
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
更新时间：2021-07-02 12:53:50