{"id":13527580,"url":"https://github.com/unadlib/reactant","last_synced_at":"2025-05-15T14:07:33.823Z","repository":{"id":37081843,"uuid":"233418673","full_name":"unadlib/reactant","owner":"unadlib","description":"A framework for building React applications","archived":false,"fork":false,"pushed_at":"2025-05-07T19:25:58.000Z","size":14635,"stargazers_count":231,"open_issues_count":12,"forks_count":14,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-05-07T19:43:06.721Z","etag":null,"topics":["actor-framework","actor-model","dependency-injection","framework","mutative","react","react-applications","react-native","reactant","redux","server-side-render","server-side-rendering","service-worker","shared-web-apps","shared-worker","state-management","typescript"],"latest_commit_sha":null,"homepage":"https://reactant.js.org/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/unadlib.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2020-01-12T16:01:52.000Z","updated_at":"2025-05-07T19:25:01.000Z","dependencies_parsed_at":"2023-10-03T21:17:26.712Z","dependency_job_id":"ee21c7aa-b1bb-4b32-9fb8-8127283e828e","html_url":"https://github.com/unadlib/reactant","commit_stats":{"total_commits":1132,"total_committers":4,"mean_commits":283.0,"dds":0.03180212014134276,"last_synced_commit":"87c7712509ae96d6564f647c8bbba978f4179f43"},"previous_names":[],"tags_count":183,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unadlib%2Freactant","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unadlib%2Freactant/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unadlib%2Freactant/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unadlib%2Freactant/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/unadlib","download_url":"https://codeload.github.com/unadlib/reactant/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254355335,"owners_count":22057354,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["actor-framework","actor-model","dependency-injection","framework","mutative","react","react-applications","react-native","reactant","redux","server-side-render","server-side-rendering","service-worker","shared-web-apps","shared-worker","state-management","typescript"],"created_at":"2024-08-01T06:01:52.575Z","updated_at":"2025-05-15T14:07:28.809Z","avatar_url":"https://github.com/unadlib.png","language":"TypeScript","readme":"\u003ca href=\"https://reactant.js.org/\" target=\"_blank\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/unadlib/reactant/master/logo.svg\" height=\"120\" alt=\"Reactant Logo\" /\u003e\u003c/a\u003e\n\n---\n\n![Node CI](https://github.com/unadlib/reactant/workflows/Node%20CI/badge.svg)\n[![npm version](https://badge.fury.io/js/reactant.svg)](http://badge.fury.io/js/reactant)\n![license](https://img.shields.io/npm/l/reactant)\n\nReactant - A framework for building React applications\n\n## Motivation\n\nReact is a JavaScript library for building user interfaces, but when we want to develop applications based on React, we often have to do a lot of building configuration and many other libraries choices(Picking and learning a React state library and router library, etc.). We also need to consider how our business logic should be abstracted and structured. Everyone who uses React practices their own perception of how React is built, but it doesn't allow us to quickly focus on the business logic itself. As the application business grows in size, we urgently need a framework that can be easily understood and maintained.\n\nAnd for the structured design of the application's business logic, separation of concern is a good idea. It requires clear boundaries of liability to avoid low maintainability when UI logic and business logic are mixed. We always want to focus on business logic when building applications. It is one of the business core values of an application. We want it to be easy to maintain, and test. Redux remains most popular state library in React. It is fully accord with immutable principles for React. Redux is just a state container, and we're often at a loss for how to really manage those states. We need a framework for scalable, loosely coupled and easily maintainable React applications. \n\n---\n\n**In order to solve these problems, Reactant was created. It's a framework for React.**\n\n## Features\n\n- Dependency injection\n- Immutable state management\n- View module\n- Redux plug-in module\n- Test bed for unit testing and integration testing\n- Routing module\n- Persistence module\n- Module dynamics\n- [reactant-share - Shared web app support multiple browser windows](https://github.com/unadlib/reactant/tree/master/packages/reactant-share)\n  - Shared tab\n  - SharedWorker\n  - Detached window\n  - iframe\n- Server-side Rendering\n\n## Q\u0026A\n\n1. How does it differ from Angular?\n\nIt is different everywhere except for dependency injection.\n\n2. What is the biggest advantage of Reactant?\n\nIt can architect a variety of large React projects. Reactant advocates a lightweight UI, separating the concerns of the application and UI to greatly enhance the maintainability of the project.\n\n## Usage\n\n```bash\nnpx reactant-cli init my-app\ncd my-app\nyarn start\n```\n\n## Example\n\n* [TodoMVC](https://stackblitz.com/edit/reactant-todomvc)\n\n---\n\nReactant is very easy to get started. You can try Reactant by visiting the [online demo](https://stackblitz.com/edit/reactant-ts).\n\nHere is the counter example:\n\n```tsx\nimport React from 'react';\nimport { ViewModule, createApp, injectable, useConnector, action, state } from 'reactant';\nimport { render } from 'reactant-web';\n\n@injectable()\nclass Counter {\n  @state\n  count = 0;\n\n  @action\n  increase() {\n    this.count += 1;\n  }\n}\n\n@injectable()\nclass AppView extends ViewModule {\n  constructor(public counter: Counter) {\n    super();\n  }\n\n  component() {\n    const count = useConnector(() =\u003e this.counter.count);\n    return (\n      \u003cbutton type=\"button\" onClick={() =\u003e this.counter.increase()}\u003e\n        {count}\n      \u003c/button\u003e\n    );\n  }\n}\n\nconst app = createApp({\n  main: AppView,\n  render,\n});\n\napp.bootstrap(document.getElementById('app'));\n```\n\n## Packages\n- reactant\n- reactant-cli\n- reactant-di\n- reactant-last-action\n- reactant-model\n- reactant-module\n- reactant-native\n- reactant-redux\n- reactant-router\n- reactant-router-dom\n- reactant-router-native\n- reactant-share\n- reactant-ssr\n- reactant-storage\n- reactant-template\n- reactant-web\n\n## Documentation\n\n* [Getting Started](https://reactant.js.org/docs/intro)\n* [Tutorial](https://reactant.js.org/docs/category/basic-tutorial)\n* [Concepts](https://reactant.js.org/docs/getting-started/concepts)\n* [Advanced Guides](https://reactant.js.org/docs/category/advanced-guides)\n* [API Reference](https://reactant.js.org/docs/api/reactant/modules/createApp)\n\nYou can visit [reactant.js.org](https://reactant.js.org/) for more documentation.\n\n## License\n\nReactant is [MIT licensed](https://github.com/unadlib/reactant/blob/master/LICENSE).\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funadlib%2Freactant","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Funadlib%2Freactant","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funadlib%2Freactant/lists"}