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.

Create and mount a page in admin console.

Creating a New Page

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

Screenshot: Added Features
Main Features

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.

Screenshot: New File Modal
Blank UI/React Component

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".

UI Properties tab

We will set its path to '/about'.

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

Tailwind styled output: /about

🎉 That’s how you create a page in mern.ai using MagicJS framework.


Mounting a Page in Admin Console

What is mounting?

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.

Blank UI / React Component
  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'.

Properties Tab

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

Tailwind styled output: /admin

Go to /admin to view admin console.

🎉 That’s how you mount a page in mern.ai using MagicJS framework.


Last updated