UI developers and geeks are struggling to catch the technology stacks nowadays.Big cats including Google and Facebook are in this race.ReactJS ,a contribution by Facebook is really a game changer.Good percentage of UI experts are a bit biased towards using ReactJS.We shall begin our discussion with fundamentals.
Overview of ReactJS
As we seen earlier,this is one of the pertinent solutions for UI business requirments.Initially developed by Facebook,it started gaining popularity when introduced to Facebook news feed and Instagram.The initial release of ReactJS was in 2013.
Main Features of ReactJS
Virtual DOM
This is a key feature of ReactJS with which ReactJS creates an in memory data structure cache ,calculates the diffrerences and updates the Document Object Model(DOM)
JSX
ReactJS uses JSX for creating components.JSX is a statically typed object oriented language which is then converting to more efficient JavaScript code to run in browsers.
One way Data Flow
Properties are passed to a component’s renderer as properties in its HTML tag. A component cannot directly modify any properties passed to it.But instead passing callback functions that modify values.
Sample application with ReactJS
Now it is pretty good if we familiarize ReactJS with a sample application.This application displays a welcome message in the browser window
Steps are below
step 1)If not already installed, Install Node.js and npm
step 2)Install babel transpiler and babel-cli using npm so that we can use es6 and React presets
npm install -g babel
npm install -g babel-cli
step 3)Create a project directory sampleApp and go to the directory
mkdir sampleApp
cd sampleApp
step 4)do npm init with defaults(As mentioned here)
npm init
step 5)Install webpack bundler
npm install webpack --save
npm install webpack-dev-server --save
step 6)Replace the test entry in scripts of package.json
{
"name": "sampleapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --hot"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^15.4.2",
"react-dom": "^15.4.2",
"webpack": "^2.2.1"
}
}
step 7)Install the react and react dom
npm install react --save
npm install react-dom –save
step 8)Install the babel presets and tools
npm install babel-core npm install babel-loader npm install babel-preset-react npm install babel-preset-es2015
step 9)Create the following files in the project directory
SampleApp.jsx
import React from 'react';
class SampleApp extends React.Component {
render() {
return (
<div>
<p>Welcome to the world of ReactJS</p>
</div>
);
}
}
export default SampleApp;
main.js
import React from 'react';
import ReactDOM from 'react-dom';
import SampleApp from './SampleApp.jsx';
ReactDOM.render(<SampleApp />, document.getElementById('app'));
webpack.config.js
var config = {
entry: './main.js',
output: {
filename: './index.js',
},
devServer: {
inline: true,
port: 8030
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}
]
}
}
module.exports = config;
The port we are using 8030
index.html
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>React Sample App</title>
</head>
<body>
<div id = "app"></div>
<script src = "index.js"></script>
</body>
</html>
10)Now run the application
npm start
Observe the console for the success message.The output in the browser would be the welcome message .
