An interactive CLI automation tool πŸ› οΈ for creating react.js and next.js projects most fast and efficiently. βš›οΈ

Last update: Apr 12, 2022

ReexJs logo

npm MIT License

An interactive CLI automation tool πŸ› οΈ for creating react.js and next.js projects most fast and efficiently. βš›οΈ

ReexJs logo

About ℹ️

ReexJs CLI is an interactive CLI that automates the process of creating a React / Next App. Usually developers we spent a lot of time installing dependencies, creating folders, etc., before having our initial configuration and start working on the application.

The goal of ReexJs CLI It is that we can start working on our application without worrying about the initial configuration.

Features πŸŽ‰

  • Create a react.js or next.js app. βš›οΈ
  • Choose from commonly used folders (assets, components, hooks, services, utils, e.t.c.) to create.
  • Or create folders with custom names. πŸ“‚
  • Setup routing with user defined routes if you choose react.js.
  • Or create pages for nextjs.
  • Add supports popularly used CSS preprocessor SASS! πŸ‘“
  • And installs dependencies and dev dependencies.

Requirements πŸ“

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

Installation πŸš€

From your terminal run:

# install the package with NPM
$ npx reexjs-cli
# or install it with YARN
$ yarn reexjs-cli

Documentation πŸ“˜

ReexJs CLI installs reexjs-cli command in your system. To run the tool, you need to invoke this command from your terminal:

# if you install it globally
$ reexjs-cli

As soon as run the command you are greeted by the CLI and you must choose between the options, the most approached your desired configuration.

ReexJs logo

Then you have to answer some questions to configure your react.js or next.js app

ReexJs logo

Config βš™οΈ

Depending on the fact that Framework is chosen, different questions will be asked:

  • App Name:
    Enter your app name. By default it fallbacks to reexjs-app.

    βœ… Valid App Names:

    • my-app
    • onl1n3
    • one-2-three

    ❌ Invalid App Names:

    • My-App
    • Onl1n3
    • One-2-Three
  • Framework:
    Choose the Framework of your application. Next.js or React.js.

  • Pages Names: (Next.Js)
    Enter space separated pages for next.js application.

  • React Routing: (React.Js)
    Choose if react routes is needed. Yes or No.
    If required, enter space separated routes names.

    βœ… Valid Route Names:

    • my-route
    • one-two-three

    ❌ Invalid Route Names:

    • My-Route:
    • one-2-three
    • some-route/
    • some.route
    • some?route
  • Create Folders:

    • Predefined:

      • You can choose from commonly use folders to create: assets, components, utils, lib.
    • Custom:

      • You can enter space separated folders. The conventions would be same as routes in react routing. E.g. context hooks
  • Style scripting:
    Choose if you want use SASS preprocessor in your styles. SCSS, SASS or CSS.

  • Dependencies: (npm i )
    You can enter space separated dependencies. The conventions would be same as routes in react routing. E.g. react-bootstrap lodash moment. This script run the code

  • Dev Dependencies: (npm i -D )
    You can enter separated dev dependencies. The conventions would be same as routes in react routing. E.g. prettier husky lint-staged.

TODOs βœ…

  • Get notification every time an update is available. πŸ””
  • Choose JavaScript and TypeScript. πŸ”₯
  • Choose preferred export type: named or default. πŸ€”
  • Add Redux/MobX/useContext state management setup. βš™οΈ
  • Style your app EXACTLY Like Google. 😎

License

ReexJs CLI is licensed under the terms of MIT

Built with ❀️ by Codax.

GitHub

https://github.com/a12989x/reexjs-cli
You might also like...

my-watchlist is a web application for creating your own watchlist.

my-watchlist is a web application for creating your own watchlist.

my-watchlist is a web application for creating your own watchlist. The website tracks your created watchlist, so that you can comeback anytime and pick from where you left.

Jun 25, 2022

A component toolkit for creating live-running code editing experiences, using the power of CodeSandbox.

A component toolkit for creating live-running code editing experiences, using the power of CodeSandbox.

Sandpack Sandpack is a component toolkit for creating your own live running code editing experience powered by CodeSandbox. Learn more about Sandpack

Aug 1, 2022

This project is collection of large projects's source code (codebases), built with Reactjs. Eg: Bestbuy, Postman, Trello, Udacity, Coursera, Skillshare, Invision, Intercom, Pipedrive, ... and more.

This project is collection of large projects's source code (codebases), built with Reactjs. Eg: Bestbuy, Postman, Trello, Udacity, Coursera, Skillshare, Invision, Intercom, Pipedrive, ... and more.

This project is collection of large projects's source code (codebases), built with Reactjs. Eg: Bestbuy, Postman, Trello, Udacity, Coursera, Skillshare, Invision, Intercom, Pipedrive, ... and more.

Aug 5, 2022

Automatically finds jQuery methods from existing projects and generates vanilla js alternatives.

Automatically find jQuery methods from existing projects and generate vanilla js alternatives.

Jul 29, 2022

A library that makes using pdfjs in react projects easy.

A library that makes using pdfjs in react projects easy.

Feb 5, 2022

This is my Portfolio built with React. The app shows information about me, my projects, resume.

This is my Portfolio built with React. The app shows information about me, my projects, resume.

Elyor Doniyorov Built With React.js Live demo Netlify Live link Getting Started To get a local copy run the following steps: Copy this link https://gi

Jan 21, 2022

βœ‰οΈ Display e-mails in your React.js projects. (Targets Gmail rendering.)

βœ‰οΈ Display e-mails in your React.js projects. (Targets Gmail rendering.)

react-letter is a React.js component that allows for an easy display of HTML e-mail content with automatic sanitization. Support for features should m

Jul 27, 2022

ReactJs Advanced Projects

ReactJs-Advanced-Projects Tech We Used ReactJs Firebase Hosting Firebase Auth Firebase Storage React-Dom React Redux Steps to run in your machine Run

Jun 8, 2022

A starter for React with Typescript with the fast Vite and all static code testing with Eslint and formatting with Prettier.

A starter for React with Typescript with the fast Vite and all static code testing with Eslint and formatting with Prettier.

A starter for React with Typescript with the fast Vite and all static code testing with Eslint and formatting with Prettier.

Aug 4, 2022
Comments
  • 1. Dependencies and dev dependencies are not being installed

    Describe the bug:

    Dependencies and dev dependencies only display the installation message but do not do so when the process is finished.

    Expected behavior : Install sass for normal dependencie and prettier for devDependencie.

    // reexjs-app/package.json
    {
      "name": "reexjs-app",
      "version": "0.1.0",
      "private": true,
      "scripts": {
       ...
      },
      "dependencies": {
        ...
        "sass": "^1.32.12"
      },
      "devDependencies": {
        "prettier": "^2.2.1"
      }
    }
    

    Instead package.json is not modified after create-next/react-app.

    node version : 14.16.1 npm version : 7.11.1 reexjs-cli : 0.1.7

    Reviewed by codingcodax at 2021-05-06 19:22
  • 2. Folders are not created on Windows

    Describe the bug:

    In Windows folders(predefinedFolders and additionalFolders) are not created as in Linux, while in Linux they are created.

    Expected behavior (next.js) : Create predefinedFolders and additionalFolders like assets, lib, utils, etc.

    reexjs-app/
    β”œβ”€β”€ package.json
    β”œβ”€β”€ package-lock.json
    β”œβ”€β”€ pages/
    β”œβ”€β”€ public/
    β”œβ”€β”€ README.md
    β”œβ”€β”€ styles/
    β”œβ”€β”€ predefinedFolders/
    └── additionalFolders/
    

    This is the same with react.js.

    node version : 14.16.1 npm version : 7.11.1 reexjs-cli : 0.1.7

    Reviewed by codingcodax at 2021-05-05 22:02
React ESI: Blazing-fast Server-Side Rendering for React and Next.js
React ESI: Blazing-fast Server-Side Rendering for React and Next.js

React ESI: Blazing-fast Server-Side Rendering for React and Next.js React ESI is a super powerful cache library for vanilla React and Next.js applicat

Jul 29, 2022
An interactive, animated card memory game developed with React
An interactive, animated card memory game developed with React

Game Screenshots Click on the back of a card to flip it. If 2 cards match, they will remain face up. Unsuccessful matches increase the number of turns

Jul 28, 2022
Pathfinding-visualizer - An interactive platform to visualize Dijkstra's algorithm
Pathfinding-visualizer - An interactive platform to visualize Dijkstra's algorithm

?? Pathfinding Visualizer An interactive platform to visualize Dijkstra's algori

Jun 30, 2022
This is a solution to the Interactive comments section challenge on Frontend Mentor
This is a solution to the Interactive comments section challenge on Frontend Mentor

Interactive comments section This is a solution to the Interactive comments section challenge on Frontend Mentor. Frontend Mentor challenges help you

Jul 1, 2022
Render images as interactive particles
Render images as interactive particles

react-particle-image Render images as interactive particles Install npm install --save react-particle-image Links Demo (source) Docs Simple Usage code

May 28, 2022
CLI to replace vue with react in Laravel Jetstream

Laravel Jetstream React CLI Replaces the vue components in a fresh jetstream application with their react equivalents. You can view the full repo resu

Mar 20, 2022
CLI generetion componets React.js

compio CLI ?? Projeto O Compio tem como finalidade facilitar a criação de novos component custom para o Vtex.io ?? Instalação ⚠️ Cuidado a intalação d

Mar 15, 2022
⚽️ A CLI for searching pokemon stuff?
⚽️ A CLI for searching pokemon stuff?

A CLI to find information about Pokemon

Jul 3, 2022
Aug 3, 2022
Creating modals in React Framer Motion

Creating modals in React Framer Motion

Jul 21, 2022