React and Webpack setup -Self note series

Continuing from the last series about Expressjs setup, on this series I will setup React, make it render properly in index.html and also setup webpack which will handle all my front-end assets.

Step 1

I will create a div in index.html where react will be rendered

#server/index.html
<div id="main"> </div>

Step 2

In order to be systematic, all front-end files will be stored in one folder, so I will create a client folder for this purpose. Then, I will create my first react component

#client/index.js
import React, { Component } from 'react';
import {render} from 'react-dom';
import App from './components/App';
render(<App />, document.getElementById('main'));

Basically what the code above does is importing all the required methods from its package, import a component called App and render it to the div with an id called main which I have defined earlier. Lastly I need to create the component file itself which I defined here should be in the folder components.

#client/components/App.js
import React, { Component } from 'react';
class App extends Component {
 render() {
  return(
   <h1>hello react</h1>
  );
 }
}
export default App;

In this file I will render the same html markup which I did during the setup of Expressjs

Step 3

Then I will install all package required

#terminal
$npm install --save react react-dom

Step 4

Like other javascript files, it need to be included in the main html file in order for it to be working properly. In my case the index.html in need to have all the javascript code included.

Webpack will be the tool for this. Webpack will bundle all the required script into a single file called bundle.js. So I will make reference to this file in my index.html. Then I will install and setup webpack.

#server/index.html
<script src="bundle.js"></script>
#server/index.js
import webpack from 'webpack';
import webpackMiddleware from 'webpack-dev-middleware';
import webpackConfig from '../webpack.config.dev';
app.use(webpackMiddleware(webpack(webpackConfig)));
#webpack.config.dev.js
import path from 'path';
export default {
 devtool: 'eval-source-map',
 entry: path.join(__dirname, '/client/index.js'),
 output: {
  path: '/',
  filename: 'bundle.js'
 },
 module: {
  loaders: [
   {
    test: /\.js$/,
    include: path.join(__dirname, 'client'),
    loaders: ['babel-loader']
   }
]
 },
 resolve: {
  extensions: ['.js']
 }
}
#.babelrc
"presets": ["es2015", "react"]
#terminal
$npm install --save-dev webpack webpack-dev-middleware babel-loader babel-preset-react

Final step

I will run the server and the component will be rendered correctly. I will check the react component using the chrome react devtools

#terminal
$npm run server

Cheer, see you next post.

Github resource

notes: There are probably many ways to implement this feature and and this is how I find the easiest way for me to implement this. Anybody is free to give a comment for any mistakes or improvement that I can apply. This guide is initially for my own self to learn and remember about what I have done, nonetheless anybody is welcome to follow this guide if you find it is very helpful.