set up the project - react, webpack, babel

[heron2014]

Steps:

- npm init
- npm install react --save // you can install specific version like react@0.14.3 
- npm install react-dom --save // you can install specific version like react-dom@0.14.3
//install dev dependencies 
// babel is compiler which will translate es6 to es5 so the browser can read it
- npm install --save-dev babel-loader babel-core babel-preset-es2015 babel-preset-react
- install babel-preset-stage-0 --save-dev 
- npm install webpack webpack-dev-server --save-dev
- npm install eslint-plugin-react --save-dev 
//you can isntall webpack as global so you wont have to do previous step
// like npm install webpack -g

Define presets in .babelrc Define object in webpack.config.js Define .eslintrc

[heron2014]

What is babel-preset-stage-0 ?

[heron2014]

After all installation why do I have so many node_modules??

Example:

[heron2014]

I had the problem with serving right path to my bundle.js from public folder.

This answer helped here

  devServer: {
    contentBase: "./public",
    ...
  }

[heron2014]

eslint-plugin-react issue:

Resolved by :

cd ~/.atom/packages/linter-eslint/
npm install eslint-plugin-react

Then I had the same issue with babel-eslint I installed it as above

Reported issue 259