Installation — MeoNode UI

Getting started with @meonode/ui is straightforward. This guide will walk you through the necessary steps to install the library and set up your project to begin building your UI.

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js: Version 16.x or higher.
• npm or Yarn: Latest stable version.
• React: Version 18.x or higher.
• TypeScript: While @meonode/ui can be used with JavaScript, we highly recommend using TypeScript to take full advantage of its type-safe design and excellent developer experience.

Step 1: Install @meonode/ui

You can install @meonode/ui and its peer dependencies using either npm or Yarn.

Using npm:

npm install @meonode/ui react react-dom

Using Yarn:

yarn add @meonode/ui react react-dom

This command will install the main @meonode/ui package along with react and react-dom, which are essential peer dependencies for any React project.

Step 2: Set up Your Application Root

@meonode/ui integrates directly with React's rendering mechanism through its Node factory and the render() method on the created node. This allows you to wrap your main application component (or React.StrictMode) with @meonode/ui's node structure.

Typically, you'll do this in your main entry file (e.g., src/index.ts).

// src/index.ts
import React from 'react';
import ReactDOM from 'react-dom/client';
import { Node } from '@meonode/ui'; // Import the Node factory
import App from './App'; // Your main application component

// React's StrictMode is imported directly for use with Node
const StrictMode = React.StrictMode;

ReactDOM.createRoot(document.getElementById('root')!).render(
  // Use Node to wrap StrictMode and your App component
  Node(StrictMode, {
    children: Node(App)
  }).render(), // Call .render() on the created node to get the React element
);

How this works:

• Node(StrictMode, { children: App() }): This uses the Node factory to create a @meonode/ui node that wraps React's StrictMode. The children prop is used to embed your main App component within this structure.
• .render(): This method, available on the @meonode/ui node instance, converts the @meonode/ui node tree into a standard React element, which ReactDOM.createRoot(...).render() expects.

Step 3: Start Building Your UI!

With @meonode/ui installed and your application root set up, you're now ready to start building your UI. You can begin importing components like Div, Button, H1, and more, and compose them directly with styles and props.

Example: src/App.ts

import {Component, Div, H1, Button} from '@meonode/ui';
import {useEffect} from "react";

const App = () => {

  useEffect(() => {
    console.log("App mounted");
  }, []);

  return Div({
    padding: '40px',
    backgroundColor: 'whitesmoke',
    minHeight: '100vh',
    minWidth: '100vw',
    children: [
      H1('Hello, Meonode!', {
        fontSize: '2.5rem',
        color: 'rebeccapurple',
        marginBottom: '20px'
      }),
      Button('Click Me', {
        padding: '12px 24px',
        backgroundColor: 'dodgerblue',
        color: 'white',
        borderRadius: '8px',
        cursor: 'pointer',
        onClick: () => alert('Meonode is awesome!')
      })
    ]
  }).render();
};

export default App;

Next Steps

Now that you have @meonode/ui successfully installed, dive into the following sections to explore its capabilities:

• Usage: Learn the fundamental principles and common patterns for building user interfaces with @meonode/ui.
• Styling: Advanced styling with css prop, pseudo-classes, media queries, and animations.
• Theming: Learn how to customize your design system and access theme tokens for consistent styling.
• Framework Integration: Learn how to integrate @meonode/ui with frameworks like Next.js, Vite, etc.
• FAQ: Find answers to common questions and troubleshooting tips.

Happy coding with @meonode/ui!