React App with Webpack & Babel (ES6+, source maps, hot reload, and more)

Показать описание

In this tutorial, we will set up a React project from the ground up using popular tooling including Webpack and Babel. By the end of this video, you will understand the basic inner workings of boilerplate libraries such as create-react-app, and will learn to scaffold a development environment for your own apps.

Note that I decided to go with Babel 6, since v7 is still in beta; in fact, they just authored a breaking change in 7.0.0-beta.52 the other day!

FAQ

- Why do we need a module bundler like Webpack?

Because some people still use older browsers that don't support ES6 modules (e.g. IE11), and because HTTP/2 is yet to fully replace HTTP 1.1.

- Why do we need a transpiler like Babel?

For cross-browser support, because older browsers don't support ES6+ features natively.

- Why do we need a source map?

Because it's very hard to debug minified, uglified, and transpiled code. To fix a bug in production, you need to trace it back to its original source.

- Why not create-react-app?

If you need to change a small setting, are you comfortable ejecting and sifting through its 100s LOC config? It's worthwhile to bootstrap the workspace yourself so you can tailor it towards your app.

TODO

In a future video, I could cover polyfills, linting, testing, code coverage, and version control. Topic requests are welcome. Thanks!

Рекомендации по теме

Комментарии

Such a powerful thing and well explained, I'm surprised it's so little views((

andriiauziak

Very good explanation. All answers of my questions are cleared here!!! (Y)

imranyaseen

As always you nailed it Alex, good work!

aikidoshi

thank you. really like the UI animations. well done

junka

Thank you for this awesome video, I am waiting for mern stack video

AbhishekKumar-mqtt

Now when released 8 version of babel-loader this doesn't work.
For this thing to work, need to be installed 7.1.5 version.
7:40

andriiauziak

Thanks Alex!
All your videos are very useful for the learning stage I am in, recently starting to work in a more professional way!
Assuming you work in the field, what other technologies do you use?
Do you have any Typescript experience? Any backend? (Java, Go, etc)

Im interested in improve functional programming and algorithm skills cause i never learned anything of this. Do you recommend any book or online course?
Thank you so much, keep going!

mmr

this needs an update, perhaps add config for production, development and common

lightningresaba

React App with Webpack & Babel (ES6+, source maps, hot reload, and more)

How To Create A React App With React 18, Webpack 5, And Babel (2023 Update)

Vite vs Create React App / Webpack, Vite and ESBuild explained.

React Webpack Setup From Scratch

Module Bundlers Explained... Webpack, Rollup, Parcel, and Snowpack

Create a React App with TypeScript and Webpack

Stop Using Create React App

React Deep Dive: Build a React App With Webpack: Introduction

Create a React App WITHOUT Create React App

Build a Netflix Clone with AI Tools: Full Stack ReactJS + Firebase Tutorial

Deconstructing Create-React-App with Webpack 4 & Babel 7

Manual Webpack Configuration For React App - Basic Setup

React Webpack-5 Setup from Scratch

React App with Webpack & Babel (ES6+, source maps, hot reload, and more)

Webpack 5 Crash Course | Frontend Development Setup

Vite in 100 Seconds

Setup React with Typescript and Webpack: Building a microservices-based NodeJS and React app #060

7 better ways to create a React app

React TypeScript Webpack - Setup From Scratch (1/8)

Stop Using Create React App

Forget create-react-app! Use THIS instead!!

How to create a front end application using webpack 5

[React] Deployment of Webpack/React Apps

Setup Webpack and Babel for React

webpack react | webpack dev server react #webpack #reactapp #reactjs