# Create a new page using React

{% hint style="success" %}
The tool used in this guide is [MERN.AI](https://mern.ai/). You can download the free version by clicking [here](https://mern.ai/download).
{% endhint %}

{% embed url="<https://youtu.be/WhD-Dfl13yo?feature=shared>" %}
Create and mount a page in admin console.
{% endembed %}

## Creating a New Page

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

<figure><img src="/files/w5rUOHNlBfQZpmr8Ucab" alt="Screenshot: Added Features" width="229"><figcaption><p>Main Features</p></figcaption></figure>

{% hint style="info" %}
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.
{% endhint %}

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

<figure><img src="/files/e8OYUcKpkMe6bJnmGPFr" alt="Screenshot: New File Modal" width="563"><figcaption><p>Blank UI/React Component</p></figcaption></figure>

> We will name it 'about-page’.

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

```tsx
import React from "react"

export default function Component(props: any) {
  return <div>Hello World</div>
}
```

<details>

<summary>Expand for Tailwind styled code.</summary>

{% code lineNumbers="true" fullWidth="true" %}

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

{% endcode %}

</details>

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

<figure><img src="/files/wFvx6lWmZ1AVjdgYksn2" alt="" width="268"><figcaption><p>UI Properties tab</p></figcaption></figure>

> We will set its path to '/about'.

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

<figure><img src="/files/fhv7RCzHIJEilit8BRl3" alt=""><figcaption><p>Tailwind styled output: /about</p></figcaption></figure>

{% hint style="success" %}
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.
{% endhint %}

:tada: That’s how you create a page in [mern.ai](https://mern.ai/) using MagicJS framework.

***

## Mounting a Page in Admin Console

{% hint style="success" %}

#### 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.
{% endhint %}

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

{% hint style="info" %}
Sign in to the web application to access the admin console.
{% endhint %}

> We can easily mount a page in [mern.ai](https://mern.ai/) with just a few clicks! Below are the steps for [mern.ai](https://mern.ai/) as well as other IDEs.

#### Steps:

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

<figure><img src="/files/j471iNTPSKizJfPosi2A" alt="" width="563"><figcaption><p>Blank UI / React Component</p></figcaption></figure>

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

{% code fullWidth="false" %}

```tsx
import React from "react"

export default function Component(props: any) {
    return <div>Products</div>
}
```

{% endcode %}

<details>

<summary>Expand for Tailwind styled code.</summary>

{% code title="products-page.tsx" lineNumbers="true" %}

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

{% endcode %}

</details>

{% tabs %}
{% tab title="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`'.

<figure><img src="/files/grD8oeBXG7liZ911NHOq" alt="" width="262"><figcaption><p>Properties Tab</p></figcaption></figure>
{% endtab %}

{% tab title="other IDEs" %}
3\. Open the `config.json` file and map the file inside 'aliases' as given in the snippet below:

```json
{
    "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'.

{% hint style="success" %}
**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.
{% endhint %}
{% endtab %}
{% endtabs %}

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

<figure><img src="/files/qkYUVW3URT016QkRt5R4" alt=""><figcaption><p>Tailwind styled output: /admin</p></figcaption></figure>

> Go to `/admin` to view admin console.

:tada: That’s how you mount a page in [mern.ai](https://mern.ai/) using MagicJS framework.

***


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://skyslit.gitbook.io/magicjs/basic-guide/create-a-new-page-using-react.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.