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

Overview

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 <dependencies>)
    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 <devDependencies>)
    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.

You might also like...

Most modern mobile touch slider with hardware accelerated transitions

Most modern mobile touch slider with hardware accelerated transitions

Get Started | Documentation | Demos Swiper Swiper - is the free and most modern mobile touch slider with hardware accelerated transitions and amazing

Jan 5, 2023

Github Leaderboard API - Most popular users, repositories, etc.

Github Leaderboard API Data pengguna, repositori, organisasi populer yang ada di Github dan diurutkan berdasarkan jumlah dari informasi tertentu, misa

Dec 22, 2022

An application to capture the 10 most watched movies/series on netflix.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Feb 6, 2022

A boilerplate for kickstarting my projects with Django backend and React front-end

Django-React-Boilerplate This is a boilerplate for kickstarting my projects with Django backend and React front-end. (AND, PostgreSQL) as the database

Apr 14, 2022

Common React Native components used by "Roqay" packed in library for usage in future projects.

Roqay Common React Native Components Common React Native components used by Roqay packed in library for usage in future projects. Installation yarn ad

Feb 10, 2022

Recoil is an experimental state management library for React apps. It provides several capabilities that are difficult to achieve with React alone, while being compatible with the newest features of React.

Recoil Β· Recoil is an experimental set of utilities for state management with React. Please see the website: https://recoiljs.org Installation The Rec

Jan 8, 2023

Next-multipart - Easy & Simple File Uploads for Next.js

Next-Multipart Next-multipart is a small utility library to ease the process of file uploads with Next.js. It uses formidable under the hood, but with

Nov 11, 2022

βš›οΈ Hooks for building fast and extendable tables and datagrids for React

βš›οΈ Hooks for building fast and extendable tables and datagrids for React

Hooks for building lightweight, fast and extendable datagrids for React Enjoy this library? Try them all! React Query, React Form, React Charts Visit

Jan 3, 2023

A portfolio built in React and NextJS. Simple, clean, and fast.

A portfolio built in React and NextJS. Simple, clean, and fast.

Personal Portfolio A portfolio built in React and NextJS. Simple, clean and fast. Note: The logo and banner used in the project are my intellectual pr

Jan 2, 2023
Comments
  • Dependencies and dev dependencies are not being installed

    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

    bug 
    opened by codingcodax 0
  • Folders are not created on Windows

    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

    bug good first issue 
    opened by codingcodax 0
Releases(v1.1.2)
Owner
Alexis Guzman
Front-end web developer
Alexis Guzman
React components for efficiently rendering large lists and tabular data

react-window React components for efficiently rendering large lists and tabular data React window works by only rendering part of a large data set (ju

Brian Vaughn 13.5k Jan 4, 2023
You can use this CLI Tool to clean your iOS and Android projects and keep them updated.

Mobile App Cleaner You can use this CLI Tool to clean your iOS and Android projects and keep them updated. This tool automatizes these items below; Cl

automizer 21 Mar 19, 2022
A personal project, made with React, React Native, Typescript and some of the most used front-end libraries.

A personal project, made with React, React Native, Typescript and some of the most used front-end libraries.

Alvaro Junior 1 Jul 23, 2022
React components and hooks for creating VR/AR applications with @react-three/fiber

@react-three/xr React components and hooks for creating VR/AR applications with @react-three/fiber npm install @react-three/xr These demos are real,

Poimandres 1.4k Jan 4, 2023
React-Mini-Projects - Simple React mini-applications

React Mini Projects A Fully Responsive React Application contain these mini apps : Todo App Movie App Budget App Flash Card App Factor App This app wa

Morteza Rezaienia 1 Jan 1, 2022
Creating this clone to learn the fundamentals of Next Js and Tailwind CSS.

Next.js + Tailwind CSS Example This example shows how to use Tailwind CSS (v3.0) with Next.js. It follows the steps outlined in the official Tailwind

Premveer Tomar 2 Feb 2, 2022
🌈 React for interactive command-line apps

React for CLIs. Build and test your CLI output using components. Ink provides the same component-based UI building experience that React offers in the

Vadim Demedes 19.7k Jan 3, 2023
A collection of composable React components for building interactive data visualizations

an ecosystem of composable React components for building interactive data visualizations. Victory Contents Getting Started Victory Native API Document

Formidable 10.1k Jan 3, 2023
A small CLI tool to create a semantic release and git-cliff powered Changelog

cliff-jumper A small CLI tool to create a semantic release and git-cliff powered Changelog Description When managing a collection of projects you ofte

Favware 15 Sep 22, 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

Sander Paniago 8 Mar 15, 2022