![](https://private-user-images.githubusercontent.com/775177/257637324-29935515-8c29-4254-b80e-ed590489738d.jpg?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTg3NTk5ODIsIm5iZiI6MTcxODc1OTY4MiwicGF0aCI6Ii83NzUxNzcvMjU3NjM3MzI0LTI5OTM1NTE1LThjMjktNDI1NC1iODBlLWVkNTkwNDg5NzM4ZC5qcGc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNjE5JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDYxOVQwMTE0NDJaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT01YTIxMTc4YTU0MWFlZTIzNGRiNmI2NGQyZTM5NjNlZGVjYmE1YjVhYjlmOTBjY2U4MjYzYWNkN2VhNjViMDgyJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.tPw0kst7b0jcNQErAOxQak2vX0Czq6Ez4DbBvjXWSxE)
An experimental, lightweight React alternative.
Table of contents:
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);
Read about React first, then come back here 🙏.
Name | React | Caveats |
---|---|---|
createElement |
createElement |
|
Fragment |
Fragment |
|
Name | React | Caveats |
---|---|---|
render |
render |
|
unmountAt |
unmountComponentAtNode | - |
Name | React | Caveats |
---|---|---|
useState |
useState | - |
useMemo |
useMemo | - |
useCallback |
useCallback | - |
useEffect |
useEffect | - |