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:

  1. npm install create-react-class --save
  2. npm install react --save
  3. npm install react-dom --save

Class Setup:

  1. window.jQuery = window.$ = require("jquery");
  2. import React from "react";
  3. import ReactDOM from "react-dom";
  4. import "../css/newpage.css";
  5. var createReactClass = require('create-react-class');
  6.  
  7. var NewPage = createReactClass ({
  8.       getData: function() {
  9.             var params = {};
  10.             
  11.             $.ajax({
  12.                   url: "/my_web/service_method/",
  13.                   dataType: "json",
  14.                   data: params,
  15.                   success: function(data) {
  16.                         this.setState({
  17.                               "data": data
  18.                         }, () => { 
  19.                               //If you want to do something after you get the data loaded
  20.                         });
  21.                   }.bind(this),
  22.                   error: function(xhr, status, err) {
  23.                         console.err("Bad");
  24.                   }.bind(this)
  25.             });
  26.       },
  27.       getInitialState: function() {
  28.             return{
  29.                   "data": [],
  30.             };
  31.       },
  32.     componentDidMount: function() {
  33.     },
  34.     componentWillMount: function() {
  35.           this.getData();
  36.     },
  37.       render: function() {
  38.  
  39.             return (
  40.                   <div key="div">
  41.                   </div>
  42.             );
  43.       }
  44. });
  45.  
  46. ReactDOM.render(<NewPage/>, document.getElementById("app-container"));