This is a naive implementation of a React-like library designed to manage a virtual DOM, component lifecycle, and state management.
- Virtual DOM
- Component-based Architecture
- State Management with
useState - Effect Hook with
useEffect
npm install @rabarbra/ft_react
# Init a new project ./node_modules/@rabarbra/ft_react/scripts/init-project.js # or npx init-project # Start development server npm start # Create production build (it will create ./dist folder containing production build) npm run build
import ftReact from '@rabarbra/ft_react'; function App() { const [count, setCount] = ftReact.useState(0); return ( <div style={{ textAlign: 'center' }}> <h1>Hello, World!</h1> <p>Count: {count}</p> <button onClick={() => setCount(count + 1)}>Increment</button> </div> ); } const container = document.getElementById('app'); ftReact.render(<App />, container);
Creates a virtual DOM element.
const element = <div id="my-div">Hello, World!</div>;
Renders a virtual DOM element to the actual DOM.
const container = document.getElementById('app'); ftReact.render(element, container);
Manages state in a functional component.
function Counter() { const [count, setCount] = ftReact.useState(0); return ( <button onClick={() => setCount(count + 1)}> Count: {count} </button> ); }
Performs side effects in a functional component.
function Timer() { const [time, setTime] = ftReact.useState(0); ftReact.useEffect(() => { const interval = setInterval(() => setTime(time + 1), 1000); return () => clearInterval(interval); }, [time]); return <div>Time: {time}</div>; }
This project is licensed under the MIT License.