Create React App 2 Quick Start Guide

Book description

Integrate your React applications with React to build efficient web services.

Key Features

  • Learn React by building applications with Create React App
  • Create interactive UIs exploring the latest feature of CRA 2.0
  • Build Progressive Web Applications for a more seamless web

Book Description

If you're a power user and you aren't happy always reusing default configurations, from previous applications with each new application, then all you need is Create React App (CRA), a tool in the React ecosystem designed to help you create boilerplate code for building a web frontend.

This book will help you use CRA to write React programs without significant configuration-related difficulties. With this quick start guide, you will integrate your applications with React to build efficient professional web services.You will learn to design UIs with the features of CRA and template your React applications.

By the end of the book, you will be sufficiently skilled to be able to build faster and effective React apps using CRA.

What you will learn

  • Become familiar with React by building applications with Create React App
  • Make your frontend development hassle free
  • Create interactive UIs exploring the latest features of CRA 2
  • Build modern, React projects with, SASS,and progressive web applications
  • Develop proxy backend servers and simulate interaction with a full backend
  • Keep your application fully tested and maintain confidence in your project

Who this book is for

The book is intended for the web developers who want to jump into building great frontend with React using easy templating solutions.

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

Product information

  • Title: Create React App 2 Quick Start Guide
  • Author(s): Brandon Richey
  • Release date: February 2019
  • Publisher(s): Packt Publishing
  • ISBN: 9781789952766