@vinaysharma/yyy v1.0.1

About :information_source:

@react/cli 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 @react/cli scaffolds the app for you! :relieved:

Features :tada:

• Supports both JavaScript and TypeScript. :heart_eyes:
• Installs both dependencies and dev dependencies.
• Supports popularly used CSS preprocessor SASS! :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: named/default. :thinking:
• Setups routing with user defined routes.
• Setups Redux state management with user defined reducers along with:
  • Redux Saga
  • Redux Form
  • Redux Logger
• Setups MobX state management with user defined stores.
• ...and much more! :tada:

Requirements :white_check_mark:

• Node.js installed on your system.
• An active internet connection for CLI to work.

Installation :rocket:

From your terminal run:

# install the package from NPM
$ npm install @react/cli

Documentation :green_book:

@react/cli installs react command in your system. To run the tool, you need to invoke this command from your terminal:

# that's it!
$ react

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

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

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 needed with Redux:

    • Redux Form
    • Redux Logger
    • Redux Saga (plus, you can enter space separated sagas as well)

• 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.

Contributing :handshake:

Your contributions are always welcome! Please have a look at the contribution guidelines first. 🎉

License :page_facing_up:

@react/cli is licensed under the terms of MIT License.