Creating a Page

Add Component

Add a component that you want in your page to be visible in:
app > components > hello > world.js

import React, { Component } from "react";
     
export default class HelloWorld extends Component {
  render() {
    return(
      <div>Hello World</div>
    );
  }
} 

Add Layout (Optional)

You can replace the code with your own header and footer (optional).

import React, { Component } from "react";
  
export default class Layout extends Component {
  render() {
    return (
      <div>
        <div className="text-center">This is the header</div>
        {this.props.children}
        <div className="text-center">This is the footer</div>
      </div>
    );
  }
}

Add Page routes

Add the routes to: src > pages > hello-world.js in the following format and export them.

import HelloWorld from "../app/components/hello-world";
import DefaultLayout from "../app/components/layout";       //Optional
  
const routes = [
  {
    path: "/",
    exact: true,
    component: HelloWorld,
    layout: DefaultLayout,        //Optional
  }
];  
  
export default routes;

Update the Routes

Add the page routes to src > routes.js

import { configureRoutes } from "./core/utils/bundler";  
  
// routes
import * as HelloWorld from "./pages/hello-world";  
  
export default configureRoutes([
  HelloWorld,
]);