React JS Tutorial 2: Setting Up React Environment

Learn how to setup React JS using babel, webpack and npm.

[marylaurencefelasol]

hi i have a question. after npm run it. when i access it localhost:8081 it will show the directory instead of the output Hello World. why is that?

[jeevankumarkanuganti]

Perfectly In just 11 minutes of video my environment setup is done and i got the "hello world" output.


Thanks....a lot

[MahadyHasan]

Thanks Buddy, Finally React Environment setup done and Hello world program has been run without any error

[marinsecret]

Perfectly explained !!! Better then the other tutorials :) I use sublime and it is a good combination. Thanks mate, would you like to show some lessons with react if you can of course.

[davidrichardson]

I couldn't get webpack-dev-server it says it wasn't available or something, kinda screws with this whole thing.

[vishnuloganathan]

how to use the components in separate file and where i want to call that file name

[officialahmad]

after npm run it..error

how to fix it

[sandhyaaa]

babel-pewset-es2-15 not present error occur???

[RajibGangulydesignerg]

same I am doing but getting below error.

ERROR in Entry module not found: Error: Can't resolve './src' in 'D:\test\project\react'

Module not found: Error: Can't resolve './src' in 'D:\test\project\react'

[iamwill]

For those getting an error same to what I got: ERROR in ./script.js
Module build failed (from
The modules within the directory are required.

[arjuns]

hi i want to know wishval studio with react

[thienphuctran]

Please help me! I have that error:
"Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration.module has an unknown property 'loaders'. These properties are valid:
object { defaultRules?, exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, strictExportPresence?, strictThisContextOnImports?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp? }
-> Options affecting the normal modules (`NormalModuleFactory`)."

[primalstore]

Module not found: Error: Can't resolve './src' in 'D:\ReactJS'


And another problem is this error message in browser when open index.html

[andrewleong]

Hi, why do you need to include the --hot at the webpack -dev-server part? How do i make the browser only transpile when i refresh the browser?

[emmanuelphua]

how did you get package.json. wghy is mine different from yours?

{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-scripts": "1.0.17"
},
"scripts": {
"it": "webpack-dev-server --hot"
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}

[MahadyHasan]

you told that there is link in the description of this video to for node and npm setup. But where is the link !!!!

[anirbanbanerjee]

Getting error while doing npm run it saying absolute path error

[RaviPrasadYT]

webpack complied successfully but localhost:8080 highlights the file directories instead of showing hello world !!! why?

[somanzahoor]

i get this error.
Error: Cannot find module

[racek]

error missing script :it :-( when running: npm run it