Create React-Redux boilerplate in simple steps

on
Untitled Document.md

React and Redux boilerplate

React is the latest front end technology with lot of hype and curiosity around it. There are lot of boilerplates available for React. But we can also create boiler plate on our own and keep adding things later. By this way we will understand the complexities required to setup the environment as well. So, Let’s dive in.
I am using windows 7 and have git bash installed. Using git bash allows me to execute unix commands on windows. First step is to create a directory for our application.
Execute the following commands:
$ mkdir react-redux
$ cd react-redux
Once we are inside this directory execute the following command.
$ npm init -y
The above command will create package.json file with default settings. Now, its time to install the dependencies required to setup the application.
Install the following dependencies:
$ npm install --save babel-core@6.21.0 babel-loader@6.2.10 babel-preset-react@
6.23.0 babel-preset-es2015@6.18.0 babel-preset-stage-1@6.16.0 react react-dom redux express
Now install webpack as a dev dependency.
$ npm install --save-dev webpack
Once webpack is installed create webpack.config.js file.
Execute the following command:
$ touch webpack.config.js
Update it with the following code:
var path = require('path');
const webpack = require('webpack');
module.exports = {
 entry: './src/app.js',
 output: {
  filename: 'bundle.js',
  path: path.resolve(__dirname, 'public')
 },
 watch: true,
 module:{
  loaders: [
   {
   test:/\.js$/,
   exclude:/node_modules/,
   loader: 'babel-loader',
    query: {
     presets: ['react', 'es2015', 'stage-1']
    }
   }
  ]
 }
}
Let’s understand the webpack.config file. The entry tells Webpack the entry point of our application.
The output specifies the name of the file and the directory in which it should copy the output file to. In our case bundle.js file will be created inside public folder.
The watch flag when set to true will compile our Javascript files once the user saves any changes.
The loaders specifies Webpack which compilers to use.
The loader specifies Webpack to use babel as a compiler.
The query specifies Webpack to use Babel compiler to transform our ES6/es-2015 and ES6/stage-1 code to a version which is compatible with all the browsers.
The react preset tells Webpack to compile jsx into javascript which browsers understand.
Since, we have mentioned in the webpack.config.js file that src/app.js is going to be our entry we will create it next. Execute the following commands:
$ mkdir src
$ cd src
$ touch app.js
Update the app.js file with the following code:
console.log('React and Redux boilerplate');
Next, we create a public folder and index.html file which will be served by the webserver. Execute the following commands.
$ mkdir public
$ cd public
$ touch index.html
Update the index.html file with the following code:
<!DOCTYPE>
<html>
<head>
<title>Hello React and Redux</title>
<meta name="viewport"
content="width=device-width,
initial-scale=1.0 maximum-scale=1.0" />
</head>
<body>
<div id="app"></div>
<script src="bundle.js"></script>
<h1>First React and Redux Application</h1>
</body>
</html>
Please note that we are using bundle.js file which will be created by webpack.
We create a basic Express webserver which will host our React-Redux application. Create a server.js file and update it with the following code:
var express = require('express');
var app = express();
var path = require('path');

// STATIC FILES
app.use(express.static('public'));

// ENTRY POINT
app.get('/', (req, res) => {
res.sendFile(path.resolve(__dirname, 'public', 'index.html'))
});

app.listen(3000, () => {
console.log('App web-server listening on port 3000');
});
Now, execute the following commands at the root level of our application directory.
$ webpack
This command will create bundlejs output file.
$ node server.js
This command will start the webserver at port 3000.
Navigate to http://localhost:3000 and we will see messages we added in app/src.js file in the console.
The git repository can be found here: React-Redux. Once our environment is ready, we can go ahead and create any React-Redux application we wish to! Thanks!

Comments

Post a Comment