React & Webpack 4 From Scratch - No CLI

In this video we will setup React WITHOUT the Create-React-App CLI. The CLI is fantastic but many people do not understand how it works behind the scenes. In this video we will setup React from scratch with Webpack 4 and Babel.

Sponsor: Coding Dojo

Code For This Project:

💖 Become a Patron: Show support & get perks!

Website & Udemy Courses

Follow Traversy Media:

The Developer Hangout: Public Discord Server

[mzaki]

Some stuff has changed since the release of this video guys, to those of you who are coming from the future watch out for these stuff:

** Run this command to install babel:
npm i --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader

** Add these settings in .babelrc:
{
}

** Webpack webpack-cli webpack-dev-server:
At this moment while I am writing this comment, they will be installed with these versions:
"webpack": "^5.16.0",
"webpack-cli": "^4.4.0",
"webpack-dev-server": "^3.11.2"
you can confirm that as well in your package.json file. When you try to run: npm start, it won't work and it will throw you this error:
Error: Cannot find module 'webpack/bin/config-yargs'
To fix that: go to > package.json, find "scripts" and replace web-dev-server with: webpack serve, so the code should look like this:
"scripts": {
"start": "webpack serve --mode development --open --hot",
"build": "webpack --mode production"
then run npm start and it will work.

[lewis]

This video is a PERFECT example of why I love Brad's videos. I followed a couple of tutorials online and they just tell you *what* to do. Ended up with things not working, wondering why I had half the packages I had pulled in, etc.
Then you listen to Brad's explanation - 'We're going to get this package which will do this. Use --save-dev or you can use -D, they're the same thing. This config option does this." Man! Thank you Brad for always being conscious about explaining and pacing your videos properly! I promise to come here first from now on!

[kajal]

Hey brad! Thanks for always making these amazing tutorials.

[fluntimes]

Brad, this is by far the best run through I've seen on setting up React with webpack. I'm always miffed as to what presets and packages to install so this was a refreshing take on setting up the environment. Unfortunately, many tuts on this are out of date or poorly put together.

[fullmastrinio]

I've watched a bunch of videos and read some articles but for me this is the most comprehensive and easily explained tutorial about webpack! Thank you good sir!

[JeffLewis]

Dependencies:
- react
- react-dom

Dev Dependencies:
- babel-core
- babel-loader
- babel-preset-env
- babel-preset-react
- webpack
- webpack-cli
- webpack-dev-server
- html-webpack-plugin

[kcirnitram]

Thanks for this. I like the create-react-app for it's convenience and simplicity but watching someone craft the structure and explain the "hows & why" is very useful to me.

[hojdog]

This cleared up something that the webpack getting started documentation missed. I was having slow rebuild times with the dev server and adding --mode development was what I needed. Thanks!

[patorjk]

Thanks for putting this together. I'm currently trying to learn React and didn't like how much create-react-app hide from me. It felt like magic. This made a lot more sense, thanks!

[diptopauldip]

11:37 the regular expression /\.js$/ will only work for js extensions. I think it should be { test: /\.jsx?$/ }, this will work for both js and jsx extentions.

[branen]

YouTube: Traversy Media 1 notification.
Me: Like, pop some popcorn and watch.

[rogerramos]

You’re a life saver!
Just getting in a interview test that I need to create a React app from scratch, including config. You are doing such a great job by the way

[maxtirdatov]

There is one thing you're missing. You should go with [['env', { modules: false }], 'react'] for your babel presets. Since babel by default converts your import statements into node style require(), you have to set 'modules' to false in the options of the env preset in order to enable webpack for tree shaking which is only possible with es6 import.

[romimaximus]

This is exactly what i was looking for !! thankx Brad...😎👍, now i just have to look how include css and sass files into the bundle to compile it, in webpack

[devolee]

Impressive work! By far the best explanation regarding Webpack & Babel too.

[joeyvico]

Thank you Brad, you always nail it with your tutorials.
One thing: as far as I know, webpack 4 by default looks for the ./src/index.js and will automatically bundle javascript files into a /dist/main.js and index.html for us. I tried commenting out the entry and output from the webpack.config.js and yep! Confirmed the beauty of webpack 4.

[sawyerburnett]

Nicely explained. I've been using create-react-app but now that I'm getting more advanced I need to learn how things work under the hood.

[kevinzhang]

very good introduction for webpack ... I am just starting learning webpack ... and this video is using latest version of webpack which is super good!!! Thank you Brad!

[tonycaterev]

16:35 that point still confuses me a bit.
Aren't we able to use ES6 modules because of webpack? Do we have to compile them down to es5 syntax with babel instead, in order to use them?

[saidizied]

when I see a new pub from u brad I really feel so excited I just come and push the like button and go. u are just amazing