Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/vinaysharma14/rapid-react

A light weight interactive CLI Automation Tool 🛠️ for rapid scaffolding of tailored React apps with Create React App under the hood. :atom:
https://github.com/vinaysharma14/rapid-react

cli-app es6 javascript mobx-react react react-hooks react-redux react-router react-router-dom reactjs redux-form redux-logger redux-saga sass scaffolder scss tool typescript

Last synced: about 4 hours ago
JSON representation

A light weight interactive CLI Automation Tool 🛠️ for rapid scaffolding of tailored React apps with Create React App under the hood. :atom:

Host: GitHub
URL: https://github.com/vinaysharma14/rapid-react
Owner: vinaysharma14
License: mit
Created: 2020-11-27T18:25:08.000Z (almost 4 years ago)
Default Branch: master
Last Pushed: 2022-07-25T13:02:17.000Z (over 2 years ago)
Last Synced: 2024-10-29T23:07:43.585Z (14 days ago)
Topics: cli-app, es6, javascript, mobx-react, react, react-hooks, react-redux, react-router, react-router-dom, reactjs, redux-form, redux-logger, redux-saga, sass, scaffolder, scss, tool, typescript
Language: TypeScript
Homepage: https://www.npmjs.com/package/rapid-react
Size: 30 MB
Stars: 71
Watchers: 3
Forks: 4
Open Issues: 0
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

Rapid React :hammer_and_wrench:

A light weight interactive CLI Automation Tool :hammer_and_wrench: for rapid scaffolding of React apps,

with
Create React App under the hood. :atom:

Built with :heart: by Vinay.

About •
Features •
Requirements •
Installation •
Documentation •
Road Map •
Contributing •
License

![intro-gif](docs/images/intro.gif)

## About :information_source:

Rapid React is an interactive CLI tool which automates the repetitive steps involved every time a new React app is setup. Usually developers :man_technologist: go through a time consuming process which involves waiting for **create-react-app** to finish it's boilerplate setup, followed by installation of dependencies & dev dependencies, setup of folder structure, routing, state management, e.t.c. before it can finally start working on the app. :construction:

Well, now you can grab a cup of :coffee: while **Rapid React** scaffolds the app for you! :relieved:

## Rapid React 2.0 is out! :gift:

![update-notification](docs/images/update.png)

Thanks for showing your love for **Rapid React** which has motivated further to work on some cool new features!

- **Rapid React** has been re-written from [React Redux](https://react-redux.js.org/) to [Redux Toolkit](https://redux-toolkit.js.org/) APIs. This would dramatically reduce the boilerplate code required to work with Redux and further cut down your development efforts. :weight_lifting:

> This has been considered after an in-depth advice from [Mark Erikson](https://github.com/markerikson) who is a Redux maintainer. You may check his suggestions [here](https://www.reddit.com/r/reactjs/comments/khhh49/introducing_react_rapid_a_light_weight/) which cover **RTK** as the recommended way to write Redux logic. This would be a **breaking change** for existing users.

- Added support for Redux Thunk middleware!

- A much more comprehensive and better looking version update notification!

- A notification sound would play once the setup is complete! :bellhop_bell:

## Features :tada:

- Get notification every time an update is available. :gear:
- Supports both [JavaScript](https://www.w3schools.com/js/) and [TypeScript](https://www.typescriptlang.org/). :heart_eyes:
- Installs both dependencies and dev dependencies.
- Supports popularly used CSS preprocessor [SASS](https://sass-lang.com/)! :fire:
- Choose from commonly used folders (`assets`, `components`, `hooks`, `services`, `utils`, e.t.c.) to scaffold.
- Scaffolds custom folder as well.
- Choose preferred [export type](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export): named/default. :thinking:
- Setups [routing](https://reactrouter.com/) with user defined routes.
- Setups [Redux](https://react-redux.js.org/) state management with user defined reducers along with:
- [Redux Thunk](https://github.com/reduxjs/redux-thunk)
- [Redux Saga](https://redux-saga.js.org/)
- [Redux Logger](https://github.com/LogRocket/redux-logger#readme)
- Setups [MobX](https://mobx.js.org/README.html) state management with user defined stores.
- ...and much more! :tada:

## Requirements :white_check_mark:

- [Node.js](https://nodejs.org/en/download/) installed on your system.
- An active internet connection for CLI to work.

## Installation :rocket:

From your terminal run:

```bash
# install the package from NPM
$ npm install rapid-react
```

## Documentation :green_book:

**Rapid React** installs `rapid-react` command in your system. To run the tool, you need to invoke this command from your terminal:

```bash
# that's it!
$ rapid-react
```

As soon as run the command you are greeted by the CLI.

![greetings-screenshot](docs/images/greetings.png)

From there on, you are asked a couple of question for a tailored experience for your app setup.

![walk-through-screenshot](docs/images/walk-through.png)

The utility would walk you through from following:

- **Language Preference**

Choose between JavaScript and TypeScript

- **App Name**

Enter your app name. By default it fallbacks to _my-app_.

:white_check_mark: valid app names

foo

123foo

foo123

foo-bar

:x: invalid app names

Foo

Foo-Bar

FooBar

- **Export Type Preference**

Choose between Named and Default.

- **StyleSheet Preference**

Choose between CSS and SCSS.

- **Routing requirement**

Choose either Yes or No.

- **If required, enter space separated route names**

e.g. `home login about signIn signUp`

:white_check_mark: valid route names

foo

fooBar

FooBar

Foo123

:x: invalid route names

123foo

foo-bar

foo.bar

foo?bar

- **State management requirement**

Choose either Yes or No.

- **If required, select one**

Choose between MobX and Redux. Once chosen you'll be prompted to **enter space separated** names of stores(in case of MobX) or reducers(in case of Redux). The conventions would be same as routes.

- **Installing additional Redux libraries**

If you chose Redux you'll be prompted to choose from these additional libraries usually used with Redux:
- Redux Logger
- Redux Thunk
- Redux Saga

- **Scaffold folders**:

- **Standard**

You can choose from commonly used folder to scaffold: `assets`, `components`, `data`, `errors`, `fallbacks`, `hooks`, `layouts`, `services`, `types`, `utils`, `validations`.
- **Custom**

You can **enter space separated** folders. The conventions would be same as routes.

- **Dependencies**:

You can **enter space separated** dependencies. The conventions would be same as routes. E.g. `antd lodash moment`.

:warning: In case you are using **TypeScript** you'll have to explicitly mention type definition packages required for these dependencies. Such packages usually start with `@types/` prefix and are installed as dev dependencies.

- **Dev Dependencies**:
You can **enter space separated** dev dependencies. The conventions would be same as routes. If you're not sure about what a dev dependency is, you can refer to [this](https://stackoverflow.com/a/22004559/11220479).

## Contributing :handshake:

Your contributions are always welcome! Please have a look at the [contribution guidelines](https://github.com/vinaysharma14/rapid-react/blob/master/CONTRIBUTING.md) first. 🎉

## License :page_facing_up:

**Rapid React** is licensed under the terms of [MIT License](https://github.com/vinaysharma14/rapid-react/blob/master/LICENSE.md).