Create a page

Content

• Step 1: create the file
• Step 2: add the basic page layout
• Step 3: customize the page

Steps to creating a page

Step 1: create the file

To create a new page, the page must be added in client/pages/. All pages are React elements (hence the .jsx file extension).

First, think of the name of your page. The filename will be the url for the page. For example, the About page is in about.jsx and will have a url of wece.ece.illinois.edu/about. If I rename the About page to aboutus.jsx, the url will change to wece.ece.illinos.edu/aboutus.

Now create the file with the name of the page you are creating. Make sure it has the .jsx file extension.

Step 2: add the basic page layout

Inside the file, we want to setup the page. Copy the following code into your page:

import Layout from "../components/layout";
import SectionBody from "../components/sectionbody";
import SectionHead from "../components/sectionhead";

import Container from "react-bootstrap/Container";

export default function Page() {
  return (
    <Layout>
      <div className="container">
        <div className="content">
          <Container fluid className="section">
            <SectionHead title="" top={true} />
          </Container>
        </div>
      </div>
    </Layout>
  );
}

Now what does each part in this code mean?

First, we import different components. The first three are React elements that are defined in the client/components/ folder. These are reusable pieces of code that can be added to any page. The last import comes from react-bootstrap. This is a library of components that are already created and are ready to use.

import Layout from "../components/layout";
import SectionBody from "../components/sectionbody";
import SectionHead from "../components/sectionhead";

import Container from "react-bootstrap/Container";

Second, we define the page. In React, each page is a function that is exported. The return value of the function is the HTML code for that page.

export default function Page() {
  return (
    <Layout>
      <div className="container">
        <div className="content">
          <Container fluid className="section">
            <SectionHead title="" top={true} />
          </Container>
        </div>
      </div>
    </Layout>
  );
}

Step 3: customize the page

First, change the name of the function to match the page name. For example, if we were creating a login page, we would change it to this:

export default function Login() {
  return (
    <Layout>
      <div className="container">
        <div className="content">
          <Container fluid className="section">
            <SectionHead title="" top={true} />
          </Container>
        </div>
      </div>
    </Layout>
  );
}

Next, change the heading text at the top of the page. This is defined in the SectionHead component. Simply add your text to the title attribute. For example, for our login page, we could change the title to Login.

export default function Login() {
  return (
    <Layout>
      <div className="container">
        <div className="content">
          <Container fluid className="section">
            <SectionHead title="Login" top={true} />
          </Container>
        </div>
      </div>
    </Layout>
  );
}

Now, if you want to add more content to the page, put it inside the Container element.

export default function Login() {
  return (
    <Layout>
      <div className="container">
        <div className="content">
          <Container fluid className="section">
            <SectionHead title="Login" top={true} />
            put your code here!!
          </Container>
        </div>
      </div>
    </Layout>
  );
}