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.

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

3. Go to the "Properties" tab and set the required path in the "Page URL".

UI Properties tab

We will set its path to '/about'.

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

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

3. Go to the properties tab.

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

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

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

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

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

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

Properties Tab

other IDEs

3. Open the config.json file and map the file inside 'aliases' as given in the snippet below:

{
    "aliases": [
        {
            "fileName": "products-page.tsx",
            "mounts": [
                {
                    "pageId": "adminDashboard",
                    "link": true,
                    "label": "Products"
                }
            ]
        }
    ]
}

In the above snippet:

• fileName: Specifies the file path relative to the root directory of the application.

  If the file was located in a sub-folder, filename would be: "/sub-folder/products-page.tsx"

• mounts: This key contains an array of objects specifying where and how the page should be mounted.

• pageId: This identifies the specific location within the admin console where the page will be mounted. It corresponds to a unique identifier (pageId) defined within the application's configuration file app.json.

  You can find the pageId for admin console in app.json file.

• link: A boolean value indicating whether the page should be linked directly in the admin console navigation. When set to true, the page will appear as a clickable link in the sidebar.

• label: This is the text label that will be displayed for the mounted page in the admin console sidebar. In this case, the label is set to 'Products'.

sortOrder: Use sortOrder to specify the order in which the mounted page should appear in the admin console sidebar. Pages with lower sortOrder values will appear higher in the list.

For example: if the sortOrder is set to 2, the 'Products' page will appear second in the list.

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.

---