https://github.com/rkrupinski/react

An experimental, lightweight React alternative.
https://github.com/rkrupinski/react

library react typescript ui yet-another

Last synced: about 1 month ago
JSON representation

An experimental, lightweight React alternative.

• Host: GitHub
• URL: https://github.com/rkrupinski/react
• Owner: rkrupinski
• License: mit
• Created: 2023-07-16T17:50:37.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2023-08-01T20:51:27.000Z (over 1 year ago)
• Last Synced: 2024-10-10T23:48:41.482Z (2 months ago)
• Topics: library, react, typescript, ui, yet-another
• Language: TypeScript
• Homepage: https://remarkable-rugelach-93aab7.netlify.app/
• Size: 142 KB
• Stars: 4
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


# @rkrupinski/react

An experimental, lightweight [React](https://react.dev/) alternative.

![Build status](https://github.com/rkrupinski/react/workflows/CI/badge.svg)

[![minified + gzip](https://badgen.net/bundlephobia/minzip/@rkrupinski/react)](https://bundlephobia.com/package/@rkrupinski/react)

Table of contents:

- [Getting started](#getting-started)

- [Example](#example)

- [API](#api)

  - [JSX](#jsx)

  - [Top-level API](#top-level-api)

  - [Hooks](#hooks)

## Getting started

Install:

```

yarn add @rkrupinski/react

```

Make sure to set:

```json

{

  "jsx": "react"

}

```

in your `tsconfig.json` -> `"compilerOptions"`.

Now you're all set:

```tsx

/* @jsx createElement */

/* @jsxFrag Fragment */

import {

  render,

  useState,

  useEffect,

  createElement,

  Fragment,

  type FC,

} from "@rkrupinski/react";

const App: FC = () => {

  const [clicked, setClicked] = useState(0);

  useEffect(() => {

    console.log(`Clicked ${clicked} times`);

  }, [clicked]);

  return (

    <>

      
Hello!

       {

          setClicked((c) => c + 1);

        }}

      >

        {clicked}

      

    >

  );

};


const root = document.querySelector("#root") as HTMLElement;

render(, root);

```

## Example

- [Live](https://remarkable-rugelach-93aab7.netlify.app/)

- [Source code](https://github.com/rkrupinski/react/tree/master/packages/example)

## API

Read about [React](https://react.dev/reference) first, then come back here 🙏.

### JSX

  

    

      Name

      React

      Caveats

    

  

  

    

      createElement

      

        createElement

      

      

        


          
Requires custom pragma (/* @jsx createElement */).

          
Limited to HTML elements (for the time being).

          
Weakly (any) typed host elements (for the time being).

        

      

    

    

      Fragment

      

        Fragment

      

      

        


          
Requires custom pragma (/* @jsxFrag Fragment */).

        

      

    

  


### Top-level API

  

    

      Name

      React

      Caveats

    

  

  

    

      render

      

        render

      

      

        


          
No third argument (callback)

          
No concurrent mode

          
One root/app at a time (for the time being).

        

      

    

    

      unmountAt

      

        unmountComponentAtNode

      

      -

    

  


### Hooks

  

    

      Name

      React

      Caveats

    

  

  

    

      useState

      

        useState

      

      -

    

    

      useMemo

      

        useMemo

      

      -

    

    

      useCallback

      

        useCallback

      

      -

    

    

      useEffect

      

        useEffect

      

      -