React.js using npm, babel and webpack.

React React React… ok so what is React and how we can build a basic application in it.

Here my first trial of React.js with babel, npm and webpack.

Gone through many blogs few are saying that React can cover the complete MVC, but what I got up-to now React basically covers the V(view from MVC).

I am still struggling with the doc, yea I am trying to learn React but the flow of the doc is a bit complex to me so collecting data from several resources.

Here is the example what I tried from scratch.

Install NodejS and npm as per your distro.

Create a directory let’s say react-hello-world and initialize the it using npm.

mkdir react-hello-world
cd react-hello-world
npm init

Select default for all prompts.

Installing and configuring webpack using npm.

webpack is a module bundler. webpack takes modules with dependencies and generates static assets representing those modules based on configuration what you did.

npm i webpack -S

Configuration for webpack.

I follow vim, so the commands with vim. You can use any editor you wish.

vim webpack.config.js

var webpack = require(‘webpack’);
var path = require(‘path’);

var BUILD_DIR = path.resolve(__dirname, ‘src/client/public’);
var APP_DIR = path.resolve(__dirname, ‘src/client/app’);

var config = {

entry: APP_DIR + ‘/index.jsx’,
output: {

path: BUILD_DIR,
filename: ‘bundle.js’

}

};
module.exports = config;

The APP_DIR holds the directory path of the React application’s codebase and the BUILD_DIR represents the directory path of the bundle file output.

The output instructs webpack what to do after bundling process has been done. Here, we are instructing it to use the src/client/public directory to output the bundled file with the name bundle.js

First, create the folder structure like

react-hello-world
– – src
– – – – client
– – – – – – app

Let’s create a index.jsx into ./src/client/app to verify that we did a proper configuration.

vim src/client/app/index.jsx

console.log(‘Hello World!’);

Now execute the command

./node_modules/.bin/webpack -d

The above command run the webpack in development mode and create the bundle.js

Now for making this more interactive adding an index.html in ./src/client

vim src/client/index.html

Screenshot from 2017-04-21 18:53:10
Now open your browser and enter the path absolute-path-of-your-directory/react-hello-world/src/client, you can see Hello World! in the console.

Installing Babel and configuring using npm.

npm i babel-core babel-loader babel-preset-es2015 babel-preset-react -S

The babel-preset-es2015 and babel-preset-react are plugins being used by the babel-loader to translate ES6 and JSX syntax respectively.

As we did some configuration for webpack, babel-loader also requires some configuration.

Create a .babelrc

vim .babelrc

{

“presets” : [“es2015”, “react”]

}

The next step is telling webpack to use the babel-loader while bundling the files

vim webpack.config.js

// Existing Code ….
var config = {

// Existing Code ….
module : {

loaders : [

{

test : /\.jsx?/,
include : APP_DIR,
loader : ‘babel-loader’

}

]

}

}

Now we are done with the webpack and babel. Let’s write some code in React

Install React and React-dom

npm i react react-dom -S

Replacing the existing console.log in index.jsx with

import React from ‘react’;
import {render} from ‘react-dom’;

class App extends React.Component {

render() {

return Hello World!;

}

}

render(<App/>, document.getElementById(‘app’));

Now execute the command again

./node_modules/.bin/webpack -d

Open index.html in the browser and there it is

Hello World!

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s