Rekit 2.0: new way of React development

Nate Wang
Nate Wang
Jul 6, 2017 · 5 min read

Rekit is a toolkit for building scalable web applications with React, Redux and React-router. It’s an all-in-one solution for creating modern React apps.

Now it’s been released version 2.0 with many new and nice features:

  1. A new tool named Rekit Portal for managing app elements like components, actions, routes, which replaces the old Sublime Text plugin.
  2. Ability to rename elements, like renaming a Redux async action.
  3. New plugin mechanism to extend Rekit’s capability.
  4. Support React v15, React router v4, Webpack 3 and React hot loader 3.

Quick look

Async action example

To have a quick feeling about Rekit portal, you can view the live demo at:

For Redux sync actions, below video shows how quick to create a counter component using Rekit, just in ONE minute!

Create a counter in ONE minute!

To learn more and get started, just read the guide at:


And here is the overall architecture of a Rekit app.


For example: to create a list page to show recent topics of a forum application, typically you need to finish below tasks before you start writing the real topic list logic:

  1. Create a React component class named `TopicList`.
  2. Define a routing path for the `TopicList` component in React-router config.
  3. Create a style file named `TopicList.less` and import it in the component or somewhere.
  4. Use `react-redux` to connect the component to the Redux store.
  5. Create four action types as constants: `FETCH_BEGIN`, `FETCH_PENDING`, `FETCH_SUCCESS`, `FETCH_FAILURE`, typically in `constants.js`.
  6. Create two actions: `fetchTopicList` and `dismissFetchTopicListError`.
  7. Import constants in the action file.
  8. Create a reducer handling the four types of actions and define the initial state.
  9. Import constants in the reducer file.
  10. Create the component unit test file with boilerplate code.
  11. Create the action unit test file with boilerplate code.
  12. Create the reducer unit test file with boilerplate code.

It’s really awful! You need to write tons of code to setup the code structure just before writing the first line of the application logic. And it’s even more awful if you want to rename or delete the topic list page! Dozens of places need to be found and correctly updated.

How Rekit helps?

rekit add component forum/TopicList
rekit add action forum/fetch-topic-list -a

Then all things will be ready for the application logic! Here `forum` is the feature name, TopicList is a component under the feature. `-a` flag indicates it’s an async action.

To rename it from `TopicList` to `Topics`, run below commands:

rekit mv component forum/TopicList forum/Topics
rekit mv action forum/fetch-topic-list forum/fetch-topics

To remove it, run below commands:

rekit rm component forum/TopicList
rekit rm action forum/fetch-topic-list

Actually there is nothing magic behind, Rekit just does what you manually need to do. Every Rekit command will clearly show you what it does behind. For example, below snapshot shows how Rekit renames an async action:

You would never want to do it manually right? :-P

Rekit portal

Rekit Portal

And you can view the live demo at:

You can find more introduction about Rekit portal at:


For example, there have been two plugins available:

1. rekit-plugin-redux-saga: allows Rekit to uses `redux-saga` rather than `redux-thunk` when creating async actions.
2. rekit-plugin-selector: adds a new element type named `selector` based on reselect to Rekit. So that you can manage selectors by Rekit for your project.

There are two types of plugins:

1. Public plugins: plugins published on npm so that all people could use it.
2. Local plugins: plugins only meet the requirements for your own project. They are placed under `<your-prjroot>/tools/plugins` folder.

To create a plugin, use below command:

rekit create-plugin my-plugin

It will create a local plugin if the current directory is in a Rekit project, otherwise create a public plugin.

For more information, please read the document at:


Nate Wang

Written by

Nate Wang