Cover image for React 16 Tooling

React 16 Tooling

Author Adam Boduch
Release Date: 2018/04/01
ISBN: 9781788835015
Topic:
0%
173
Chapters
0-1
Hours read
0k
Total Words
    Start Reading Now    
       Add to Wishlist       
View table of contents

Book Description

React 16 Tooling covers the most important tools, utilities, and libraries that every React developer needs to know - in detail.

About This Book
  • Each chapter presents meta-development solutions to help React developers
  • The tools used are presented in a practical, solution-oriented approach with no fluff
  • The chapters are arranged in a logical order that mirrors a typical React development workflow, but you are free to tweak the approaches discussed to fit your own unique style
Who This Book Is For

This book is for React developers of any skill level who want to make their lives easier. It helps to have some familiarity with React, but if you are an experienced web developer looking at React, then this book will show you how to build a resilient toolset around you before you begin.

What You Will Learn
  • Bootstrap a React application using create-react-app
  • Isolate React component development using Storybook
  • Write effective unit tests for your React components using Jest
  • Ensure that your component code is to standard using ESLint
  • Use browser extensions and built-in component instrumentation to debug React applications
  • Enable type safety in React components with Flowtype
  • Deploy React applications inside a Docker container as part of a larger application stack
In Detail

React 16 Tooling covers the most important tools, utilities, and libraries that every React developer needs to know - in detail. As React has grown, the amazing toolset around it has also grown, adding features and enhancing the development workflow. Each of these essential tools is presented in a practical manner and in a logical order mirroring the development workflow. These tools will make your development life simpler and happier, enabling you to create better and more performant apps.

Adam starts with a hand-picked selection of the best tools for the React 16 ecosystem. For starters, there's the create-react-app utility that's officially supported by the React team. Not only does this tool bootstrap your React project for you, it also provides a consistent and stable framework to build upon. The premise is that when you don't have to think about meta development work, more focus goes into the product itself.

Other React tools follow this same approach to automating and improving your development life. Jest makes unit testing quicker. Flow makes catching errors easier. Docker containers make deployment in a stack simpler. Storybook makes developing components straightforward. ESLint makes writing standardized code faster. The React DevTools plugin makes debugging a cinch. React 16 Tooling clears away the barriers so you can focus on developing the good parts. In this book, we'll look at each of these powerful tools in detail, showing you how to build the perfect React ecosystem to develop your apps within.

Style and approach

This book covers React tools that help developers with the most relevant challenges they face today. Each chapter begins by defining the challenge faced by developers and why the tool is required, then shows how to fix the problem using React tooling.

Table of Contents

  1. Title Page
  2. Copyright and Credits
    1. React 16 Tooling
  3. Packt Upsell
    1. Why subscribe?
    2. PacktPub.com
  4. Contributors
    1. About the author
    2. About the reviewer
    3. Packt is searching for authors like you
  5. 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
  6. Creating a Personalized React Development Ecosystem
    1. What's included with React
      1. Components that compare render trees
      2. The DOM render target
    2. Introducing tooling?
      1. Ancillary tasks outside of React
      2. A construction site analogy
    3. React tooling covered in this book
      1. JSX needs to be compiled to JavaScript
      2. Newer JavaScript language features need to be transpiled
      3. Hot module loading to enable application development
      4. Running unit tests automatically
      5. Thinking about type safety
      6. Linting for code quality
      7. Isolating component development environments
      8. Providing a browser-based debugging environment
      9. Deploying React applications
    4. Choosing the right tools
      1. Essential tools
      2. Optional tools
    5. Summary
  7. Efficiently Bootstrapping React Applications with Create React App
    1. Installing Create React App
      1. Creating your first app
        1. Specifying a project name
        2. Automatic dependency handling
        3. Directory structure
          1. Top-level files
          2. Static assets
          3. Source code
    2. Summary
  8. Development Mode and Mastering Hot Reloading
    1. Starting the development server
      1. Webpack configuration
        1. Entry points
        2. Build output
        3. Resolving input files
        4. Loading and compiling files
        5. Configuring plugins
        6. Hot reloading
      2. Hot component reloading in action
      3. Ejecting from Create React App
    2. Summary
  9. Optimizing Test-Driven React Development
    1. The driving philosophy of Jest
      1. Mock everything except the application code
      2. Isolate tests and run in parallel
        1. Tests should feel natural
    2. Running tests
      1. Running tests using react-scripts
      2. Running tests using standalone Jest
    3. Writing Jest tests
      1. Organizing tests using suites
      2. Basic assertions
        1. Basic equality
        2. Approximate equality
        3. Value equality
        4. Values in collections
        5. Working with mocks
        6. Asynchronous assertions
        7. React component snapshots
      3. Unit test coverage
    4. Summary
  10. Streamlining Development and Refactoring with Type-Safe React Components
    1. What does type-safety solve?
      1. Replacing guesswork with assurance
      2. Removing runtime checks
      3. Obvious low-severity bugs
    2. Installing and initializing Flow
    3. Validating component properties and state
      1. Primitive property values
      2. Object property values
      3. Validating component state
      4. Function property values
      5. Enforcing child component types
        1. Parents with specific children types
        2. Parents with one child
        3. Parents with an optional child
        4. Parents with primitive child values
    4. Validating event handler functions
    5. Bringing Flow into the development server
    6. Bringing Flow into your editor
    7. Summary
  11. Enforcing Code Quality to Improve Maintainability
    1. Installing and configuring ESLint
    2. Building on Airbnb standards
    3. Adding React plugins to ESLint
    4. Using ESLint with create-react-app
    5. Using ESLint in a code editor
    6. Automating code formatting with Prettier
    7. Summary
  12. Isolating Components with Storybook
    1. The need for isolated component development
    2. Installing and configuring Storybook
    3. Developing components with stories
      1. Experimenting with props
      2. Experimenting with actions
      3. Linking stories together
      4. Stories as documentation
    4. Building static Storybook apps
    5. Summary
  13. Debugging Components in the Browser
    1. Installing the React Developer Tools add-on
    2. Working with React elements in React Developer Tools
      1. Selecting React elements
      2. Searching for React elements
    3. Inspecting component properties and state
    4. Manipulating element state values
    5. Profiling component performance
      1. Removing reconciliation work
      2. Finding CPU intensive components
    6. Summary
  14. Instrumenting Application State with Redux
    1. Building a Redux app
      1. The App component and state
      2. The Home component and state
      3. The NewBook component and state
      4. The API abstraction
      5. Putting it all together
    2. Installing Redux DevTools
    3. Selecting and examining actions
      1. Action data
      2. Action state trees and charts
      3. Action state diffs
    4. Time travel debugging
    5. Manually triggering actions
    6. Exporting and importing state
    7. Summary
  15. Building and Deploying Static React Sites with Gatsby
    1. Why static React sites?
      1. Types of React apps
      2. Better user experience
      3. Efficient resource usage
    2. Building your first Gatsby site
    3. Adding local filesystem data
    4. Fetching remote data
    5. Summary
  16. Building and Deploying React Applications with Docker Containers
    1. Building a messaging app
      1. Starting Barely SMS
      2. Logging in
      3. The home page
      4. The contacts page
      5. The messages page
      6. Sending a message
      7. The API
    2. Getting started with Node containers
    3. Composing React apps with services
    4. Static React builds for production
    5. Summary
  17. Another Book You May Enjoy
    1. Leave a review – let other readers know what you think
18.188.108.54