Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

rkrupinski/react

Folders and files

NameName
Last commit message
Last commit date

Latest commit

History

27 Commits

Repository files navigation

@rkrupinski/react

An experimental, lightweight React alternative.

Build status minified + gzip

Table of contents:

Getting started

Install:

yarn add @rkrupinski/react

Make sure to set:

{
 "jsx": "react"
}

in your tsconfig.json -> "compilerOptions".

Now you're all set:

/* @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 (
 <>
 <h1>Hello!</h1>
 <button
 onClick={() => {
 setClicked((c) => c + 1);
 }}
 >
 {clicked}
 </button>
 </>
 );
};
const root = document.querySelector("#root") as HTMLElement;
render(<App />, root);

Example

API

Read about React 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 -

About

An experimental, lightweight React alternative.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

AltStyle γ«γ‚ˆγ£γ¦ε€‰ζ›γ•γ‚ŒγŸγƒšγƒΌγ‚Έ (->γ‚ͺγƒͺγ‚ΈγƒŠγƒ«) /