Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/supnate/rekit
IDE and toolkit for building scalable web applications with React, Redux and React-router
https://github.com/supnate/rekit
react react-router redux rekit
Last synced: 5 days ago
JSON representation
IDE and toolkit for building scalable web applications with React, Redux and React-router
- Host: GitHub
- URL: https://github.com/supnate/rekit
- Owner: supnate
- License: mit
- Created: 2016-08-02T17:53:21.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-03T04:46:14.000Z (about 2 years ago)
- Last Synced: 2024-10-29T15:17:19.226Z (4 months ago)
- Topics: react, react-router, redux, rekit
- Language: JavaScript
- Homepage: http://rekit.js.org
- Size: 22.2 MB
- Stars: 4,473
- Watchers: 144
- Forks: 258
- Open Issues: 104
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-toolkits - Rekit - Toolkit for building scalable web applications with React, Redux and React-router. (Web)
README
#
[
](https://opencollective.com/rekit)
[](https://travis-ci.org/supnate/rekit)
[](https://codecov.io/github/rekit/rekit)
[](https://gitter.im/rekitjs/Lobby?utm_source=share-link&utm_medium=link&utm_campaign=share-link)
[](http://demo.rekit.org)
[](./LICENSE)
[](https://lgtm.com/projects/g/supnate/rekit/context:javascript)
[](https://lgtm.com/projects/g/supnate/rekit/alerts)*An all-in-one solution for creating modern React apps*
Rekit is a toolkit for building scalable web applications with React, Redux and React-router. It helps you focus on business logic rather than dealing with massive libraries, patterns, configurations etc.
Rekit creates apps bootstrapped by [create-react-app](https://github.com/facebook/create-react-app) and uses an opinionated way to organize folder and code. It's designed to be scalable, testable and maintainable by using [feature oriented architecture](https://medium.com/@nate_wang/feature-oriented-architecture-for-web-applications-2b48e358afb0), [one action per file pattern](https://medium.com/@nate_wang/a-new-approach-for-managing-redux-actions-91c26ce8b5da#.9em77fuwk). This ensures application logic is well grouped and decoupled.
Rekit consists of three pieces:
- [Rekit App](https://github.com/rekit/rekit-app/releases) Download the latest desktop App for Mac. Windows version is coming...
- [Rekit Studio](https://medium.com/free-code-camp/introducing-rekit-studio-a-real-ide-for-react-and-redux-development-baf0c99cb542): A complete web IDE for React, Redux, and React Router development
- [Rekit CLI](http://rekit.js.org/docs/cli.html): A command line tool to create and manage projects, components, actions, etc.[**Read more about the new Rekit Studio in the blog post**](https://medium.com/@nate_wang/rekit-3-0-531742d0c2c9?sk=5bfe6383ae43d6b18063a070abd79d34)
🎉 [Rekit Now Creates Apps By Create-react-app](https://medium.com/@nate_wang/rekit-now-creates-apps-by-create-react-app-3f0d82fd64f3)
🔥 [Introducing Rekit Studio: a real IDE for React and Redux development](https://medium.com/@nate_wang/introducing-rekit-studio-a-real-ide-for-react-and-redux-development-baf0c99cb542)
🎉 [Using Rekit Studio in an Existing React Project](https://medium.com/@nate_wang/using-rekit-studio-in-an-existing-react-project-39713d9667b)
## Demo
Below is a quick demo video of how Rekit Studio works:
[
](https://youtu.be/i53XffYtWMc "Rekit Demo")
You can also see the live demo, but the instructions shown on the intro might be outdated: http://demo.rekit.org
## Installation
If you are on Mac you can use the [desktop app](https://github.com/rekit/rekit-app/releases).
**Install with npm:**
```
npm install -g rekit # Install Rekit CLI
npm install -g rekit-studio # Install Rekit Studio
```This will install the commands `rekit` and `rekit-studio` to the system. Rekit is developed and tested on npm 3+ and node 6+, so this is the prerequisite for using Rekit.
## Usage
Create a new application
```
rekit create [--sass]
```
This will create a new app named `app-name` in the current directory. The `--sass` flag allows to use [sass](https://sass-lang.com/) instead of default [less](http://lesscss.org/) as the CSS transpiler. After creating the app, you need to install dependencies:
```
cd app-name
npm install
```
Now, we can start Rekit Studio with:
```
rekit-studio -p 3040
```
Finally, you can open Rekit Studio at http://localhost:3040/. At the bottom in the "Scripts" tab you can find buttons to start, build, and test your app.## Key Features
* It's production-ready but not a starter kit.
* Zero additional configuration needed after creating an app.
* Dedicated IDE for Rekit development.
* Command line tools to manage actions, reducers, components and pages.
* Bootstrapped by [create-react-app](https://github.com/facebook/create-react-app), all your knowledge about it still works.
* Use [Webpack 3](http://webpack.js.org) for bundling.
* Use [Babel](https://babeljs.io/) for ES2015(ES6)+ support.
* Use [React hot loader](http://gaearon.github.io/react-hot-loader/) for hot module replacement.
* Use [Redux](http://redux.js.org/) for application state management.
* Use [React-router](https://github.com/reactjs/react-router) for routing and it's configured with Redux reducer.
* Use [Webpack dll plugin](https://webpack.js.org/plugins/dll-plugin/#src/components/Sidebar/Sidebar.jsx) to improve dev-time build performance.
* Use [Less](http://lesscss.org/) or [Sass](https://sass-lang.com/) as CSS transpilers.
* Use [jest](https://facebook.github.io/jest/), [enzyme](https://github.com/airbnb/enzyme) for testing.
* Support [Redux dev tools](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd).## Packages
The [Rekit organization](https://github.com/rekit) contains a number of packages.| Packages | Description |
| --- | --- |
| rekit-core |[](https://www.npmjs.org/package/rekit-core) Provide core APIs such as create components, rename actions, etc... |
| rekit |[](https://www.npmjs.org/package/rekit) CLI wrapper of rekit-core, create apps by cloning repo from [rekit-boilerplate-cra](https://github.com/supnate/rekit-boilerplate-cra) |
| rekit-studio |[](https://www.npmjs.org/package/rekit-studio) Dedicated IDE for Rekit development, uses rekit-core to manage project too. |
| rekit-plugin-redux-saga |[](https://www.npmjs.org/package/rekit-plugin-redux-saga) Use redux-saga instead of redux-thunk for async actions. |
| rekit-plugin-selector |[](https://www.npmjs.org/package/rekit-plugin-selector) Support selectors by Rekit cli. |
| rekit-plugin-apollo |[](https://www.npmjs.org/package/rekit-plugin-apollo) Support graphql by [Apollo](https://www.apollographql.com/). |## Documentation
*Disclaimer:* Some of documentation, particularly around installation, is outdated since the release of 3.0
[http://rekit.js.org](http://rekit.js.org)
## License
MIT