https://github.com/rabarbra/ft_react
Naive implementation of React-like library
https://github.com/rabarbra/ft_react
framework frontend react react-like react-like-library
Last synced: 3 months ago
JSON representation
Naive implementation of React-like library
- Host: GitHub
- URL: https://github.com/rabarbra/ft_react
- Owner: rabarbra
- Created: 2024-07-03T15:36:50.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-07-04T08:51:59.000Z (11 months ago)
- Last Synced: 2025-02-11T01:47:16.047Z (3 months ago)
- Topics: framework, frontend, react, react-like, react-like-library
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/@rabarbra/ft_react
- Size: 11.7 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Naive React-like Library
This is a naive implementation of a React-like library designed to manage a virtual DOM, component lifecycle, and state management.
## Features
- Virtual DOM
- Component-based Architecture
- State Management with `useState`
- Effect Hook with `useEffect`
## Installation
```bash
npm install @rabarbra/ft_react
```
## Usage
### Generate your app template
```bash
# 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
```
### Basic Example
```jsx
import ftReact from '@rabarbra/ft_react';
function App() {
const [count, setCount] = ftReact.useState(0);
return (
Hello, World!
Count: {count}
setCount(count + 1)}>Increment
);
}
const container = document.getElementById('app');
ftReact.render(, container);
```
## API
### `createElement`
Creates a virtual DOM element.
```jsx
const element =
Hello, World!;
```
### `render`
Renders a virtual DOM element to the actual DOM.
```jsx
const container = document.getElementById('app');
ftReact.render(element, container);
```
### `useState`
Manages state in a functional component.
```jsx
function Counter() {
const [count, setCount] = ftReact.useState(0);
return (
setCount(count + 1)}>
Count: {count}
);
}
```
### `useEffect`
Performs side effects in a functional component.
```jsx
function Timer() {
const [time, setTime] = ftReact.useState(0);
ftReact.useEffect(() => {
const interval = setInterval(() => setTime(time + 1), 1000);
return () => clearInterval(interval);
}, [time]);
return
Time: {time};
}
```
## License
This project is licensed under the MIT License.