As I want to accomplish my promise in the previous post. I’m here to speak about React.js, mostly from what I understand about it personally with some reliable resources. To understand React.js easier, I think it’s worth thinking about it as a non-technical guy first because React.js is really natural as a blank mind thinking.

From a child look

Before you get your hand dirty on coding a new front-end page using React.js, let’s spend at least a few minutes thinking the React way:

  • What will the page look like?
  • Which contents does the page have?
  • For each section on the page, its data is changeable or not?

Then, just make the general layout first, and make some abstract objects for the inside sections of the page. Some static and non-reusable sections should be coded directly while more dynamic and reusable sections should be called reusable components which are implemented in other files. The key idea is that we use a top-down analyzing approach to implement the front-end code with React.js. From the whole big page, we slit it into some smaller sections; in each smaller section, we slit it into smaller objects; in each small object, we slit it into some independent React classes which perform specific roles. Those independent React classes should be implemented in separate files which are arranged reasonably into folders, and subfolders such as under forms, components, mixins, …

From an engineer look

Now, let’s move on to another important part, how to implement a simple React class that can be used as an object from other bigger sections, and pages in React app.

A React object contains 2 types of variables: static and dynamic

  1. Static: the parameter passed by the caller of the object, which can be accessed by this.props
  2. Dynamic: the variable inside the object which will be changed several times or very frequently, which can be accessed by this.state

Now is the demo of how a simple React object works and some of its built-in callbacks (`getInitialState`, `componentDidMount`)

var _ = require('lodash');
var React = require('react');

var FunnyIcon = require('./components/FunnyIcon');
var TextFormatMixin = require('./mixins/TextFormatMixin');

var RecentActivities = React.createClass({
  mixins: [TextFormatMixin],

  getInitialState: function() {
    return {
      totalActivities: 0
    };
  },

  componentDidMount: function() {
    this.setState({totalActivities: this.props.LoanActivityList.length()});
  },

  render: function() {
    var activities = this.props.LoanActivityList;

    return (
      <div>
        <p>
          Total number of activities is {this.state.totalActivities}.
          "Let's take a look"</FunnyIcon name={'eye'}>
        </p>
        <ul className="list-items">
          {
            _.map(activities, function(activity) {
              return (
                <li className="activity-item" key={activity.id}>
                  {activity.name}
                  <br/>
                  <i>
                    <b>{activity.status}</b> 
                    updated at {this.fromNow(activity.updated_at)}
                  </i>
                </li>
              )
            })
          }
        </ul>
      </div>
    )
  }
});

module.exports = RecentActivities;

Besides using props for static variables which directly affect the style or settings of the React object, we still can use native javascript variables for the values never changed regardless of the type of object. On the same topic, if we need some static variables based on some specific cases which are should be called from the back-end server, don’t hesitate to make some Ajax calls on the way.

The React callbacks:

  • componentWillMount
  • componentDidMount
  • componentWillReceiveProps
  • shouldComponentUpdate
  • componentWillUpdate
  • componentDidUpdate
  • componentWillUnmount

The names are very descriptive. Let’s take a closer look in its official document.

The JSX notations:

  • use className instead of class
  • style: style={{‘color’: ‘black’}}

How to use mixin:

Very simple. Require it as a plugin then add it to the array of mixins in the React.js class

(FunnyIcon in `First example – Simple React component` above)

How to use the component:

Even simpler. Require it as a plugin then call it as an HTML tab wherever you in inside the `return` block of the React.js render method.

(fromNow function from TextFormatMixin in `First example – Simple React component` above)

How to make the website dynamic:

For data that you want to change on the fly, don’t pass props data to it but give it data by state variable. On the way, each time you change the corresponding state variable, React.js will reload whatever you pass that state variable as a value or parameter.

Conclusions

I think it’s the best way to get started by taking a simple, overall look before going to the details and that’s the structure of this post so hope you guys enjoy it! From the day I started using React.js, I saw the things inside it so weird but very soon, I realized that what was weird was me because the way React works is very straightforward, very natural. The reason I couldn’t adapt it from the beginning is because the way I thought was not natural. :v

It’s just some basic starts to work with React.js. Hope you guys find something useful then get it more yourself and spread it to the world (me too :D).

Check out more important stuff here:

http://facebook.github.io/react/docs/jsx-in-depth.html

http://facebook.github.io/react/docs/transferring-props.html

http://facebook.github.io/react/docs/reusable-components.html