ReactJS | Using React.Js for writing powerful UI applications

What is React ?

React.js is a library maintained and created by developers at Facebook. The key takeaway from React.js: it's just concerned about the UI, it uses a Virtual DOM and smart algorithms for minimising slow DOM operations and manipulations. It only actually changes the DOM if there is a change from the Virtual DOM.

React is considerably fast in handling UI manipulation and performance tested by many authors see here  and here, where the compared with +AngularJS

I discussed in detail with +Raja Rao about React framework, that excited me about future potential of framework, clearly I see +Jeff Douglas have written some cool post and as well +Christophe Coenraets have written another.

I am writing this post, to document my learning experience with +Reactjs and my vision to scale it to visualforce pages and later to lighting pages/components, considering performance.

What is unique with React ?

React not only perform on client side but can also be rendered on server side, this uses Virtual DOM that can selectively renders sub-nodes based on state changes, which allow minimum DOM manipulation. In other words, without refreshing pages, you can refresh contents by manipulating DOM structure through javascript.

Getting Started

To jump start, you can use JSFiddle (see this) and Codepen (see here, there is trick involved).

Application Structure

Include reactjs on your html page  and JSXTransformer.js and when you write the components your script type should be script type="text/jsx"

Designing your Hello World component

Simply you can create component by using React.CreateClass and then call React.render() method to bind the dom object where you want to bind it

Now call the event by simply invoking it and attaching to specific div

Isn't it cool enough to see all code written through Javascript and barely any HTML code.

Using Props

Let's create the Comment component, which will depend on data passed in from its parent. Data passed in from a parent component is available as a 'property' on the child component. These 'properties' are accessed through this.props. Using props, we will be able to read the data passed to the Comment from the CommentList, and render some markup:

We access named attributes passed to the component as keys on this.props and any nested elements as this.props.children .

State

Every component in React has a props and state object, here is how you can set the state of a component using setStateMethod

Events 

Binding events is fairly easy, you can attach any event to any DOM object like show below

Random Twitter Handle Generator

Lets use chance.js to generate random string and bind event using this.props to update the twitter handle without refreshing page completely.

See the Pen Twitter Handler by Harshit Pandey (@oyecode) on CodePen.

Stay tuned for the next posted on Unidirectional Flow of React, Performance Measure and Application of React apps with Salesforce.com