React JS: Why we should use ReactJS

It makes writing Javascript easier

React uses a special syntax called JSX, which allows you to mix HTML with JavaScript. This is not a requirement – you can still write in plain JavaScript – but I strongly suggest that you try the new syntax because makes writing your components a breeze.

Being able to drop a bit of HTML in your render function without having to concatenate strings is fantastic, and after a while it feels very natural. React turns those bits of HTML into functions with a special JSXTransformer.

import React, { Component } from 'react';
class DemoView extends Component {
render() {
return (
<div>
<span>
Cat Demo View
</span>
<img src="http://i.imgur.com/QbA1W4Z.jpg">
<span>
Some random cats picture.
</span>
</div>
);
}
}

view raw reactDemoView.js hosted with ❤ by GitHub

Components are the future of web development

Shadow DOM and frameworks such as PolymerJS generated a lot of buzz lately, and rightly so. The core concept of Polymer boils down to creating self-contained, customizable elements that you can easily import and use in your project. This in itself is a fantastic idea, but React takes that concept to the next level.

React doesn't use Shadow DOM – instead it gives you the ability to create your own components that you can later reuse, combine, and nest to your heart’s content. I've found this to be the single-biggest productivity boost because it’s so easy to define and manipulate your own components.

import React, { Component } from 'react';
import Header from './header';
import Footer from './footer';
import ContactForm from './contactForm';
import ListItems from './listItems';
class DemoSecondView extends Component {
render() {
return (
<div>
<Header />
<h2> Simple Demo View </h2>
<ul>
<ListItems />
</ul>
<ContactForm />
<Footer />
</div>
);
}
}

view raw reactDemoView2.js hosted with ❤ by GitHub

React is extremely efficient

React creates its own virtual DOM where your components actually live. This approach gives you enormous flexibility and amazing gains in performance because React calculates what changes need to be made in the DOM beforehand and updates the DOM tree accordingly. This way, React avoids costly DOM operations and makes updates in a very efficient manner.

It's awesome for SEO

One of the biggest issues with JavaScript frameworks is that they are not exactly search engine friendly. Although there have been some improvements in this area, search engines generally have trouble reading JavaScript-heavy applications.

React stands out from the crowd because you can run React on the server, and the virtual DOM will be rendered and returned to the browser as a regular web page. No need for PhantomJS and other tricks!

It gives you out-of-the-box developer tools

When you start your adventure with React, don't forget to install the official React Chrome extension. It makes debugging your app so much easier.

After you install the extension, you'll have a direct look into the virtual DOM just as if you were browsing a regular DOM tree in the elements panel. Pretty amazing!

The brains behind Facebook are maintaining this project

React is now open source, but it was first developed at Facebook for internal purposes. After a while, Facebook engineers realized that they created something truly awesome and decided to share their project with the world.

Facebook uses some React, and Instagram’s entire website was built on React after the two companies joined forces. Other successful projects using React include Khan Academy and New York Times.

Mobile Apps using React Native

Once you get comfortable with building web application with React, you can easily switch to building mobile application using React Native. Though it is not directly related to React, React Native follows same design patterns, making the transition easier!

import React, { Component } from 'react';
import { Text, View, Image } from 'react-native';
class DemoView extends Component {
render() {
return (
<View>
<Text>
Cat Demo View
</Text>
<Image source={{uri: 'http://i.imgur.com/QbA1W4Z.jpg'}} />
<Text>
Some random cats picture.
</Text>
</View>
);
}
}

view raw reactNativeDemo.js hosted with ❤ by GitHub

Using only Javascript, you will be able to build the native equivalent to Java, Swift or Objective-C, thus supported both by Android and iOS.

Some example applications that were built using this framework are Facebook Ads Manager and Discovery VR.

	import React, { Component } from 'react';

	class DemoView extends Component {
	render() {
	return (
	<div>
	<span>
	Cat Demo View
	</span>

	<img src="http://i.imgur.com/QbA1W4Z.jpg">

	<span>
	Some random cats picture.
	</span>
	</div>
	);
	}
	}

	import React, { Component } from 'react';

	import Header from './header';
	import Footer from './footer';
	import ContactForm from './contactForm';

	import ListItems from './listItems';

	class DemoSecondView extends Component {
	render() {
	return (
	<div>
	<Header />
	<h2> Simple Demo View </h2>
	<ul>
	<ListItems />
	</ul>
	<ContactForm />
	<Footer />
	</div>
	);
	}
	}

	import React, { Component } from 'react';
	import { Text, View, Image } from 'react-native';

	class DemoView extends Component {
	render() {
	return (
	<View>
	<Text>
	Cat Demo View
	</Text>

	<Image source={{uri: 'http://i.imgur.com/QbA1W4Z.jpg'}} />

	<Text>
	Some random cats picture.
	</Text>
	</View>
	);
	}
	}

Why we should use ReactJS