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.

In this course, we'll start with an empty directory and build up a starter project for building a React application.

Along the way, we'll work with webpack and babel to transform, code-split, and bundle our code. We'll create npm scripts to execute commands and work with git and GitHub to track changes and share our code in public. We'll build quality into our project with Jest for unit testing and ESLint for static analysis. We'll configure Prettier for formatting and then enforce all these quality checks before commit with git hooks. We'll even incorporate some accessibility checks and enforce some best practices in React with react-axe, React's StrictMode and a default ErrorBoundary component.

Whether you end up using the resulting project to start new projects of your own, or you continue to use great community tools like Create React App, you'll leave this course understanding the underlying tools and how they work together.

Course Overview: Modern JavaScript Tooling with React

In this lesson we'll start with an empty folder and initialize the project that will serve as the base to build up our own React boilerplate project. We'll also initialize a git repository and walk through checking the repo status, adding files, committing and we’ll take a look at the git log.

Initialize an npm Project and git Repository

In this lesson, we’ll create a new repository on GitHub, set the remote on our local repository and push our changes up to GitHub. We’ll add a readme, look at how our git status changes when we have changes that aren’t yet on the remote and we’ll see how running `npm init` again will update our `package.json` with new information.

Add a Project and Push Changes to GitHub with git

In this lesson, we'll add some initial files to our project, install `webpack` and `webpack-cli`, and setup an npm script to create a JavaScript bundle using `webpack`. We'll inspect the resulting bundle to understand what webpack does by default. We’ll also add a .gitignore file to avoid committing node_modules and files that result from a build process.

Install webpack and create a default bundle

We _could_ use `webpack` without any configuration and that would bundle our JavaScript, but our options will be limited. In this lesson, we'll create a webpack configuration file and we’ll explicitly define the entry point, and some output options as a starting point to build on.

Explicitly Define an Entry Point with a webpack Configuration File

As of `webpack` version 4, there is a top-level configuration option called `mode`. Mode allows us optimize for build speed during development, while optimizing for runtime performance and smaller bundles for production builds. In this lesson, we'll add the mode key to our webpack configuration and look at the difference in output between the `production` and `development` settings.

Control the Output of webpack with the mode Setting

In this lesson, we’ll install Babel and use it from the terminal to see how it can take JavaScript that uses modern language features and output JavaScript that will run in down-level browsers.

Transform Modern JavaScript Features with Babel

In this lesson, we'll configure webpack to use the Babel loader for our JavaScript files, allowing us to transpile our source files and generate a bundle for deploying our application.

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

In this lesson, we'll add React and ReactDOM to our project and create an entry point for the React application. We'll also configure Babel with the React preset so Babel can transpile our JSX into JavaScript that will run in a browser.

Configure babel for React with preset-react

Even if it's only a simple one, we'll need to serve up an HTML file to run our JavaScript app. We can hardcode the bundle path into a script tag, but then if we want to change our bundle name, we need to update that in our webpack config and in our html file. In this lesson, we'll see how to use the `HtmlWebpackPlugin` to inject the script tag for our bundle into an HTML template file.

Inject a JavaScript bundle into HTML with the HtmlWebpackPlugin

It's inconvenient during development to have to run a script each time we make a change to our source. We can have webpack generate an updated bundle as we make changes. In this lesson, we'll create an `npm` script to run webpack in watch mode and  see it in action as we modify some source files.

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

The `development` and `production` modes in `webpack` optimize the output in different ways. In `development` mode, the focus is on faster builds and a better developer experience. In `production` mode, the focus is on highly optimized bundles, leading to a better user experience. The good news is, we can have both. In this lesson, we'll separate our `webpack` config into two configurations and update our scripts to run the right config for our needs.

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

While we're developing an application, having a local server to preview our work is a great convenience. With `webpack`, we can take advantage of `webpack-dev-server` to serve up files and automatically reload the browser when we make changes. In this lesson, we'll install and configure `webpack-dev-server` in our boilerplate project.

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

A potential downside to all the transformations our tools perform on our code is that when you need to debug your application, the code being served isn’t the code you wrote. This is where source maps save the day. We can serve transformed and bundled code, then debug in DevTools against our source code right in the browser. In this lesson we’ll take a look at the default debug experience without source maps, then we’ll configure webpack to generate source maps and look at the enhanced experience.

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

We transpile our JavaScript code so we can use modern language features, even if browser support isn't quite where we need it to be. This includes proposed features that aren't yet part of the official language specification. In this lesson, we'll see how we can support the proposed class property syntax for JavaScript with a Babel plugin.

Support Proposed JavaScript Features with Babel Plugins

JavaScript files aren't the only type of asset that `webpack` can bundle. In this lesson, we'll add a CSS file to our boilerplate and then install and configure the appropriate loaders in `webpack` to handle the CSS that's imported into our project.



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

Generating new bundles when we change files is a great start, and the live-reload provided by webpack dev server is convenient, but a reload means we lose our application state. When you want to see the results of minor adjustments while your application is in a specific state, it would be more convenient if we could have our changes reflected without losing that state. In this lesson, we'll add hot reloading to our development webpack server so our changes will be reflected in the browser when we save new changes, without the need to a refresh.

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

We can get a lot of utility through CLI tools invoked via `npm` scripts. Many of these tools have APIs with many flags and options, meaning we will frequently find ourselves using the same CLI tool in multiple npm scripts, often with only minor differences. In this lesson, we'll take two very similar `npm` scripts and see how to remove the duplication by calling one script from another and passing in additional flags.

Avoid Duplicate Commands by Calling one NPM Script from Another

Bundle size has a huge impact on JavaScript performance. It's not just about download speed, but all the JavaScript we ship to the browser needs to be parsed and compiled before it can be executed. Keeping our bundle in check can be difficult, but it's much easier when we can see where the bloat is coming from. In this lesson, we'll add the `webpack-bundle-analyzer` plugin to inspect the output of our production build.

Analyze a Production JavaScript Bundle with webpack-bundle-analyzer

We can separate our custom application code from the common libraries we leverage, such as React and ReactDOM. In this lesson we'll configure `webpack` to treat React and ReactDOM as external dependencies. Then we'll update our HTML template to conditionally include the CDN links for those libraries for production builds.

Externalize Dependencies to be Loaded via CDN with webpack

Converting all of our modern JavaScript into ES5 compatible syntax is a great way to use modern features while targeting older browsers. What happens when the browsers natively support these language features? Then it no longer makes sense to transform that code or to include polyfills that will go unused. In this lesson, we’ll add the `@babel/polyfill` package and configure `babel-preset-env`

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

One approach to building high performance applications with `webpack` is to take advantage of code-splitting to only load the needed JavaScript on initial load and asynchronously load additional JavaScript bundles when needed. In this lesson, we'll create add some code-splitting to our placeholder application and configure our project to support the dynamic `import()` syntax.

Asynchronously Load webpack Bundles through Code-splitting and React Suspense

Testing should be part of any substantial project, so we'll take the effort out of it by incorporating testing configuration into our boilerplate. In this lesson, we'll add Jest as a project dependency. We’ll add a test script to our package.json, create a sample test and verify that our test script works.

Run a Simple Test with Jest in a React App

Testing a React component takes a little more configuration than a test for standard JavaScript. In this lesson, we’ll install and configure react-testing-library and jest-dom matchers, create a test that renders our App component and configure it all to work properly with Babel 7 and dynamic import syntax.

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

There are things that will happen in all of our test files that we can handle in a centralized fashion. In this lesson, we’ll create a jest configuration file and a test setup file to import utilities that we want to make available for all of our tests.

Set up Testing Globals in an Application with Jest

Consistent code format can make a project easier to maintain. What that format is can be largely subjective, but rather than spend a bunch of valuable time "bike shedding" over semi-colons or no semis and spaces vs tab, we should just let the tools handle this. In this lesson we'll configure Prettier to format our code for us.

Configure Prettier to Automatically Format Code

JavaScript is great! JavaScript is also full of features and flexible options that can make it easy to introduce bugs. ESLint uses static analysis to check that your code adheres to a list of rules to help you avoid some specific runtime errors. ESLint is highly configurable, so in this lesson, we'll install ESLint and configure some baseline rules for our boilerplate.

Avoid Common JavaScript Errors with ESLint 

Because we'll be controlling our markup via JSX, we can use ESLint to check our markup for potential accessibility issues based on static analysis of the code. In this lesson, we'll install, configure and run the `jsx-a11y` ESLint plugin.

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

With the ability to run unit tests, automatic code formatting and linting, we should avoid ever committing code that does not adhere to our project standards or breaks our tests. In this lesson, we'll install and configure the Husky `npm` package and enforce these checks before a `git` commit is allowed.

Run Linting, Tests and Prettier in git Hooks with Husky

React has deprecated some APIs in favor of new approaches that will better support the future, concurrent model for rendering. These deprecated APIs will eventually be removed, so it makes sense to avoid them in new code and move away from them in existing code. In this lesson, we’ll wrap our boilerplate application in the StrictMode component and see it in action.

Avoid Deprecated React APIs with React.StrictMode

Uncaught errors in React used to leave your app in a corrupted state, since React 16.0, an uncaught exception in your render tree will cause your application to unmount. In this lesson, we’ll create a default error boundary to wrap our application as a starting point for new projects.

Create an Error Boundary for a React App

React components rely on props for any data that isn’t encapsulated into their internal state. We can help ensure that our components receive their required props and that the props passed in are of the correct types by defining prop types for our components. In this lesson, we’ll see how the React ESLint plugin enforces the use of prop types and how to define them in a component using the `prop-types` package.

Define Prop Types for a React Class Component

The jsx-a11y lint plugin is a great first line of defense to prevent accessibility issues, but no tool can cover everything. React-axe gives us a runtime check on our rendered DOM, and by adding it to our boilerplate, we’ll ensure that all our future projects have accessibility covered from multiple angles. In this lesson, we’ll install react-axe and add it to our entry point for development builds only.

Check for Accessibility Issues in the Browser with react-axe

Having a boilerplate project on GitHub makes creating a new project as easy as cloning the project, making a few small adjustments and creating a new git repository for the clone. In this lesson, we’ll clean up the sample code we used to make sure everything was working along the way and then we’ll create a new project with all of the tooling and configuration in place by cloning the boilerplate.

Modern JavaScript Tooling with React

Instructor

Credits

Credits

Course Content