hamroun-framework

Nexus Framework

A modern full-stack framework with JSX support and React-like features.

Features

• Virtual DOM implementation
• JSX support
• React-like hooks (useState, useEffect, useRef, useMemo, useCallback)
• Context API for global state management
• File-based routing system
• REST and GraphQL API integrations
• Performance optimizations
• Security best practices
• Developer tools

Installation

npm install nexus-framework

Quick Start

import { createElement, render, useState } from 'nexus-framework';

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

render(<Counter />, document.getElementById('root'));

Hooks

useState

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

useEffect

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  
  useEffect(() => {
    fetchUser(userId).then(userData => {
      setUser(userData);
    });
    
    return () => {
      // Cleanup code
    };
  }, [userId]);
  
  if (!user) {
    return <div>Loading...</div>;
  }
  
  return <div>{user.name}</div>;
}

Routing

import { Router, Route, Link } from 'nexus-framework';

function App() {
  return (
    <Router>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>
      
      <Route path="/" component={Home} exact />
      <Route path="/about" component={About} />
    </Router>
  );
}

Context API

import { createContext, useContext } from 'nexus-framework';

const ThemeContext = createContext('light');

function ThemeProvider({ children }) {
  return (
    <ThemeContext.Provider value="dark">
      {children}
    </ThemeContext.Provider>
  );
}

function ThemedButton() {
  const theme = useContext(ThemeContext);
  
  return <button className={`btn-${theme}`}>Themed Button</button>;
}

API Integration

import { useFetch } from 'nexus-framework';

function UserList() {
  const { data, error, loading } = useFetch('https://api.example.com/users');
  
  if (loading) {
    return <div>Loading...</div>;
  }
  
  if (error) {
    return <div>Error: {error.message}</div>;
  }
  
  return (
    <ul>
      {data.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

License

MIT