React: Page Layout

(Last Updated On: )

There are many aspects of React below is just a sample of how you could setup a ReactJs page. Look up what each section does.

Go here to review the React Life Cycle. It is important to review this and understand it so that you dont make mistakes during your development.

NPM Installs:

npm install create-react-class --save
npm install react --save
npm install react-dom --save

Class Setup:

window.jQuery = window.$ = require("jquery");
import React from "react";
import ReactDOM from "react-dom";
import "../css/newpage.css";
var createReactClass = require('create-react-class');

var NewPage = createReactClass ({
      getData: function() {
            var params = {};
            
            $.ajax({
                  url: "/my_web/service_method/",
                  dataType: "json",
                  data: params,
                  success: function(data) {
                        this.setState({
                              "data": data
                        }, () => { 
                              //If you want to do something after you get the data loaded
                        });
                  }.bind(this),
                  error: function(xhr, status, err) {
                        console.err("Bad");
                  }.bind(this)
            });
      },
      getInitialState: function() {
            return{
                  "data": [],
            };
      },
    componentDidMount: function() {
    },
    componentWillMount: function() {
          this.getData();
    },
      render: function() {

            return (
                  <div key="div">
                  </div>
            );
      }
});

ReactDOM.render(<NewPage/>, document.getElementById("app-container"));

Related