The Minimal React Webpack Babel Setup

Instruction:

Create project and add few directories:

project:
|---src
    |---actions
    |---components
    |---containers
    |---reducers
|---style
    |---style.css
|---test

Then create an index.html file to project/ :

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/style/style.css">
    <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/48938155eb24b4ccdde09426066869504c6dab3c/dist/css/bootstrap.min.css">
  </head>
  <body>
    <div class="container"></div>
  </body>
  <script src="/bundle.js"></script>
</html>

Init npm modules

npm init

And add some initial packages

npm install --save-dev babel-core
npm install --save-dev webpack
npm install --save-dev babel-loader
npm install --save-dev babel-preset-es2015
npm install --save-dev babel-preset-react
npm install --save-dev webpack-dev-server
npm install --save-dev chai
npm install --save-dev chai-jquery
npm install --save-dev jquery
npm install --save-dev jsdom
npm install --save-dev mocha
npm install --save react
npm install --save react-dom
npm install --save-dev react-addons-test-utils
npm install --save babel-preset-stage-1
npm install --save redux
npm install --save react-redux
npm install --save react-router
npm install --save lodash

Edit package.json script object:

  "scripts": {
    "start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js",
    "test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js --recursive ./test",
    "test:watch": "npm run test -- --watch"
  },

Add webpack.config.js:

module.exports = {
  entry: [
    './src/index.js'
  ],
  output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      exclude: /node_modules/,
      loader: 'babel-loader',
      query: {
        presets: ['react', 'es2015', 'stage-1']
      }
    }]
  },
  resolve: {
    extensions: ['.js', '.jsx']
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './'
  }
};

Add a src folder to your project

Creat src/index.js file

Contents of src/index.js could be:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';

import App from './components/app';
import reducers from './reducers';

const createStoreWithMiddleware = applyMiddleware()(createStore);

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <App />
  </Provider>
  , document.querySelector('.container'));

We should add src/components/app.js

import React, { Component } from 'react';

export default class App extends Component {
  render() {
    return (
      <div>React simple starter</div>
    );
  }
}

And add src/reducers/index.js:

import { combineReducers } from 'redux';

const rootReducer = combineReducers({
  state: (state = {}) => state
});

export default rootReducer;

If you have a project already, just install npm inside your project directory

npm install

Then start a project

npm start

If you are working in WebStorm, it would be convenient to install the following package to npm, just in case to resolve all dependencies to the parts of react

npm install @types/react --save

How to make the webpack dev server run on port 80 and on 0.0.0.0 to make it publicly accessible?

How to

If you always run your webpack on http://localhost:8080 and you want to change it, first of all, you should install it globally:

npm install webpack-dev-server -g

Then you should change the host and the port

webpack-dev-server --host 0.0.0.0 --port 8081

results matching ""

    No results matching ""