Giter Club home page Giter Club logo

rekit's Introduction

Build Status Coverage Status Gitter Demo MIT licensed Code Quality: Javascript Total 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 and uses an opinionated way to organize folder and code. It's designed to be scalable, testable and maintainable by using feature oriented architecture, one action per file pattern. This ensures application logic is well grouped and decoupled.

Rekit consists of three pieces:

  • Rekit App Download the latest desktop App for Mac. Windows version is coming...
  • Rekit Studio: A complete web IDE for React, Redux, and React Router development
  • Rekit CLI: A command line tool to create and manage projects, components, actions, etc.

Read more about the new Rekit Studio in the blog post

๐ŸŽ‰ Rekit Now Creates Apps By Create-react-app

๐Ÿ”ฅ Introducing Rekit Studio: a real IDE for React and Redux development

๐ŸŽ‰ Using Rekit Studio in an Existing React Project

Demo

Below is a quick demo video of how Rekit Studio works:

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.

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 <app-name> [--sass]

This will create a new app named app-name in the current directory. The --sass flag allows to use sass instead of default less 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, all your knowledge about it still works.
  • Use Webpack 3 for bundling.
  • Use Babel for ES2015(ES6)+ support.
  • Use React hot loader for hot module replacement.
  • Use Redux for application state management.
  • Use React-router for routing and it's configured with Redux reducer.
  • Use Webpack dll plugin to improve dev-time build performance.
  • Use Less or Sass as CSS transpilers.
  • Use jest, enzyme for testing.
  • Support Redux dev tools.

Packages

The Rekit organization contains a number of packages.

Packages Description
rekit-core Version Provide core APIs such as create components, rename actions, etc...
rekit Version CLI wrapper of rekit-core, create apps by cloning repo from rekit-boilerplate-cra
rekit-studio Version Dedicated IDE for Rekit development, uses rekit-core to manage project too.
rekit-plugin-redux-saga Version Use redux-saga instead of redux-thunk for async actions.
rekit-plugin-selector Version Support selectors by Rekit cli.
rekit-plugin-apollo Version Support graphql by Apollo.

Documentation

Disclaimer: Some of documentation, particularly around installation, is outdated since the release of 3.0

http://rekit.js.org

License

MIT

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.