Skip to content

Commit 5917159

Browse files
supnatesupnate
authored
Merge pull request #231 from MatthewScholefield/patch-1
Update README for 3.0
2 parents f4e16de + 124e1c5 commit 5917159

File tree

1 file changed

+46
-66
lines changed

1 file changed

+46
-66
lines changed

‎README.md‎

Lines changed: 46 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,4 @@
1-
# <img src="/images/logo_text.png?raw=true" width="260">
2-
3-
**Rekit 3.0 is out:** https://medium.com/@nate_wang/rekit-3-0-531742d0c2c9?sk=5bfe6383ae43d6b18063a070abd79d34
4-
5-
[<img src="https://opencollective.com/rekit/tiers/backers.svg?avatarHeight=60"/>](https://opencollective.com/rekit)
6-
7-
8-
> NOTE: below content is not updated for the new 3.0. Read the article above for more information.
9-
10-
------
11-
12-
🎉 [Rekit Now Creates Apps By Create-react-app](https://medium.com/@nate_wang/rekit-now-creates-apps-by-create-react-app-3f0d82fd64f3)
13-
14-
🔥 [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)
15-
16-
🎉 [Using Rekit Studio in an Existing React Project](https://medium.com/@nate_wang/using-rekit-studio-in-an-existing-react-project-39713d9667b)
17-
18-
**Try Rekit 3.0 with a desktop app: https://github.com/rekit/rekit-app/releases**
19-
20-
**Or see the guide for a web version: https://github.com/rekit/rekit/issues/201**
21-
22-
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.
23-
24-
It helps you focus on business logic rather than dealing with massive libraries, patterns, configurations etc.
1+
# <img src="/images/logo_text.png?raw=true" width="260"> [<img align="right" src="https://opencollective.com/rekit/tiers/backers.svg?avatarHeight=60"/>](https://opencollective.com/rekit)
252

263
[![Build Status](https://travis-ci.org/rekit/rekit.svg?branch=master)](https://travis-ci.org/supnate/rekit)
274
[![Coverage Status](https://img.shields.io/codecov/c/github/rekit/rekit/master.svg)](https://codecov.io/github/rekit/rekit)
@@ -31,72 +8,60 @@ It helps you focus on business logic rather than dealing with massive libraries,
318
[![Code Quality: Javascript](https://img.shields.io/lgtm/grade/javascript/g/supnate/rekit.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/supnate/rekit/context:javascript)
329
[![Total Alerts](https://img.shields.io/lgtm/alerts/g/supnate/rekit.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/supnate/rekit/alerts)
3310

11+
*An all-in-one solution for creating modern React apps*
12+
13+
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.
14+
3415
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.
3516

36-
Besides creating apps, Rekit provides powerful tools for managing the project:
17+
Rekit consists of two pieces:
18+
- [Rekit Studio](https://medium.com/free-code-camp/introducing-rekit-studio-a-real-ide-for-react-and-redux-development-baf0c99cb542): A complete IDE for React, Redux, and React Router development
19+
- [Rekit CLI](http://rekit.js.org/docs/cli.html): A command line tool to create and manage projects, components, actions, etc.
3720

38-
1. [Rekit Studio](https://medium.com/@nate_wang/introducing-rekit-studio-a-real-ide-for-react-and-redux-development-baf0c99cb542): the real IDE for React, Redux development.
39-
2. [Command line tools](http://rekit.js.org/docs/cli.html): besides Rekit Studio, you can use command line tools to create/rename/move/delete project elements like components, actions etc. It has better support for Rekit plugin system.
21+
[**Read more about the new Rekit Studio in the blog post**](https://medium.com/@nate_wang/rekit-3-0-531742d0c2c9?sk=5bfe6383ae43d6b18063a070abd79d34)
4022

41-
Below is a quick demo video of how Rekit works:
23+
🎉 [Rekit Now Creates Apps By Create-react-app](https://medium.com/@nate_wang/rekit-now-creates-apps-by-create-react-app-3f0d82fd64f3)
4224

43-
[<img src="/images/rekit-studio-youtube.png" width="500" alt="Rekit Demo"/>](https://youtu.be/i53XffYtWMc "Rekit Demo")
25+
🔥 [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)
26+
27+
🎉 [Using Rekit Studio in an Existing React Project](https://medium.com/@nate_wang/using-rekit-studio-in-an-existing-react-project-39713d9667b)
28+
29+
## Demo
4430

45-
The demo contains two parts, which are examples in Redux's official website:
31+
Below is a quick demo video of how Rekit Studio works:
4632

47-
1. Create a simple counter in 1 minute!
48-
2. Show the latest reactjs topics on Reddit using async actions.
33+
[<img src="/images/rekit-studio-youtube.png" width="500" alt="Rekit Demo"/>](https://youtu.be/i53XffYtWMc "Rekit Demo")
4934

50-
## Live Demo
51-
You can also see the live demo at: http://demo.rekit.org
35+
You can also see the live demo, but the instructions shown on the intro might be outdated: http://demo.rekit.org
5236

5337
## Installation
38+
39+
If you are on Mac you can use the [desktop app](https://github.com/rekit/rekit-app/releases).
40+
41+
**Install with npm:**
42+
5443
```
55-
npm install -g rekit
44+
npm install -g rekit # Install Rekit CLI
45+
npm install -g rekit-studio # Install Rekit Studio
5646
```
57-
This will install a global command `rekit` to the system. Rekit is developed and tested on npm 3+ and node 6+, so this is the prerequisite for using Rekit.
47+
48+
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.
5849

5950
## Usage
6051
Create a new application
6152
```
6253
rekit create <app-name> [--sass]
6354
```
64-
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 and start the dev server:
55+
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:
6556
```
6657
cd app-name
6758
npm install
68-
npm start
6959
```
70-
71-
It then starts two express servers by default:
72-
73-
1. Webpack dev server: [http://localhost:6075](http://localhost:6075). Just what create-react-app starts.
74-
2. Rekit Studio: [http://localhost:6076](http://localhost:6076). The IDE for Rekit projects.
75-
76-
To change the ports dev-servers running on, edit the `rekit` section in `package.json`:
60+
Now, we can start Rekit Studio with:
7761
```
78-
{
79-
...
80-
"rekit": {
81-
"devPort": 6075,
82-
"studioPort": 6076,
83-
...
84-
}
85-
...
86-
}
62+
rekit-studio -p 3040
8763
```
88-
89-
## Packages
90-
This repo contains multiple packages managed by [yarn workspaces](https://yarnpkg.com/lang/en/docs/workspaces/).
91-
92-
| Packages | Description |
93-
| --- | --- |
94-
| rekit-core |[![Version](http://img.shields.io/npm/v/rekit-core.svg)](https://www.npmjs.org/package/rekit-core) Provide core APIs such as create components, rename actions, etc... |
95-
| rekit |[![Version](http://img.shields.io/npm/v/rekit.svg)](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) |
96-
| rekit-studio |[![Version](http://img.shields.io/npm/v/rekit-studio.svg)](https://www.npmjs.org/package/rekit-studio) Dedicated IDE for Rekit development, uses rekit-core to manage project too. |
97-
| rekit-plugin-redux-saga |[![Version](http://img.shields.io/npm/v/rekit-plugin-redux-saga.svg)](https://www.npmjs.org/package/rekit-plugin-redux-saga) Use redux-saga instead of redux-thunk for async actions. |
98-
| rekit-plugin-selector |[![Version](http://img.shields.io/npm/v/rekit-plugin-selector.svg)](https://www.npmjs.org/package/rekit-plugin-selector) Support selectors by Rekit cli. |
99-
| rekit-plugin-apollo |[![Version](http://img.shields.io/npm/v/rekit-plugin-apollo.svg)](https://www.npmjs.org/package/rekit-plugin-apollo) Support graphql by [Apollo](https://www.apollographql.com/). |
64+
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.
10065

10166
## Key Features
10267
* It's production-ready but not a starter kit.
@@ -114,7 +79,22 @@ This repo contains multiple packages managed by [yarn workspaces](https://yarnpk
11479
* Use [jest](https://facebook.github.io/jest/), [enzyme](https://github.com/airbnb/enzyme) for testing.
11580
* Support [Redux dev tools](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd).
11681

82+
## Packages
83+
The [Rekit organization](https://github.com/rekit) contains a number of packages.
84+
85+
| Packages | Description |
86+
| --- | --- |
87+
| rekit-core |[![Version](http://img.shields.io/npm/v/rekit-core.svg)](https://www.npmjs.org/package/rekit-core) Provide core APIs such as create components, rename actions, etc... |
88+
| rekit |[![Version](http://img.shields.io/npm/v/rekit.svg)](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) |
89+
| rekit-studio |[![Version](http://img.shields.io/npm/v/rekit-studio.svg)](https://www.npmjs.org/package/rekit-studio) Dedicated IDE for Rekit development, uses rekit-core to manage project too. |
90+
| rekit-plugin-redux-saga |[![Version](http://img.shields.io/npm/v/rekit-plugin-redux-saga.svg)](https://www.npmjs.org/package/rekit-plugin-redux-saga) Use redux-saga instead of redux-thunk for async actions. |
91+
| rekit-plugin-selector |[![Version](http://img.shields.io/npm/v/rekit-plugin-selector.svg)](https://www.npmjs.org/package/rekit-plugin-selector) Support selectors by Rekit cli. |
92+
| rekit-plugin-apollo |[![Version](http://img.shields.io/npm/v/rekit-plugin-apollo.svg)](https://www.npmjs.org/package/rekit-plugin-apollo) Support graphql by [Apollo](https://www.apollographql.com/). |
93+
11794
## Documentation
95+
96+
*Disclaimer:* Some of documentation, particularly around installation, is outdated since the release of 3.0
97+
11898
[http://rekit.js.org](http://rekit.js.org)
11999

120100
## License

0 commit comments

Comments
 (0)