Modern JavaScript Tooling with React

Building an application with React typically involves several tools. Whether you configure these on your own or use a tool meant to save you from the configuration like Create React App, the tools are still there. When you come up against a situation where you need to start from scratch or make changes to a webpack or babel configuration, it helps to understand what each tool does, how they fit together, and how they are configured.

In this course, we’ll start from an empty directory and by the end, we will have configured a slim but powerful boilerplate project. Along the way, we’ll touch on each of the major tools and build up to the final setup to gain an understanding of each tool’s purpose and how they all work together to help you build and deliver an application.

Course Content

Course Overview: Modern JavaScript Tooling with React

Initialize an npm Project and git Repository

Add a Project and Push Changes to GitHub with git

Install webpack and create a default bundle

Explicitly Define an Entry Point with a webpack Configuration File

Control the Output of webpack with the mode Setting

Transform Modern JavaScript Features with Babel

Configure webpack to Load JavaScript Files through Babel with babel-loader

Configure babel for React with preset-react

Inject a JavaScript bundle into HTML with the HtmlWebpackPlugin

Update your Bundle with each File Save with webpack’s watch Mode

Create Separate webpack Configs for Development and Production with webpack-merge

Serve a webpack Bundle while Developing with webpack-dev-server

Generate Source Maps through webpack for a Better Debugging Experience with source-map

Support Proposed JavaScript Features with Babel Plugins

Automatically Import CSS in JavaScript with webpack using style-loader and css-loader

Hot Reload a React App in Development with react-hot-loader

Avoid Duplicate Commands by Calling one NPM Script from Another

Analyze a Production JavaScript Bundle with webpack-bundle-analyzer

Externalize Dependencies to be Loaded via CDN with webpack

Target specific browsers with babel-preset-env and the babel pollyfill

Asynchronously Load webpack Bundles through Code-splitting and React Suspense

Run a Simple Test with Jest in a React App

Set Up Tests that Render a React Component with Jest and Babel

Set up Testing Globals in an Application with Jest

Configure Prettier to Automatically Format Code

Avoid Common JavaScript Errors with ESLint

Check for Accessibility Issues in JSX with the jsx-a11y ESLint Plugin

Run Linting, Tests and Prettier in git Hooks with Husky

Avoid Deprecated React APIs with React.StrictMode

Create an Error Boundary for a React App

Define Prop Types for a React Class Component

Check for Accessibility Issues in the Browser with react-axe

Create a New Project by Cloning the Boilerplate Project