ReactJS is currently one of the most popular JavaScript libraries developed by Facebook.Its a front-end development library and used for handle view layer of mobile and web apps.
Pros:
React virtual DOM will improve apps performance.
You can render React on the server-side.
ReactJS can use with any framework.Such as Backbone js, Angular js.
Cons:
Reactjs is only a view layer. Integrating Reactjs into a traditional MVC framework such as rails would require some configuration.
There is a learning curve for beginners who are new to web development.
Why should use ReactJS:
Reactjs works great for teams, strongly enforcing UI and workflow patterns.
The user interface code is readable and maintainable.
There is now a lot of demand for developers with ReactJS experience.
Prerequisites:
JavaScript
HTML 5
CSS
and basic knowledge of Ecma Script 2015
We will need NodeJS and NPM.
First we need to setup some babels plugins.You can install babel by running the following code in command prompt.
C:\Users\username>npm install -g babel
C:\Users\username>npm install -g babel-cli
Then install webpack bundler and 'webpack-div-server'.Enter following commands for install those bundles.
C:\Users\username>npm install webpack --save
C:\Users\username>npm install webpack-dev-server --save
Then create a root folder and initialize with npm.
C:\Users\username\Desktop>mkdir myApp
C:\Users\username\Desktop>cd myApp
C:\Users\username\Desktop\myApp>npm init
Then it's time to install react and dom packages, '--save' command will add these packages to package.json file.
C:\Users\username\Desktop\reactApp>npm install react --save
C:\Users\username\Desktop\reactApp>npm install react-dom --save
Then install babel plugins to the created project.
C:\Users\username\Desktop\myApp>npm install babel-core
C:\Users\username\Desktop\myApp>npm install babel-loader
C:\Users\username\Desktop\myApp>npm install babel-preset-react
C:\Users\username\Desktop\myApp>npm install babel-preset-es2015
Then you need to create the following files inside 'myApp' folder.
index.html
App.jsx
main.js
webpack.config.js
Then add following codes to those files.
webpack-config.js
var config = {
entry: './main.js',
output: {
path:'./',
filename: 'index.js',
},
devServer: {
inline: true,
port: 8080
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}
]
}
}
module.exports = config;
First we add main.js as entry point.We are setting development server to 8080 port. You can choose any other port you prefer.Also we are adding babel loaders to search for js files and use es2015 and react presets.
package.json
"start": "webpack-dev-server --hot"
index.html
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>React App</title>
</head>
<body>
<div id = "app"></div>
<script src = "index.js"></script>
</body>
</html>
App.jsx
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
Hello World!!!
</div>
);
}
}
export default App;
main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App />, document.getElementById('app'));
We need to import this component and then render it to our root App element so we can see it in browser.Then it's time to run our first app so enter following command to run the server.
C:\Users\username\Desktop\myApp>npm start
