Building a basic component using ReactJS

What is ReactJS ?

ReactJS is the V in the MVC, this is the most basic introduction given by people who are using it. Some people have actually used it with AngularJS to speedup the overall rendering of the view.

Introduction to ReactJS

React uses basic one way data flow from parent component to child components via props. The thing in which reactjs stands out is the way it updates the DOM.

ReactJS uses a virtual DOM implementation which on call to its render method intializes and returns a lightweight representation of what your DOM should be like. The actual markup injection into the DOM is now done by reading from the DOM representation genreated earlier. Now when the data changes, the render method is called again generating a new DOM representation which is matched against the previous one resulting in the return of a diff of both. This leads to only minimal changes being applied to DOM to represent the change in data.

Building your first Component

Every react components has two things, state and props. props are passed from parent component to the child component and can be accessed throgh this.props in a child. Whereas state is internal to a component and changes to the state causes the whole component view to render again.

Lets build a simple list search component to get started:

/** @jsx React.DOM */

var SearchComponent = React.createClass({
getInitialState: function () {
    return {
        listItems: []
    }
},
search: function (e) {
    var text = e.target.value;
    if(!text){
        this.setState({listItems: this.originalState});
    }
    var matchedItems = [];
    var regex = new RegExp(text, 'ig');
    this.originalState.map(function(item){
        if(item.heading.match(regex)){
            console.log(item);
            matchedItems.push(item);
        }
    });
    if(matchedItems){
        this.setState({listItems: matchedItems});
    }else {
        this.setState({listItems: []});
    }
},
componentWillMount: function () {
    this.originalState = [{
            heading: 'List Item One'
        }, 
        {
            heading: 'List Item Two'
        }, 
        {
            heading: 'List Item Threee'
        }, 
        {
            heading: 'List Item Four'
        }];
    this.setState({
        "listItems": this.originalState
    });
},
render: function () {  
    if(this.state.listItems.length){
        var list = this.state.listItems.map(function(item){
        return <li> {item.heading} </li>;
        });
    } else {
        var list = <li> No match found </li>
    }

    return <div><input type="text" placeholder="Search here.." onChange={this.search} name='searchField'/><ul>{list}</ul></div>;
}
});

React.renderComponent(<SearchComponent /> , document.body);

Lets have a look at all the methods in the SearchComponent and try to understand their significance.

getInitialState

This method returns the initial state for the component, we should define any default state in this method.

search

This is our own method where we have the search logic, we have just used a regular expression to match the text entered with the list content.

componentWillMount

This method is invoked just prior to the first rendering. If we call the setState method here, then the state is changed before the view is rendered. I would suggest you to read this official documentation on ReactJS site about the component life cycle.

render

Finally comes the render method. Whatever we return from this method is rendered on the view.


This is pretty simple independent list search component, the content for the lists can be passed through props from any parent component. Let me know if you have any doubts or find any improvement areas for this blog.

You can have a look at the complete working code here.

comments powered by Disqus