An overview of ReactJS with JSX for dynamic UI generation

React was chosen as the technology for building the web application of my GSoC 2015 project. This is a writeup of the concepts that I could get ahold of within almost a week working with React.

ReactJS basically allows one to look at and organize a web interface in a sense of components that are arranged in a hierarchical manner. The key powerful thing it provides is the ability to incorporate a state to each of those components so that a dynamic change to the web interface is made as simple as setting the value of some variable in JavaScript. A change to the state of the component automatically triggers the UI of the component to be refreshed and re rendered. Changes to the state may happen in many possible ways including an action from the user. This action in almost all the cases can be considered as an event.

Another interesting thing I came across with ReactJS is JSX. JSX is basically an object oriented programming language that can be used with React to create that component hierarchy I mentioned earlier about. The JSX syntax basically resembles that of XML and makes it pretty easy to understand what that code does with the UI. Say we have a React component named ‘Results’ and the tag <Results /> will magically output what ever HTML or JSX that was specified in the render method of that particular component. This ought to give you some idea on how the hierarchy happens too. If it was some JSX tags that were specified in the render method, what we have is a nested component inside another component. The following example will help with any confusions.

var DateInput = React.createClass({
  render: function () {
    return (
      <div>
        <span className="partial-date">
          <input maxLength="4" placeholder='YYYY' size="4" className="partial-date-year" />
          -
          <input maxLength="2" placeholder='MM' size="2" className="partial-date-month" />
          -
          <input maxLength="2" placeholder='DD' size="2" className="partial-date-day" />
        </span>
      </div>
    );
  }
});

var ValidString = React.createClass({
  render: function () {
    return (
      <div><span>'Please enter a valid input.'</span></div>
    );
  }
});

var DateRangeField = React.createClass({
  render: function () {
    return (
      <div>
        <h3>From</h3>
        <DateInput />
        <h3>To</h3>
        <DateInput />
        <ValidString />
      </div>
    );
  }
});

As shown above each react component will have its own render function which specifies its contribution to the UI. Above 3 classes are the simplest form where none of them have any state incorporated to them. What I intended on emphasizing here is the fact that the components DateInput and ValidString are enclosed in the DateRangeField and

React.render(DateRangeField, document.getElementById("content"));

would render the built hierarchy into HTML as follows.

<div>
  <h3>From</h3>
  <div>
    <span className="partial-date">
      <input maxLength="4" placeholder='YYYY' size="4" className="partial-date-year" />
      -
      <input maxLength="2" placeholder='MM' size="2" className="partial-date-month" />
      -
      <input maxLength="2" placeholder='DD' size="2" className="partial-date-day" />
    </span>
  </div>
  <h3>To</h3>
  <div>
    <span className="partial-date">
      <input maxLength="4" placeholder='YYYY' size="4" className="partial-date-year" />
      -
      <input maxLength="2" placeholder='MM' size="2" className="partial-date-month" />
      -
      <input maxLength="2" placeholder='DD' size="2" className="partial-date-day" />
    </span>
  </div>
  <div><span>'Please enter a valid input.'</span></div>
</div>

The following component demonstrate the use of function call backs on event triggers.

var SearchBox = React.createClass({
  handleTextInput: function (event) {
    if (event.keyCode === 13) {
      var input = event.target.value;
      console.log(input);
    }
  },

  render: function () {
    return (
      <input id="search-box" type="text" onKeyDown={this.handleTextInput} />
    );
  }
});

The onKeyDown={this.handleTextInput} property specied in the input tag tells React to execute the handleTextInput method defined above it when ever a keydown event fires. The SyntheticEvent object that corresponds to the event that occurred will automatically be passed into the function when it is being called without the user explicitly needing to specify it.

The following component I have built demonstrates the use of the state of a component to decide whether a part of its render method HTML code needs to be visible on the UI or not.

var Panel = React.createClass({
  getInitialState: function () {
    return {collapseState: false};
  },

  handleTitleClick: function (event) {
    event.preventDefault();
    this.setState({collapseState: !this.state.collapseState});
  },

  render: function () {
    return (
      <div>
        <div className="panel-heading" id="headingOne">
          <div className="panel-title">
            <a href="#" id={"title-artist"} onClick={this.handleTitleClick}>
              Artist
            </a>
          </div>
        </div>
        {this.state.collapseState &&
          <div id={"collapse-artist"} className="panel-collapse" >
            Visible/ Invisible Artist Content
          </div>
        }
      </div>
    );
  }
})

Using the && operator is a simpler way of saying display the one after it only when the expression prior to it evaluates to true. So what this component basically does is clicking on the anchor tag hyperlink would fire the event flipping the value of the state variable collapseState there by toggling the visibility of the collapse-artist div.

Another useful feature in React is the ability to pass properties to the child components in the hierarchy when they are specified in JSX. For example say there is a component named Content. When we specify that component using JSX anywhere, we have the ability to pass it any properties of any types we like.

<Content property1="This is property string" property2={prop: "This is property ob"} />

All these property values can be accessed inside the Content component simply by referring them as this.props.property1 which will return the string and this.props.property2 which will return the object.

This is some basic overview on what ReactJS can do. The React documentation has all these plus many more other things looked much deeper into depth. One thing is for sure… I am in love with React!