Because its time for a better client side rendered framework
Embrace a modern UI framework that simplifies component design. With Rezact, you get the power of reactivity without the boilerplate.
No hook rules... create and use signals ANYWHERE in your code.
State Management has never been easier than this. Just start with a simple module and some signals.
export const userStore: any = {
$isLoggedIn: false,
$userName: "",
$email: "",
};
export function logIn(data) {
userStore.$isLoggedIn = true;
userStore.$userName = data.username;
userStore.$email = data.email;
}
export function logOut() {
userStore.$isLoggedIn = false;
userStore.$userName = "";
userStore.$email = "";
}
Show me moreNo need to install an external dependency, Rezact comes with a built in router that is easy to use.
import { useRouter } from "rezact/router";
import { Page as FourOhFour } from "./Pages/404";
const router = useRouter();
router.addRoute("/404", FourOhFour);
const routes = [
{
path: "/",
component: () => import("src/Pages/LandingPage"),
dataLoader: () => {} // COMING SOON!
title: "Rezact",
},
{
path: "/docs",
component: () => import("src/Docs/PageOne.mdx"),
dataLoader: () => {} // COMING SOON!
title: "Rezact",
},
{
path: "/users/:userId",
component: () => import("src/Pages/Users"),
dataLoader: () => {} // COMING SOON!
title: "Rezact Users",
},
];
router.addRoutesFromConfig(routes);
export { router };
Forget everything you know about creating forms in react... Literally, forget it all. This is the easiest way to create forms. PERIOD.
import { Form } from "./Form";
import { Btn } from "./Buttons";
import { Input } from "./ValidatorInput";
export function LandingForm() {
const submit = (data) => {
console.log(data); // { email: "[email protected]" }
};
return (
<Form onSubmit={submit}>
<Input name="email" placeholder="Email" />
<Btn type="submit">SubmitBtn>
Form>
);
}
Ok, here's a form with validation.
import { Form } from "./Form";
+import { Input } from "./ValidatorInput";
export function LandingForm() {
const submit = (data) => {
console.log(data); // { email: "[email protected]" }
};
return (
);
}
Fine... 😏
import { Form } from "./Form";
import { Input } from "./ValidatorInput";
+import { luhnCheck } from "./validators";
export function LandingForm() {
const submit = (data) => {
console.log(data); // { email: "[email protected]" }
};
return (
);
}