initializing your react app

$ npm init

$ npm install –save react react-dom

$ npm install –save babel-loader babel-core babel-preset-es2015 babel-preset-react


make sure you have webpack installed:

$ npm install babel webpack webpack-dev-server -g

next create files: $ touch index.html App.js main.js webpack.config.js

where App.js will be our first component for our app, index.html will be our global html webpage, and main.js will be the entry into our app.


webpack.config.js

this is where we compile all our js and jsx down to js, and will launch our dev server. Our webpack.config.js should look like this:

module.exports = {
  entry: './main.js',
  output: {
    path: './',
    filename: 'index.js'
  },
  devServer: {
    inline: true,
    port: 3333
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  }
}

or:

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


index.html

our main html file will contain a div with the id #app that we will load all our js into. We will also load in our bundled html file:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Setup</title>
</head>
<body>
  <div id="app"></div>

  <!-- bundled file from webpack -->
  <script src="index.js"></script>
</body>
</html>

App.js

import React from 'react';

class App extends React.Component {
  render() {
    return <div>Hello</div>
  }
}

export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, docment.getElementById('app'));

in package.json we now wanna add a sstart script:

"scripts": {
  "start": "webpack-dev-server"
}

now if we run $ npm start and if we visit localhost:3333 we should see our Hello