Category: Framework

React Framework

What is ReactJS

ReactJS is a javascript framework from Facebook (javascript library) which is narrow in scope but tightly focused. It is concerned with rendering the view with data state(dataset) and viewer state(UI). It is a two way binding with model and view and not using the controller. It turns the javascript into reactive descriptive language.

In short javascript is about props, state and events.

Benefits of using ReactJS

It uses virtual DOM which is in memory DOM, very fast and has many states. It also uses Javascript XML(JSX).

Features

• Rendering an Element

ReactDom.render() – renders element to the DOM

React Element	the element to render
DOM Element	the target DOM element to render into
Callback	optional callback function

Example (fiddle)

ReactDOM.render(
  <h1>Hello, world</h1>,
  document.getElementById('container'),
  function(){
     window.alert('done');
  }
)

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

• Rendering a Component

Returns element via render method and reusable components. In MyComponent capital M is important, if M is not capital than reactjs will not function properly. React component returns the react element. render() is a required method.

Example (fiddle)

var MyComponent = React.createClass({
  render: function(){
  	return (
    	<p>Testing the MyComponent feature</p>
    );
  }
});

ReactDOM.render(
<MyComponent/>,
document.getElementById('container')
);

Source: Link

• Component Props

Collection of values associated with a component (Key value pair). It allows dynamic rendering of data when re-using components.

Example

var Hello = React.createClass({
    render: function() {
        return

; } }); ReactDOM.render( <Hello name=“World” />, document.getElementById(‘container’) );

• Component State

Sometimes components may have state that represent a mutatable properties that may affect the rendered output, eg pressing a button (True or False). State is optional in a component.

2 types of states:

• GETINITIALSTATE – set initial values
• SETSTATE – update and render from virtual DOM

Example

var ClickCounter = React.createClass({
	getInitialState: function(){
		return { 
			count:0
		}
	},

	increment: function(){
		this.setState({
			count:this.state.count + 1
		});
	},
    render: function() {
        return (
        	<button> Clicked {this.state.count} times! </button>
        );
    }
});
 
ReactDOM.render(
	<ClickCounter />,
    document.getElementById('container')
);

• Component Events

Events tell when to change the state of the components.

Useful Materials

React Website

Blog

Happy coding!!

….Sometime simple tip makes someone’s coding life easier…………