Create a new page using React

In this tutorial, you will learn how to create a new page and seamlessly integrate it into the admin console using MagicJS framework.

The tool used in this guide is MERN.AI. You can download the free version by clicking here.

Creating a New Page

  1. Right-click on the main-features folder and choose 'New File'.

A feature in MagicJS represents a capability integrated into your application.

For e.g.: A 'newsfeed,' an 'Admin Dashboard,' or an 'authentication module' — each serves a distinctive feature within a social media project.

  1. Select 'Blank UI/React Component' and give an appropriate name to the file and click Proceed.

We will name it 'about-page’.

You will get a boilerplate UI file containing the following snippet:

import React from "react"

export default function Component(props: any) {
  return <div>Hello World</div>
}
Expand for Tailwind styled code.
import React from "react"

export default function Component(props: any) {
    return (
        <div className="flex flex-col items-center justify-center h-screen">
            <h1 className="font-semi-bold text-7xl tracking-wide">
                Hello World
            </h1>
        </div>
    )
}
  1. Go to the "Properties" tab and set the required path in the "Page URL".

We will set its path to '/about'.

  1. Visit the specified path '/about' in the browser to view the output.

Note that path routing configuration in the file app.json was automatically done by mern.ai using the 'Page URL' given in the Properties tab.


Mounting a Page in Admin Console

What is mounting?

Mounting refers to assigning a specific location or path within an admin console or system to a particular page or functionality, facilitating easy navigation and access for authorized users.

Ensure the 'Starter Kit' feature is added. If not, add the 'Starter Kit' feature by asking the AI using /add-template tag.

We will mount a new page in the admin console that comes pre-installed with the Starter Kit.

Sign in to the web application to access the admin console.

We can easily mount a page in mern.ai with just a few clicks! Below are the steps for mern.ai as well as other IDEs.

Steps:

  1. Create a new UI file named 'products-page' inside the main-features folder.

  1. Change the "Hello World" to "Products" in the file as shown below:

import React from "react"

export default function Component(props: any) {
    return <div>Products</div>
}
Expand for Tailwind styled code.
products-page.tsx
import React from "react"

export default function Component(props: any) {
  return (
    <div className="flex flex-col h-screen">
        <h1 className="text-2xl tracking-wide pl-3 pt-3">
          Products
        </h1>
    </div>
  )
}
  1. Go to the properties tab.

Leave the path field empty as we are mounting this page in the admin console.

  1. Add a mount target by clicking the + button.

  2. Choose 'adminDashboard' from the select menu as the mount target.

  3. Check the "Show link in sidebar" checkbox.

  4. Set a suitable label, we will use: 'Products'.

  5. Give a link sort order, for example: '4'.

Now, you'll find the 'Products' page seamlessly integrated into the sidebar, complete with a clickable link in the admin console.

Go to /admin to view admin console.


Last updated