Getting Started With React : Setting up and building Hello World App in React


In this post we will develop a Hello World application using React. Before we starts we need to install node.js and npm on machine.

Download node.js from nodejs.org . For windows and mac download installer, for Ubuntu machines follow Installing nodejs on ubuntu machine using package manager.

 

Once installed open terminal / command prompt and execute npm command, it will display the help of npm command, which shows that npm is ready on machine.

npm is a package manager for managing JavaScript software.

In terminal create a folder name for application for example firstreactapp. Move in to firstreactapp directory using cd command so now command prompt looks like [ Windows Screenshot ]

Directory

Directory

 

Execute command

npm init

npm init command

npm init

 

Press enter for all options allowing to use default value or can specify new value if required.

In our firstreactapp directory, new file package.json is created which look like

Initial Screen of package

Initial Screen of package.json

Next step is to install React. Execute following commands one after other

npm install –save react

npm install –save react-dom

npm install –save-dev babel-core babel-loader babel-preset-react

npm install –save-dev webpack webpack-dev-server html-webpack-plugin

This all will install require node modules in node_modules directory inside firstreactapp directory and also update package.json. What we have done is

  • react and react-dom : Required to create react application.
  • babel : To convert jsx files in to js file.
  • webpack : To convert different files using babel and combine all resources in to one js file.

Create two new files in firstreactapp directory namely .babelrc and webpack.config.js. firstreactapp directory will look like :

Directroy Structure for React app

Directory Structure for React app

A part from this two config files, html and js files are also needed to generate the output

Lets add html and js files for application. Create a sub directory name client in firstreactapp directory which will have index.html and index.js files. In client directory create sub directory name components which will have a file name App.jsx. Structure of firstreactapp directory is now

HelloWorld React

HelloWorld React App

In App.jsx, we will create our React Component which will display hello world. Open App.jsx and add following code

ReactComponent

ReactComponent

Open index.js, which is entry point of our app [ Recall npm init ] . Add following code

index.js App Entry point

index.js App Entry point

It is importing ReactComponent App and rendering it in tag name app.

Open index.html, which will have div tag name app.

index.html file

index.html file

Open .babelrc and add following code, which tells that react presets is to be used.

babelrc presets for react

babelrc presets for react

Open webpack.config.js and add following

webconfig for webpack

webpack.config.js for webpack

Let us understand this file a bit.

In first two line we says we require html-webpack-plugin and we create the object for the same. We required this to create new html file once the transformation is done, where the all files and resources are combined in to one js file.

var HTMLWebpackPlugin = require(‘html-webpack-plugin’);
var HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
template: ‘./client/index.html’,
filename: ‘index.html’,
inject: ‘body’
});

Next entry is module.exports which specifies the entry point, module, output and plugin. In plugin we specifies HTMLWebpackPluginConfig  we created above. In entry, index.js is specified. Webpack will convert or transform whole react app using the module which have loaders which specifies what to test, which folders to exculde and what loader in our case babel-loader is used to transform. Output specifies where to store the output file named transformed.js.

module.exports = {
entry: ‘./client/index.js’,
module: {
loaders: [
{
test: /\.jsx$/,
exclude: /node_modules/,
loader: ‘babel-loader’
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: ‘babel-loader’
}
]
},
output: {
filename: ‘transformed.js’,
path: __dirname + ‘/build’
},
plugins: [HTMLWebpackPluginConfig]
};

 

In package.json locate the scripts part, and change it to

“scripts”: {
“build”: “webpack”,
“start”: “webpack-dev-server”
},

Whole file will look like

package.json file

package.json file

We are done.

In terminal / command prompt execute

npm run build

npm run build command

npm run build command

Observe the new directory name build is created in firstreactapp, it will have one js and one html file.

Execute

npm run start

npm run start command

npm run start command

 

Open the browser and enter localhost:8081 in url.

React App Output

React App Output

We are done! Successfully created a simple react application.

Leave a comment

Your email address will not be published. Required fields are marked *