React Tutorial #2 - Setup with Webpack (& without)

Hey ninjas, in this React tutorial I'll be showing you how to set up a basic work space for React using Webpack. I'll show you how to use the NPM to install React (and React DOM) as well as how to configure webpack to run with Babel.

----- COURSE LINKS:

---------------------------------------------------------------------------------------------
You can find more front-end development tutorials on CSS, HTML, JavaScript, jQuery, WordPress & more on the channel homepage...

========== PSD to WordPress Playlist ==========

============== The Net Ninja =====================

================== Social Links ==================

[karunyavenugopalan]

Modifications I made in order for the tutorial to work with babel 7:
1. replace "loaders" with "rules" in line 12 of webpack.config.js
2. npm install @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev
use this command for babel installation
3. remove the old versions of babel from "devdependencies" in package.json file. Use the below link for reference
4. In the webpack.config.js file, replace the presets(line 18) with the below

[wiznerdz]

I like how you explain whats going on and why we're doing specific things instead of just watching you code and having us follow along. Other tutorials are just like, "do this, copy and paste that, put this here...and that should work".
Keep the great tutorials coming!

[craigjohnson]

It took me a while but I finally got the hang of it. This is the best tutorial on Webpack. He is the only one that I've seen use query and presets: ['react', 'es2015'] within webpack.config.js which is brilliant!

[suwarnawade]

While installing babel, use npm install --save-dev @babel/core @babel/preset-react @babel/preset-env.

[blightysun]

Error: Option '-d, --devtool <value>' argument missing , not able to make bundle.js automatically

[Nlyf]

Guys, don't name your folder "react" you're gonna get an error when installing react itself.
And make sure the "name" attribute in your package.json isn't equal to "react".

[Pravasith]

"start": "npm run build",
"build": "webpack -d && webpack-dev-server --content-base src/ --inline --hot --port 1234"

[Managersky]

Webpack.config.js is not actually correct. You need to rename in 12 line "loaders" to "rules"

[pluraltest]

you could do "npm init -y" if you want to skip all the questions and super shortcuts "npm i -S react react-dom" "npm i -D babel-core babel-loader babel-preset-es2015 babel-preset-react webpack webpack-dev-server"

[WillardShikami]

Thanks alot for your hardwork on these tutorials. They are so detailed and REALLY helpful.

[p.w.f.]

1. To get this to work, use this in your webpack.config.js file:

var path = require('path');

module.exports = {
mode: 'none',
entry: path.resolve(__dirname, 'src') + '/app/index.js',
output: {
path: path.resolve(__dirname, 'dist') + '/app',
filename: 'bundle.js',
publicPath: '/app/'
},
module: {
rules: [
{
test: /\.js$/,
include: path.resolve(__dirname, 'src'),
use: [
{
loader: 'babel-loader',
options: {
}
}
]
},
{
test: /\.css$/,
use: [
{loader: 'style-loader!css-loader'}
]

}
]
}
};

2. Delete your node_modules folder

3. Go to package.json, and change the script for "build" to:
"build": "webpack && webpack serve --content-base src/ --inline --hot --port 1234"

4. scroll to the bottom and copy and paste these dependencies (replacing existing dependencies):
"babel-loader": "^8.2.2",
"webpack": "^5.42.0",
"webpack-cli": "^4.7.2",
"webpack-dev-server": "^3.11.2"

5. Run the command => npm install
6. Finally run command => npm start

Should hopefully work for you!!!

[causecaos]

Great video as always, looking forward to more react goodness from you. Thanks Shaun

[TheTechnicalNirl]

And on that note, babel has gone through some changes since this was made, so the correct package names are now (Dec 30th 2019)
"babel-loader": "^8.0.6"

[badcode]

As always and excellent video!!! Thank you for this amazing tutorial, Shaun, keep doing tutorials like this, they are really helpful.

[shototodoroki]

if you're having problem with starting webpack then try the following:
1) download the entire project with package.json file and unzip the folder.
2) On your terminal inside your folder where package.json is located type the following command npm install to install all the dependencies for you.
3) type npm start and you good to go

[argeelearner]

can you update your react course to the new way of setting up react with the npm create-react-app?

[hrafars]

Hey Shaun, why would this method of installation should be chosen over create-react-app cli command?
Have a good day!

[mrkolokoy]

Great tutorial! Learned so much in this video. Subscribed!

[ayeshaazam]

I am using Intellij Idea and i am following exactly as shown in the video, but when entering 'npm start' I am getting error : Invalid configuration object.Webpack has been initialised using a configuration object that does not match the API scheme. Any help would be great !

[eunjijo]

I think All kind of errors coming from different version of webpack, babel, react etc... just get the package.json from lesson-13, npm i and run. It works for me : )