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.

Create and mount a page in admin console.

Creating a New Page

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

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.

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

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.

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

---

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.

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>
  )
}

mern.ai

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

other IDEs

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.

---