❀Neurotic Pumpkin Murderer

    rapid-react

    2.0.4Β β€’Β PublicΒ β€’Β Published

    Rapid React πŸ› οΈ

    A light weight interactive CLI Automation Tool πŸ› οΈ for rapid scaffolding of React apps,
    with Create React App under the hood. :atom:

    Built with ❀️ by Vinay.

    About β€’ Features β€’ Requirements β€’ Installation β€’ Documentation β€’ Road Map β€’ Contributing β€’ License

    intro-gif

    About ℹ️

    Rapid React is an interactive CLI tool which automates the repetitive steps involved every time a new React app is setup. Usually developers πŸ‘¨β€πŸ’» 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. 🚧

    Well, now you can grab a cup of β˜• while Rapid React scaffolds the app for you! 😌

    Rapid React 2.0 is out! 🎁

    update-notification

    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 to Redux Toolkit APIs. This would dramatically reduce the boilerplate code required to work with Redux and further cut down your development efforts. πŸ‹οΈ

    This has been considered after an in-depth advice from Mark Erikson who is a Redux maintainer. You may check his suggestions here 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! πŸ›ŽοΈ

    Features πŸŽ‰

    • Get notification every time an update is available. βš™οΈ
    • Supports both JavaScript and TypeScript. 😍
    • Installs both dependencies and dev dependencies.
    • Supports popularly used CSS preprocessor SASS! πŸ”₯
    • 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. πŸ€”
    • Setups routing with user defined routes.
    • Setups Redux state management with user defined reducers along with:
    • Setups MobX state management with user defined stores.
    • ...and much more! πŸŽ‰

    Requirements βœ…

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

    Installation πŸš€

    From your terminal run:

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

    Documentation πŸ“—

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

    # that's it!
    $ rapid-react

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

    greetings-screenshot

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

    walk-through-screenshot

    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.

      βœ… valid app names
      foo
      123foo
      foo123
      foo-bar

      ❌ 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

        βœ… valid route names
        foo
        fooBar
        FooBar
        Foo123

        ❌ 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.
      ⚠️ 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 🀝

    Your contributions are always welcome! Please have a look at the contribution guidelines first. πŸŽ‰

    License πŸ“„

    Rapid React is licensed under the terms of MIT License.

    Install

    npm i rapid-react

    DownloadsWeekly Downloads

    4

    Version

    2.0.4

    License

    MIT

    Unpacked Size

    68.6 kB

    Total Files

    35

    Last publish

    Collaborators

    • vinaysharma