Basic understanding

Getting Started with Modularjs

A Modularjs component must export a function using:

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:

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.