Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

egghead.io

Modern JavaScript Tooling with React

via egghead.io

Overview

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.

Syllabus

  • 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

Taught by

Andy Van Slaars

Reviews

4.8 rating at egghead.io based on 339 ratings

Start your review of Modern JavaScript Tooling with React

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.