React JS - Lifecycle and Overview

React JS is a JavaScript library put out by Facebook. I highly recommend taking advantage of using their .JSX files and using their shortcuts and possibly using the Sublime text editor (which has a great free version you can utilize). I will try and share my working knowledge of React JS in hopes it will clear up some things and that I can give someone a basic understanding and "English translation" with practical reasons on using it. This was very different from traditional web layouts and can be hard at first, but you will get used to it! It is very different from a static normal HTML page using CSS and that has some scripts hooked into it. React gives you an entire way to re-design your page around it. You essentially smash all of your HTML and JavaScript together into one JSX file.. call classes from your CSS for styling, and you can most certainly utilize jQuery and other plugins (datetime JS, Charts JS, etc etc..) inside of it. There may be some challenges in working with other plugins because they may work more linearly, and React JS follows a lifecycle with extreme conformity to it, and you have to work everything else around this lifecycle (this, by far, is the most complicated part of using React). This is an extremely long tutorial and will give you all of my experience in using React JS.

React is all about Components. You will build components and put your site together out of these. Think of a component like a reusable block.. maybe even like Minecraft. Minecraft is made entirely out of little blocks. Well, your site too can be made entirely out of little Components (blocks). You have to make a website (Minecraft creation) and it needs things like forms, category drop downs, admin tools, etc (Minecraft grass, wood, trees, etc) so you make ONE form component that has your whole form.. so you build that carefully.. and then whenever you need that form again, all you have to do is place that component in the new spot. So its like making a reusable stamp, or Minecraft block that can be used over and over again and will have the same functionality. By the way.. if you have Razer and model ViewBags and such on your page.. say bye bye to those.. React JS will replace those with its own faster methods of getting data.

The render function is the only REQUIRED function and is essentially the html you will put on your page. Each component can only return (in its render function) one main section/div/container of some kind with many others inside of it (basically.. you HAVE to wrap all your stuff in one bigger container) so React can handle it properly. This is the example off the the React JS main page:

var HelloMessage = React.createClass({
  render: function() {
    return 
Hello {this.props.name}
;
  }
});

React.render(, mountNode);

The actual component is called HelloMessage here. You can see where the component is used like a stamp/Minecraft block here (think of the part putting a whole component name into brackets as the "stamp" that calls this reusable thing):

Reusability! Not only that, but there's flexibility. You can note that there is a "name" property here. You can pass in different things. This is where you want to be careful when constructing your component/stamp/Minecraft block to be as general as you need it and to take in different types of values for properties and be able to deal with it. Passing in functions or values for properties gives you flexibility to utilize or turn on/off features in React.

Let me give you a more practical example of this as a dashboard component example. High level: You have a dashboard and it has a bunch of chart widgets on the dashboard. Dashboard = mommy component. Little charts = individual little baby components. Little baby components only are on the page because dashboard exists, and they can get information (genetics???) from their parent. There will be a parent MyDashboard component which adds child ChartWidget components onto the page. The parent MyDashboard will do an API call to get the attributes of the child (for ex. id/name, size, order etc) Each child component is responsible for its own contents, so based on the id/name its grabbed by from the parent, it will know its identity and do its own API call to get its data (chart or whatever functionality you want). I have taken out much of the nitty gritty functionality of this code to simplify the example and replaced everything with very generic info for the sake of the example.

This is the parent MyDashboard component:

/** @jsx React.DOM **/

var MyDashboard = React.createClass({
    getInitialState: function(){
        return {
            Charts: []
        };
     },
     componentDidUpdate: function(){
         // The debugger statement will let you hit the break point on the browser's developer tools. VERY USEFUL. 
         debugger;
    
         // Just some if else logic to deal with the multiple re-renders
         if (this.initialSetup === true){
            this.funFunction();
            this.initialSetup = false;
         }

         if (this.rerenderCharts === true){
            this.funFunction();
            this.rerenderCharts = false;
         }
    
         if (this.resetCharts === true){
            this.rerenderCharts = true;
            this.resetCharts = false;
            this.forceUpdate();
         }
     },
    funFunction: function(){
        // Function work here
    },
    componentDidMount: function(){
        this.updateFunctions = {};
        this.resetCharts = false;
        this.initialSetup = true;

        // Most of your initial API calls for loading the page will go under componentDidMount 
        $.get('/api/YAYapi', {}, function(graphlist){
            var charts = graphlist.map(function(result){
                return (
                        
                );
             }.bind(this));
        // setting state will cause "charts" to be put into the state variable and then the page will re-render (hit the render function)
        this.setState({Charts: charts});
        }.bind(this));
    },
    render: function(){
        return (
            

                

                    
                         Add Chart
                    
                            
                                Chocobos
                                Moogles
                            
                        
                    
                
                

                    {this.resetCharts === false ? (
{this.state.Charts}
) : }
                
            
        );
    },
    handleAddChartOnClick: function(){
        // functionality for adding a chart
    },
    addWidgetObject: function(widgetName){
        var title = "";
        var type = "";

        // create widget object here 
    },
    resetToDefault: function(){
        this.resetCharts = true;
        this.childCallbacks = [];
  
        $.get('/api/stuff', {}, function(graphlist){
        var charts = graphlist.map(function(result){
       
        return (
            
        );
        }.bind(this));
            this.setState({Charts: charts});
        }.bind(this));
    }
});

The following is the child ChartWidget component:

/** @jsx React.DOM **/

var ChartWidget = React.createClass({
    getInitialState: function(){
         return {
             ChartData: {}
         };
     },
    componentDidMount: function(){
        var start = this.props.result.start;
        var end = this.props.result.end;
  
        if(this.props.result.DateSelection){
        var dates = this.getDatesFromRange(this.props.result.DateSelection);
        start = dates.StartDate;
        end = dates.EndDate;
        }
  
        this.getChart(start, end, this.props.result.ChartName, this.props.result.ChartType);
    },
    render: function(){
        if (this.props.result.DateSelection){
        var dateRange = this.props.result.DateSelection;
        this.getDatesFromRange(dateRange);
        }
        
        return(
        

            

                
{this.props.result.ChartTitle}
                    
                        1 day
                        10 days
                        100 days