Create React App 2 Quick Start Guide

Table of contents

1. Title Page
2. Copyright and Credits
   1. Create React App 2 Quick Start Guide
3. Dedication
4. About Packt
   1. Why subscribe?
   2. Packt.com
5. Contributors
   1. About the author
   2. About the reviewer
   3. Packt is searching for authors like you
6. Preface
   1. Who this book is for
   2. What this book covers
   3. To get the most out of this book
      1. Download the example code files
      2. Download the color images
      3. Conventions used
   4. Get in touch
      1. Reviews
7. Introducing Create React App 2
   1. What is Create React App?
      1. What is the history of Create React App?
         1. The early days of JavaScript development
         2. The bundle era
      2. What problems does CRA solve?
      3. Installing prerequisites for Create React App
      4. Creating our first Create React App project
      5. A quick look at the options of CRA
         1. The yarn start command
         2. The yarn build command
         3. The yarn test command
         4. The yarn eject command
      6. Let's explore the created project
      7. Adding code to our project
         1. Creating our first component
         2. Wait, what is JSX?
         3. Embedding style sheets in our component
      8. Looking forward – what will we do?
         1. The project plan
   2. Summary
8. Creating Our First Create React App Application
   1. Creating our first major project
      1. Designing our application
      2. Building the baseline functionality for our application
         1. Creating our project
         2. Initializing our components to build on top off
         3. Building separate components in separate files
         4. Introducing props
         5. Writing a class-based component
         6. Bringing state into our component
         7. Adding interactivity via state modifications
         8. Indicating our state with CSS
      3. Iterating our project further
         1. Building a List component
         2. Adding the TodoList to our App
         3. Adding state to TodoList
         4. Creating and using a helper render() function
         5. Creating a new Todo component
         6. Passing a function as a prop
         7. Removing items is important too
   2. Summary
9. Create React App and Babel
   1. Babel and the latest JavaScript syntax
      1. What is Babel?
         1. Understanding the history
         2. Where does Babel fit into the puzzle?
      2. Exploring modern JavaScript with Babel
         1. JSX
         2. Function syntax
         3. Destructuring
         4. Optional arguments
         5. The spread operator
         6. React Fragments
      3. A quick recap
   2. Summary
10. Keep Your App Healthy with Tests and Jest
    1. The why and when of testing
       1. The history of testing React
       2. About Jest
       3. Analyzing the structure of Jest tests
          1. Exploring the test output
          2. A development test workflow with the F key
       4. It's time to add some new tests!
          1. Writing a generic snapshot test
          2. Writing tests for content
             1. What’s a shallow render?
          3. Testing interactions
          4. Completing our interactivity tests
          5. Returning to our mocked function
          6. Adding tests for TodoList
          7. Adding tests for NewTodo
    2. Summary
11. Applying Modern CSS to Create React App Projects
    1. What tools are available?
       1. CSS conflicts can ruin your application
       2. A quick example of CSS conflicts
    2. Introducing CSS Modules
       1. Better project organization
       2. How to use CSS Modules
       3. Introducing CSS Modules to our application
       4. Composability with CSS Modules
    3. Introducing SASS to our project
       1. What is SASS?
       2. Installing and configuring SASS
       3. Mixing SASS and CSS Modules
    4. Adding CSS frameworks
       1. Cleaning up our design, starting with the header
       2. Cleaning up the NewTodo component
       3. Cleaning up our Todo component
       4. Making our tests pass again
    5. Summary
12. Simulate Your Backend with a Proxy API
    1. Simulating a backend server with the proxy API
       1. Setting up the backend API
          1. Figuring out our backend requests
          2. Building the Todos index API request
          3. Building the add Todo API request
          4. Building the remove Todo API request
       2. The React component life cycle for mounting
          1. Where to put API requests
       3. Communicating with your proxy server with React
          1. Working with Async/Await
          2. Introducing Fetch
          3. Getting our list of Todos from the server
          4. Creating a new Todo on the server
          5. Deleting a Todo
       4. Getting back to passing tests
          1. Fixing the Todo test
          2. Fixing our last failing test suite through refactoring
          3. Building service libraries
          4. Implementing our service library in TodoList
          5. Finally fixing our last failing test suite
    2. Summary
13. Building Progressive Web Applications
    1. Understanding and building PWAs
       1. What is a PWA?
          1. How do we define a PWA?
       2. Building a PWA in Create React App
          1. Starting with our manifest file
          2. Viewing our manifest file in action with Chrome
          3. Exploring the manifest file options
             1. name and short_name
             2. icons
             3. start_url
             4. background_color
             5. display
             6. orientation
             7. scope
             8. theme_color
          4. Customizing our manifest file
       3. Hooking up Service Workers
          1. What is a Service Worker?
          2. The Service Worker life cycle
          3. How can we use a Service Worker in our app?
    2. Summary
14. Getting Your App Ready for Production
    1. Adding other libraries
       1. Other popular React libraries
          1. React Router
          2. React Final Form
          3. Adding Redux for state management
    2. Creating a production build
       1. How to create a production build
       2. Thoughts on the deployment process
    3. Ejecting our project
       1. How to eject
       2. Drawbacks of using eject
    4. Summary
15. Other Books You May Enjoy
    1. Leave a review - let other readers know what you think