Come let’s start our journey through the world of React, an efficient and flexible JavaScript Library.
Today we talk about something called Single Page Applications (SPA) with respect to web based applications. This is where the web application does not use different pages to show different views of the application. The different views will be loaded into the same page so that you don’t need to reload the page every time you need a different view. This is a great improvement in terms of performance.
React helps us to achieve that in an easy flexible way.
Let’s learn React.
They say that the view is just a function of props and state. We’ll see how easy it’s going to be.
Let’s set up the React development environment and go through a beginner’s guide to React. Come let’s get started.
Note that we require the Babel and Webpack Libraries to start working with react.
I’m assuming here that you are in an Ubuntu/Linux environment. You’ll see it by the commands I use here.
Step 1 :
- Create a new folder to hold all the files required for the beginner’s guide and initialize the folder with npm. Note that npm should be installed in your machine.
mkdir react_beginner_guidecd react_beginner_guidenpm init
Now let’s configure and install Webpack.
- You need to first install Webpack using npm.
Why do we use Webpack here?
Webpack is basically a module bundler. Depending on a configuration, Webpack will bundle modules with dependencies and generate static assets from them.
Use the following command to install Webpack in your machine.
npm i webpack -S
We then create a configuration file for Webpack and name it as webpack.config.js.
This file helps Webpack to define configuration settings needed by it to carry out its work properly. So let’s create a config file with the name above in the folder react_beginner_guide. Type in the following command to create the file.
touch webpack.config.js
Then replace the contents of the file from the following lines.
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;
APP_DIR is where the path to the React application code base is specified.
BUILD_DIR is where the path to the bundle output being specified.
entry attribute under the config section specifies the path to the entry file from which the bundling process starts.
Under the output attribute, we say that after the bundling process is completed, use the BUILD_DIR to output the bundled file with the name bundle.js.
Step 3 :
- Now let’s create the index.jsx file in the APP_DIR and add the following line of code to it so that we can verify whether we did the task correctly.
console.log('Hello World!');
Save the file and the run the following command in the terminal.
./node_modules/.bin/webpack -d
The above command will run Webpack in the development mode and generates the bundle.js file in BUILD_DIR.Step 4 :
- We can add an html file that will use the bundle.js file to display our message in the browser console. So create an index.html file in the ./src/client directory and add the following code to it.
<html> <head> <meta charset="utf-8"> <title>React.js using NPM, Babel6 and Webpack</title> </head> <body> <div id="app" /> http://public/bundle.js </body> </html>After saving the file, double click on it and open it in the browser. Then by right clicking on the browser and inspecting the element, check the console to see the message “Hello World”.
Credits goes to Tamizhvendan S.
Cheers !
Comments
Post a Comment