users.js

React-like Components for users.js

Leverage familiar React patterns with a users.js twist. Build reusable UI components with the power of functional programming and declarative syntax.

Start Building View Advanced
usersjs(() => {\n \n

This is a React-like component

\n \n});

Core Features

Component Structure

Create reusable components using a simple, functional approach. Every component is a self-contained unit with its own logic and styling. 

const Card = ({ title, children }) => {\n  return usersjs(() => {\n    h2(class: 'text-xl font-bold mb-2') => title,\n    div(class: 'p-4 bg-white rounded') => children\n  });\n};

Tip: Use arrow function syntax for concise component definitions.

Props System

Pass data between components with type-safe props. The system handles prop validation and fallback values automatically. 

<FormInput \n  id="username"\n  label="Enter username"\n  placeholder="johndoe" \n/>;
All components receive implicit props for styling and event handling through the users.js system.

Usage Examples

Basic Component

Create a simple component with default props and custom styling.

const Button = ({ text, onClick }) => {\n  return usersjs(() => \n    button({ \n      onClick, \n      class: 'px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded' \n    }, () => text)\n  );\n};

Usage:

<Button onClick={() => alert('Clicked!')}>Click Me</Button>

Conditional Rendering

Control component visibility and content based on state or props.

const Alert = ({ show, message }) => {\n  return usersjs(() => {\n    if (show) {\n      div({ class: 'bg-red-100 p \n                p-4 rounded text-red-700' }) => message;\n    }\n  });\n};

State usage:

let showError = false;\n\n<Alert show={showError} message="Form error!" />\n\n<Button onClick={() => showError = true}>Show Alert</Button>

Advanced Patterns

Custom Hooks

Create reusable logic for state management, side effects, and complex interactions. 

const useCounter = (initial = 0) => {\n  let count = initial;\n\n  return {\n    increment: () => count++,\n    decrement: () => count--,\n    value: count\n  };\n};

Tip: Prefix custom hooks with "use" for consistency with React patterns.

State Management

Use context providers for shared state across components while maintaining unidirectional data flow. 

const ThemeContext = createContext();\n\nconst App = () => {\n  let theme = 'light';\n\n  return usersjs(() => {\n    provide(ThemeContext, theme);\n    return \n      \n        
\n        \n      \n  });\n};
Consumers components access context values via useContext(ThemeContext).

Getting Started

1

Create Component

Define your component using the functional usersjs pattern. All components are automatically scoped. 

const MyComponent = () => {\n  return usersjs(() => \n    div( => 'Hello from users.js Component')\n  );\n};
2

Add Props

Pass data into components using named props. Users.js enforces type checking at build time. 

const Greeting = ({ name }) => {\n  return usersjs(() => \n    h1( => `Hello, {name}!`)\n  );\n};
3

Use in App

Render your components within the main application structure using simple import syntax. 

const App = () => {\n  return usersjs(() => {\n    \n    \n  });\n};

Community Resources

Access the wealth of resources created by our community to accelerate your development.

Community Component Library

Find 100+ community-maintained components for authentication, UI kits, and data visualization.

View Library

Guided Tutorials

Step-by-step guides covering advanced topics like routing, state management, and performance optimization.

Start Learning

Best Practices Guide

Learn how to architect large applications, use testing frameworks, and implement design systems.

Read Guide