Introduction to react.js

What is React js?

Reactjs is an open source javascript UI(User Interface) library,  collaborate and maintained by Facebook and Instagram and also a huge community of developers. That's designed to take your application state and allow you to write code that makes that status input and return virtual DOM, It's certainly better way to manipulate the DOM and handle events which are really just a set of plain.

JSX

JSX( Javascript XML ) template which works client and server side , Compile, building and deploying javascript. It make your application neat and clean. Learn More about JSX.

Props

Sometimes we need or pass data to our component from the outside or parent. In those situations, we use properties or props.

var defaultProps = React.ceateClass
({
	render: function(){
		return 
		(
			<div>
				<a href={this.props.uri} > Demo </a>
			</div>
		)
	}
});
React.render( < defaultProps uri = "http://www.demoxyz.com" />, document.body );

This URI is loaded by this.props.uri in our defaultProps component.

State

State is the changeable property of component like the counter, and boolean(true or false). It's easiest way to update component view on every re-render.

We can use state in React with setState keyword.

var Button  = React.createClass
({
	getInitialState: function(){
	
		return { counter: 0 };
	
	},
	handleClick: function(){
	
		this.setState({ counter: this.state.couter+1 });
	
	},
	render: function(){
		return (
			< button onClick={ this.handleClick } />Counter : {this.state.counter} </button>
		)
	}
});

React.render( <button />, document.body );

In above component  we have a counter and it's initial state is set to 0 but, whenever a button is clicked, onClick event will trigger and handleClick object runs the single time and counter increase +1.

Basic principles of functional programming

Composition -  Makes it easier to predict what will happen. That's how React managing complexity, It's building strict interfaces.

Idempotence -

  • Predictability between what you put in and what you get out.
  • Immutability( Easy bugs like repeatable and traceable ).

React write Idempotent and composable functions.

Flux( Controlling our Components data ) - Flux is the name of the architecture. Which tries to separate immutable, mutable, and components.

Why use React js?

  • Reusable components, using mixins( that allow overlap only on lifecycle methods, and have a predictable execution order ).
  • Hierarchical components( Components that appear within another component in the mock should appear as a child in the hierarchy ).
  • Uses inheritance
  • High Cohesion, Loose coupling
  • Virtual, shadow DOM
  • It's SEO friendly - React can run on the server and virtual DOM render data and return the regular web page.
  • Easy but Powerful javascript library
  • Tools & Extensions

Why is React So Fast?

  • DOM( Document Object Model ) structure of HTML and XML elements that make up a web page. It refers how elements access and change, Reading and writing in DOM really slow.
  • Reading and writing javascript object is faster.
  • React Virtual DOM is the javascript object.
  • React never reads from browser's DOM.
  • It only writes to real DOM if needed.
  • React handles DOM updates very efficiently.

What is virtual DOM and How it works?

  • Virtual DOM is a pure javascript intermediate representation of DOM. When your app state changes, your code returns a new virtual DOM.
  • Data binding is popular because everyone thinks re-rendering or diffing is expensive.
  • Whenever anything may have changed, re-render everything to a virtual DOM representation.
  • React Diffs( Whenever something changes in data in virtual DOM react will take this before and after, Compute the difference and only update the stuff that change)
  • Only update the real DOM with what actually changed.

Ember and Meteor vs Angular vs React 

  • Ember and Mateor are using KVO system which checking every time model for any change to DOM.
  • Angular-style dirty checking forces everything through a $scope, $watch, and directives.
  • React just check the view and render every time when changes occur.

 

Conclusion - KVO system used model, but React uses view portion of a web application. Certainly View is much cheaper than a model but make changes every time in browser DOM may too expensive that's why they innovate virtual DOM.

If your liked this post, please hit social button below to share with your friends.

Something to say? Tell us in comment section.