Prodo是一个全栈React框架,可以更快地构建应用程序
Prodo是一个React框架,实现以尽可能少的样板编写高性能和可扩展的Web应用程序
React UI框架
共111Star
详细介绍
Prodo
Prodo is a React framework to write performant and scalable web apps with as little boilerplate as possible. View the Documentation. Read more about the motivation behind Prodo on our blog. Join us on Slack!
Key benefits
-
🎉 Drastically simplified state management -
✨ Absolutely minimal boilerplate, especially compared to Redux -
⚡️ Blazingly fast re-rendering, similar to MobX -
👯♀️ Handles async actions out of the box -
🔎 First class support for TypeScript -
✅ Easily testable -
🚀 Less to learn and shorter ramp up time -
💪 Powerful plugins for routing, local storage, authentication, database, and more...
Show me the code
Define your model:
// src/model.ts
import { createModel } from "@prodo/core";
interface State {
count: number;
}
export const model = createModel<State>();
export const { state, watch, dispatch } = model.ctx;
Use your state:
// src/index.tsx
import { model, state, dispatch, watch } from "./model";
const changeCount = (amount: number) => {
state.count += amount;
};
const App = () => (
<div>
<button onClick={() => dispatch(changeCount)(-1)}>-</button>
<h1>Count: {watch(state.count)}</h1>
<button onClick={() => dispatch(changeCount)(1)}>+</button>
</div>
);
const { Provider } = model.createStore({
initState: {
count: 0,
},
});
ReactDOM.render(
<Provider>
<App />
</Provider>,
document.getElementById("root"),
);
As you can see in the above example, the state type was used once and everything else is automatically inferred.
Examples
There are some examples on CodeSandbox that you can view and edit.
There are also many example apps that use Prodo in examples/
. We recommend looking at.
- Small to-do app example:
examples/todo-app
- Larger kanban app example:
examples/kanban
Running an example
Navigate to the example directory. For example:
cd examples/todo-app
Install dependencies
yarn
Run development server
yarn start
Navigate to localhost:8080.
Some examples have tests. You can run the tests with
yarn test
How to help?
- Help us gauge interest by starring this repository if you like what you see!
- Give feedback by opening an issue.
- Contribute code by opening a PR. See CONTRIBUTING for information on how to contribute code to the project.
Where to go next?
-
1441 Star
-
14934 Star
-
0 Star
-
1532 Star
-
1 Star