PU$]-[KAR's

… Every drop has ability to survive .

ReactJS application using Webpack and ES 6

Leave a comment

Good Morning Friends !!!

Till now, we have seen the basic stuff about the webpack and ReactJs application. We have seen the basic webpack properties which are necessary to bundle a simple application and we have seen one simple example of ReactJS. For more details you can go through my earlier posts such as Webpack BasicsReact … Getting started !!! and React … With example!.

Now it’s time to create a sample application using webpack bundler, ReactJs along with ES 6. So I have chosen to create a example using bootstrap card layout with a responsive design.

The reason behind choosing ‘card template layout’ as an example is that for sure these ‘card templates’ are going to rule the word in the future in terms of web designing and why not… They are more expressive than the web pages. By consuming very small space on page they express a lot of points about the product. So definitely they will be the leader in upcoming web design market.

Setting up the environment

  • Install Node:

    To begin with the setting the environment we have to install latest version of node first to use ‘npm’ commands.

  • Application directory:

    Now create a directory where we want to build our application. Let’s name it ‘CardApplication’.

  • Package.json:

    Now go inside this directory. Here, we have to create package.json. So open node command prompt for this directory’s path and use the following command. npm init
    This will create the package.json for us. The purpose of package.json is when we ship our code to any other directory to run the code we have to just fire ‘npm install’ command which will take to install all the dependencies listed in package.json. So always make sure that what ever the dependencies you are going to install should have entry in package.json file.

  • Webpack installation:

    Use the following command to install the weback. npm install --save-dev webpack
    npm install webpack-dev-server -g
    Now as discussed earlier webpack needs webpack.config.js file. So create the file with the name ‘webpack.config.js’ on the same level where ‘package.json’ is residing in.
    Let’s copy the following code to webpack.conf.js
    var path = require('path');
    var webpack = require('webpack');
    module.exports = {
    entry: './main.js',
    output: { path: __dirname, filename: 'bundle.js' },
    Watch: true,
    module: {
    loaders: [
    { test: /\.css$/, loader: "style-loader!css-loader"                        },
    {
    test: /.jsx?$/,
    loader: 'babel-loader',
    exclude: /node_modules/,
    query: {
    presets: ['es2015', 'react']
    }
    }
    ]
    },
    };

  • React installation:

    The following commands will install React and React Dom npm install --save react
    npm install --save react-dom

  • Babel:

    The following commands will install Babel  dependencies.
    npm install --save-dev babel-loader@6.2.1
    npm install --save-dev babel-core@6.4.5
    npm install --save-dev babel-preset-es2015@6.3.13
    npm install --save-dev babel-preset-react@6.3.13

Now we are done with the setting up the environment and ready to code.

Application over view:

This application will tell us in brief about the mega structures made in past like Pyramid, Taj Mahal etc. So we are going to create a card for every structure. This card will have its on image at the background and on mouse hover it will show semi background overlay with icons for few sample menu. These menu items are clickable.

Application walk through:

So I have created the sample application git repository for card layer demo from where you can refer the code while developing the application or you can download its zip file or clone it.

In this application I have divided the folder structure for components mainly in two parts.

  • Card:

    This folder is containing the basic structure for card design. This is a reusable components which will accept the values for its title, description text and background image.

  • Menu:

    This folder is containing the component which is responsible for bringing pop up overlay on mouse hover with image menu option like print etc.

  • Card Demo.jsx:

    This page is demonstrating the cards usage to the end user.

If you have clone the application repository just use command ‘npm install’ at the folder level where the package.json is residing and run the application with command ‘webpack-dev-server –inline’. Thepage will demonstrate you the cards explaining mega structures!

That’s all my friends…

Happy coding !!!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s