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

YouTube

Introduction to ESBuild Tutorial for React - JavaScript and Typescript Bundling

Chris Hay via YouTube

Overview

Learn how to use ESBuild, a fast bundler written in Go, as a potential replacement for Webpack in this comprehensive tutorial. Explore the process of transpiling TypeScript code into JavaScript and bundling it for browser use. Discover how to configure ESBuild for deploying React applications in production and debugging environments, including source maps and minification. Examine ESBuild's plugin model and its capabilities for React server-side rendering. Implement ESBuild in your development workflow for hot reloading of TypeScript web applications, enhancing your developer experience. Follow along with practical demonstrations and code examples, covering installation, TypeScript transpilation, React application bundling, browser bundling with Node.js, serving bundles, working with source maps and minification, using ESBuild WebAssembly, exploring plugins, and setting up hot reloading with Express and Nodemon.

Syllabus

- Introduction
- Installing esbuild
- Transpiling typescript using esbuild
- Comparing esbuild to TSC
- Creating our React Application
- Transpiling React Applications with esbuild
- Bundling our React Application with esbuild via Command Line
- Browser bundling with esbuild in Node.JS
- Serving bundles with http-server
- Sourcemaps
- Minify
- Bundling in browsers with ESBuild WebAssembly
- ESBuild Plugins
- ESBuild-Register
- Hot reloading with Express, esbuild Register and Nodemon
- Conclusion

Taught by

Chris Hay

Reviews

Start your review of Introduction to ESBuild Tutorial for React - JavaScript and Typescript Bundling

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.