Skip to content

Emsa001/ft_react

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

19 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

ft_react

ft_react is a lightweight, learning-focused implementation of the React library. It replicates core React features such as hooks, context, and routing β€” and adds a few custom ones too.


πŸš€ Table of Contents


Motivation

The idea for this project came from my final project at 42 coding school (ft_transcendence), where using React was not allowed.
So I decided to write my own React-like implementation from scratch.


🌐 Showcase

Check out the live demo of ft_react:
πŸ”— https://ft-react.vercel.app/

This page demonstrates how the library works with routing, hooks, and custom features in action.


Features

  • Routing: Navigate between views without reloading the page.
  • Hooks: Includes useState, useStatic, useEffect, useRef, useContext, useNavigate, and useSyncExternalStore.
  • Context API: Basic support for global state using providers.

What is useStatic?

useStatic is a custom hook I always wanted in React. It behaves like useState, except its state persists across the entire application and is shared between components automatically β€” no need for context providers.

import React, { useStatic } from "react";

function AnotherComponent() {
    const [test, setTest] = useStatic("simple", 0);

    return (
        <div>
            <p>Value test in another component: {test}</p>
        </div>
    );
}

export function StaticStateSimple() {
    const [test, setTest] = useStatic("simple", 0);

    return (
        <div>
            <p>Simple static test: {test}</p>
            <AnotherComponent />
            <button onClick={() => setTest((prev) => prev + 1)}>Click</button>
        </div>
    );
}

The "simple" key ensures the value persists even after component unmount, and syncs between components.


What is useLocalStorage?

useLocalStorage is a custom hook that allows you to store and retrieve values from the browser's local storage.

import React, { useLocalStorage } from "react";

function App() {
    const [name, setName] = useLocalStorage("name", "Anonymous");

    return (
        <div>
            <h1>Hello, {name}!</h1>
            <input value={name} onChange={(e) => setName(e.target.value)} />
        </div>
    );
}

useLocalStorage is built on top of the useStatic, so the value persists after unmounts and changes will rerender all subscribed components.

Installation

To get started with ft_react, clone the repository and install the dependencies:

git clone https://github.com/emsa001/ft_react.git
cd ft_react
npm install

Usage

To start the development server:

npm run dev

Tailwindcss

You can integrate Tailwind CSS with PostCSS using either v3 or v4:

postcss.config.js

export default {
    plugins: {
        tailwindcss: {}, // or "@tailwindcss/postcss": {}, for Tailwind v4
        autoprefixer: {},
    },
};

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
    content: ["./src/**/*.{ts,tsx,html}"],
    theme: {
        extend: {},
    },
    plugins: [],
};

global.css (v3)

@tailwind base;
@tailwind components;
@tailwind utilities;

global.css (v4)

@layer theme, base, components, utilities;

@import "tailwindcss";
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css" layer(utilities);

Example

Basic Example

import React, { useState, useEffect, setTitle } from 'react';

const App = () => {
    const [count, setCount] = useState<number>(0);
    const [name, setName] = useState<string>("Anonymous");

    useEffect(() => {
        setTitle(`Hello, ${name}!`);
    }, [name]);

    return (
        <div>
            <h1>Hello, {name}!</h1>
            <p>Number: {count}</p>
            <button onClick={() => setCount((prev) => prev + 1)}>Increment</button>
            <input value={name} onChange={(e: any) => setName(e.target.value)} />
        </div>
    );
};

export default App;

Example Routing

<BrowserRouter>
    <Router src="/" component={<Home />} />
    <Router src="/404" component={<NotFound />} default />
</BrowserRouter>

Contributing

Contributions are welcome!
Feel free to open an issue or submit a pull request for improvements or bug fixes.


License

This project is licensed under the MIT License.

About

My own tiny implementation of react

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published