Setting up React

First of all, we need to install globally our module bundler: webpack. So if you don’t have it already:

sudo npm install webpack -g

Let’s initiate our project!

npm init

You’ll need to fill some information like name and description but don’t worry; you can edit it later in the package.json file.

Now let’s install the webpack locally, inside our project:

npm install webpack --save-dev

Create a new file in the project root called: webpack.config.js and put it inside:

module.exports = {
  entry: './src/index.js',
  output: {
    path: './public',
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        presets: ['es2015', 'react']
      }
    }]
  }
}

This config will read the file /src/index.js and compile it all to /public/bundle.js

Now create a folder called public and inside create a file called index.html containing:

<script src="bundle.js"></script>

And now, install React!

npm install react react-dom --save

And Babel:

npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

Now we can start developing :)
Let’s make a basic test. Create the file /src/index.js and put it:

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
ReactDOM.render(<App />, document.getElementById('app'))

Inside your /public/index.html you’ll need to put it inside the body:

<div id="app"></div>

Create the file /src/App.js and:

import React from 'react'
class App extends React.Component {
  render() {
    return (
      <div>Olar!</div>
    )
  }
}
export default App

Now in your terminal:

webpack

UHUL! :) We can also install the webpack dev server to make our life easier:

npm install webpack-dev-server -g
npm install webpack-dev-server --save-dev

Now put it inside your webpack.config.js:

devServer: {
  inline: true,
  contentBase: './public',
  port: 3333
}

And at your terminal:

webpack-dev-server

Open localhost:3333 in the browser and everything that you change in your code, webpack will automatically refresh in the browser :)