# Basic understanding

### Getting Started with Modularjs

A **Modularjs component** must export a function using:

```js
module.exports = ({ useState }) => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Hello</h1>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};
```

#### Key points:

* The function **must return JSX-like HTML** to render.
* The argument object contains utilities provided by Nexo Maker, such as React-inspired hooks like `useState` and `useEffect`.
* **More hooks and utilities will be added** in the future, so expect this API to expand.

***

### Organizing Your Modular Components

To keep your project clean and maintainable, we recomend:

* Create a **`pages`** folder inside your expansion directory to hold all Modularjs components.
* If a component has multiple files (JSX, CSS, assets), create a dedicated folder for that component inside `pages`.

Example structure:

```
your-expansion/
  └── pages/
       ├── dashboard/
       │    ├── dashboard.jsx
       │    └── dashboard.css
       └── spinningSquare/
            ├── spinningSquare.jsx
            └── spinningSquare.css
```

This organization makes components easier to locate, update, and reuse.

***

### Registering Modular Routes

Your expansion’s **`main.js` must register your modular routes** to make them available in Nexo Maker, both as page or component:

```js
module.exports.init = async () => {
  const nm = api.nexomaker;

  nm.regRoute('dashboard', __dirname + '/pages/dashboard/dashboard.jsx');
  nm.regRoute('spinning-square', __dirname + '/pages/spinningSquare/spinningSquare.jsx');
};

module.exports.metadata = {
  id: "your-expansion",
  version: "0.1"
};
```

* `regRoute(id, filePath)` links an **ID** with the component’s file.
* You can then dynamically load these modules by their IDs inside Nexo Maker or other Modularjs components.

***

### Tips for Best Practices

* Always **register your modular pages** correctly with unique IDs.
* Use Modularjs components inside other Modularjs components to build complex UIs with nested modules.
* Keep stylesheets and assets organized alongside their components within the `pages` folder.
* Follow semantic naming conventions for easier navigation and understanding.


---

# 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://nexo-maker.gitbook.io/nexo-maker-docs/modular/basic-understanding.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.