ReactJS Basics - #2 Setup Workspace with Webpack

This ReactJS Tutorial shows how to set up a Workspace using Webpack.

----------

----------

• Follow @maxedapps and @academind_real on Twitter

See you in the videos!

----------

[milanm]

Thank's Max for the best tutorials on the web!
For Windows users:
- Latest version of Node
- npm install babel-core --save-dev
- package.json replace "scripts" with this one:

"scripts": {
"start": "npm run build",
"build": "webpack -d && xcopy \"src/index.html\" \"dist/\" /F /Y && webpack-dev-server --content-base src/ --inline",
"build:prod": "webpack -p && xcopy \"src/index.html\" \"dist/\" /F /Y"
},

[lucasleroux]

I had failed to make it work on windows 8.
This afternoon I tried several other guides from some blogs, they all worked and it helped me understand what was wrong, here is the modified code, it finally worked.

"scripts": {
"start": "npm run build",
"build": "webpack -d && xcopy src\\index.html dist\\index.html && webpack-dev-server --content-base src/ --inline --hot",
"bulid:prod": "webpack -p && xcopy src\\index.html dist\\index.html"
}

I don't know why there is a copy step, which was missing in the other guides.
Anyway I am happy that I can finally pass this and dive into the following real react stuff.

---I am a big fan. Thanks a bunch. 谢谢:)

[wellyngtonamaral]

Use this structure for the current webpack version:

module: {
rules: [
{
test: /\.js?/,
include: SRC_DIR,
loader: "babel-loader",
query: {
"presets": [
"es2015",
"react",
"stage-2"
]
}
}
]
}

[fotios]

Core basics:
What we need from React: 1:30
What we need to bundle our code: 2:05
What is Webpack: 02:48
About Babel: 3:45

Lets get started 4:00

[bhuwanesh]

Thanks a lot Max for this awesome guide for the react and webpack setup. As others have already mentioned this is very insightful tutorial for the beginners...I have faced some issues while setting this up. would like to share some mistakes and changes I had made to make this work. hope this will help others as well.
Issues: NPM run build The syntax of the command is incorrect.

Thanks a lot again.

For all those who face the issue of the application not starting with the latest webpack- 4.10.2 .. They have to follow two changes from this video.

1. Since the configuration schema has been changed from the last versions you have to Pinku Deb Nath's response and make changes accordingly in your webpack.config.js file
for e.g

module:{
rules:[{
test:/\*.jsx?$/,
use:[{
loader:"babel-loader",
query:{
presets:["react", "es2015", "stage-2"]
}
}]
}]
}

2. For all the windows users. Please provide your path using "\\" instead of "/"



Regards,
Bhuwanesh

[oldschoolfellow]

if you are watching this video in 2019,
skip this video and just use the following 3 commands :-
npx create-react-app my-app
cd my-app
npm start

and then follow the rest of the course,
Thank me later.

[RahulMangalDeveloper]

if any error came on windows run the below command in cmd
npm install babel-core --save-dev

and start block in package.json is the below.
"scripts": {
"start": "npm run build",
"build": "webpack -d && xcopy \"src/index.html\" \"dist/\" /F /Y && webpack-dev-server --content-base src/ --inline",
"build:prod": "webpack -p && xcopy \"src/index.html\" \"dist/\" /F /Y"
},

[shamseerahammed]

This guy just explains everything...I've never seen anyone explaining things and making them easy for the listeners, as this guy does.

[launchit]

I hope the grateful responses from strangers makes your hard work, and excellent product, worthwhile! Because I'm another extremely impressed and slightly more-capable beginner because of you. THANK YOU for these clear, patient, comprehensive and personable videos!

[sanjeevakaalex]

This is the best setup video I have ever seen, believe me I have seen a dozen of them but this one is fucking awesome. Thank you for making it that descriptive and step by step :)

[leokhan]

Omg, it's works!
Thanks for previous solutions!

1) npm install babel-core --save-dev
2)
"scripts": {
"start": "npm run build",
"build": "webpack -d && xcopy \"src/index.html\" \"dist/\" /F /Y && webpack-dev-server --content-base src/ --inline",
"build:prod": "webpack -p && xcopy \"src/index.html\" \"dist/\" /F /Y"
},

[MariuszSzlachta]

It's good when you tell about things such as configurations etc. In many video tutorials authors don't show how to do it saying "it's not the goal of this course" but you are not that kind of person and that's great! Your materials are very good, meritorically speaking, and not only shows us how to do sth but really inspires. It's probably because you have a talent to teaching. I will buy your entire course at udemy for sure :)

[ryanlh]

This is a fantastic video! I have struggled with webpack. Thank you for taking the time to go step by step without skipping the little stuff that a lot of other videos assume we already know.

[PinkuDebNath]

This is by far the best tutorial where I understood how to bundle using webpack and the logic behind the configurations. :)

By the way, if anyone installed the latest webpack version (4) and does not work for some reason,
here is the webpack.config.js that worked for me:

var webpack = require("webpack");
var path = require("path");

var DIST_DIR = path.resolve(__dirname, "dist");
var SRC_DIR = path.resolve(__dirname, "src");

var config = {
entry: SRC_DIR + "/app/index.js",
output: {
path: DIST_DIR + "/app",
filename: "bundle.js",
publicPath: "/app/"
},
module: {
rules: [
{
test: /\.js?/,
include: SRC_DIR,
use: {
loader: "babel-loader",
query: {
presets: ["react", "es2015", "stage-2"]
}
}
}
]
}
};
module.exports = config;

[joshhwb]

Definitely the most descriptive webpack tutuorial on YT. Many props man!

[kamikaze]

Very nice and interesting tutorial,
Can you please let us know about the IDE that you are using and the initial environmental setup in the IDE that you made before the coding ? Possibly a vid on that ?

[MarcosLima-cscd]

2020 Update
!

Watching this video and with some help I made this environment work, just making a few modifications:

Minute 9:34
- At the comand line while installing dependencies



Add: "webpack-cli"

Replace: "babel-preset-es2015", "babel-preset-react", "babel-preset-stage-2"



Minute 17:54
- In "webpack.config.js" file while adding the loader


Replace: "loaders"
With: "rules"



Minute 19:40
- Also in "webpack.config.js" file while adding the presets


Replace: "react", "es2015", "stage-2"



Minute 24:10
- In "package.json" file while writing the "script" comand, after "--content-base" flag


Replace: "src/"
With: "./src"



And its done!
. I hope this is helpfull

This issue is due to updates in Webpack and Babel. Remember this video was uploaded almost 4 years ago!

Excuse me for my bad English :)

See ya! (?)

[nafishasnian]

In Windows Use this, just changing "cp" to "copy" isn't going to solve the problem

"scripts": {
"start": "npm run build",
"build": "webpack -d && xcopy \"src/index.html\" \"dist/\" /F /Y && webpack-dev-server --content-base src/ --inline",
"build:prod": "webpack -p && xcopy \"src/index.html\" \"dist/\" /F /Y"
},

[rushys]

By the way your tutorial is the best react.js series I have seen . Great explanation.

[TheChrisPetropoulos]

Great Work bro! Awesome tuts!
Just for the heads up, this setup will only work for local access to the machine, if you need to set this up to a remote machine then just add : --host 0.0.0.0 at the end of the build script in package.json
Cheers :D