Using Rekit to quickly create a React app

Updated Aug, 2017

NOTE: this article has been deprecated in favor of Rekit 2.0. Now you should use Rekit 2.0, which replaced sublime-text plugin with a new tool named Rekit Portal, to get more powerful features. Learn more about Rekit 2.0: https://medium.com/@nate_wang/rekit-2-0-next-generation-react-development-ce8bbba51e94

There really have been a lot of React boilerplates, code generators and starter kits. Of which the most notable one is the Facebook’s official “Create React App” tool. All of them have their own tradeoffs. Rekit is just another one which covers all of the lifecycle of building a React application using a scalable way. And it’s the only one (as I know) providing a Sublime text plugin.

These days I have introduced a lot about how Rekit works and the design philosophy behind it, but the feedback tells me it’s still confusing what Rekit is and how to use it. So this article will mainly introduce the usage of Rekit and how it helps you focus on the business logic better.

In short, Rekit does below things for you:

1. Create a new project, configure everything well for a typical application with React, Redux and React-router. You don’t need to do anything else before you can start the application.
2. Generate boilerplates for components, route config, test cases, Redux actions/reducers/constants on demand by provided command line tools or the Sublime plugin. It also provides the ability to destroy them.
3. Provide a build tool to produce production-ready builds, such as hashing the bundle, optimising the code.

Now let’s see how to use Rekit step by step.

1. Installation

To install the stable version:

npm install -g rekit

This will install a global command rekit to the system. It’s only used to create a new project.

2. Create a new app

For a long time creating a new project with React is a big pain. Too many tools to be configured before you write the first line of code regarding your business logic.

Now Rekit rescues. It helps create a new React project in seconds. You don’t need to do any additional configuration, Rekit just setups everything well, such as:

• Creating the folder structure
• Webpack configs for dev, dist, test, etc.
• React hot loader config
• Babel, ESLint config
• Mocha, Enzyme config for React testing.
• …

The usage is:

rekit my-app

This will create a new app named my-app in the current directory. After that, just install dependencies and start the dev server:

cd my-app
npm install
npm start

Look! It’s super easy to create a new project for either a simple prototype app or a serious production project.

3. See the welcome page

After the app is created and started, you can see a welcome page by accessing http://localhost:6076. Seeing it also means the creation is successful.

On top of the welcome page is a simple navigator which reads router config to create links. The page also includes two simple samples showing how Redux is used, for sync action and async action.

1. A simple counter.
2. Reddit list of the channel reactjs.

The welcome page is put under the ‘home’ feature, you can remove it simply by running “npm run rm:feature home”. It’s just a demo feature, remove it to get a clean project as you want.

4. Add a feature

A feature is the top level concept of a Rekit application. See more introduction at rekit.js.org.

It’s super easy to adding a feature by the Sublime text plugin:

The equivalent npm script is:

npm run add:feature category

What it mainly does:

• Create a folder named category under the src/features folder.
• Create boilerplate files for the feature.
• Import and combine the feature reducer in src/common/rootReducer.js.
• Import and define the feature routeConfig in src/common/routeConfig.js with the URL path category.
• Create a default page: DefaultPage.js.
• Create a sample action: categorySampleAction.

5. Add a page

A page is a container component which connects to Redux store. It is usually associated with a URL path. See more introduction at rekit.js.org. You can add or remove a page by the Sublime plugin:

The equivalent npm script is:

npm run add:page category/my-page

What it mainly does:

• Add the page component: src/features/category/MyPage.js.
• Add the page style file: src/features/category/MyPage.less.
• Define the routing rule in src/features/my-feature/route.js .
• Add a unit test file test/app/features/my-feature/MyPage.test.js.

6. Add a component

There are two types of component in a Rekit application. One is common put in the src/components folder, the other belongs to some feature. You can add or remove a component by the Sublime plugin:

The equivalent npm script is:

npm run add:page category/my-component

What it mainly does:

• Add the component: src/features/category/MyComponent.js.
• Add the component style file: src/features/category/MyComponent.less.
• Add a unit test file: test/app/features/category/MyComponent.test.js.

7. Add an action/async-action

The Redux doc has given an “official” approach to creating actions/async-actions. Rekit just adopts it. You can add or remove actions by the Sublime plugin:

The equivalent npm script is:

npm add:async-action category/fetch-list

What it mainly does:

• Add four action types to src/features/category/redux/constants.js.
• Add an action file src/features/category/redux/fetchList.js.
• Import and export actions in src/features/category/redux/actions.js.
• Import and use the reducer in src/features/category/redux/reducer.js.
• Add a test file src/features/category/redux/fetchList.test.js.

8. Run unit tests

When creating pages, components, actions/reducers, Rekit also creates associated test files with simple but useful test cases generated. See more introduction at rekit.js.org. You can run a specific test or all the tests by the Sublime plugin:

The equivalent npm script is:

npm test app/category/redux/fetchList.test.js  // for a single test
npm test app/**/*.test.js  // for all app tests, it generates coverage report

What it does: Rekit uses webpack.test.js to build the app and test the built bundle with mocha-webpack. It supports running either a single test or tests matching some pattern.

9. Build the application

It’s super easy to build a Rekit project with Sublime plugin:

The equivalent npm script is:

npm run build

After the build, you can test the build result by starting a test server:

npm run build:test

Then access http://localhost:6077, you should see the same result with which in dev time.

Summary

Okay, so this is a brief introduction about how to use Rekit. By doing all trival things about configurations, boilerplates for you, it helps you be focused on the business logic better. You can read more details about the Sublime plugin or command line tools from Rekit’s documentation.

Hope this article helps explain what Rekit is and how it works. If you are interested, just give it a try! If you like it, welcome to give it a star! I’m always expecting your feedback at twitter @webows. Thanks for reading.