CLI RJS

❯ Why ?

To help speed up productivity in React projects and stop copying, pasting, and renaming files each time you want to create a new component.

---

❯ Getting started

• Install
• Usage
  • Init
  • Generate Components

---

❯ Install

Install with npm:

$ npm install -g cli-rjs

Install with yarn:

$ yarn global add cli-rjs

---

❯ Usage

Init

$ rjs init <appName> [options]

Once installed, creating a new React project is simple. You can simply run:

$ rjs init yourAppName

Or if you don't want to install you can run:

$ npx rjs init yourAppName

(npx is a package runner tool that comes with npm 5.2+)

Or just simply :

$ rjs init

If you don't specify a name for your app it will trigger the interactive mode.

Options

You can configure your app by adding some options

Option	Description	Value Type	Default Value
--use-typescript, -t	Creates the project with the cra typescript template	boolean	false
--use-router, -r	Installs react-router-dom right after finishing project creation	boolean	false
--use-sass, -S	Installs node-sass right after finishing project creation	boolean	false
--use-modules, -m	Configures the project for css modules	boolean	false
--use-redux, -R	Creates a redux store with all the needed folders (actions, reducers..)	boolean	false
--use-axios, -a	Sets up axios for the project	boolean	false
--use-npm, -N	Uses npm as a package manager	boolean	false
--interactive, -i	Triggers the interactive mode asking all of the above	boolean	false

With default values the structure of your project will look like this:

|-- /node_modules
|-- /public
|-- /src
    |-- /App
        |-- App.css
        |-- App.js
        |-- App.test.js
    |-- assets
        |-- /css
            |-- index.css
            |-- reset.css
        |-- /images
    |-- index.js
    |-- logo.svg
    |-- reportWebVitals.js
    |-- setupTests.js
|-- .gitignore
|-- package.json
|-- README.md
|-- yarn.lock

Example commands with different option

with typescript, redux and sass

$ rjs init -tRS

What you'll get

|-- /node_modules
|-- /public
|-- /src
    |-- /App
        |-- App.scss
        |-- App.tsx
        |-- App.test.tsx
    |-- assets
        |-- /images
        |-- /scss
            |-- _reset.scss
            |-- _variables.scss
            |-- index.scss
    |-- /containers
        |-- /App
            |-- App.ts
    |-- /store
        |-- / actions
            |-- index.ts
            |-- actions.template.ts
        |-- / middlewares
            |-- index.ts
            |-- middleware.template.ts
        |-- / reducers
            |-- index.ts
            |-- reducer.template.ts
        |-- / selectors
        |-- index.ts
    |-- index.js
    |-- logo.svg
    |-- react-app-env.d.ts
    |-- reportWebVitals.js
    |-- setupTests.js
|-- .gitignore
|-- package.json
|-- README.md
|-- yarn.lock

with typescript, sass and css modules

$ rjs init -tmS

What you'll get

|-- /node_modules
|-- /public
|-- /src
    |-- /App
        |-- App.module.scss
        |-- App.tsx
        |-- App.test.tsx
    |-- assets
        |-- /images
        |-- /scss
            |-- _reset.scss
            |-- _variables.scss
            |-- index.scss
    |-- index.js
    |-- logo.svg
    |-- react-app-env.d.ts
    |-- reportWebVitals.js
    |-- setupTests.js
|-- .gitignore
|-- package.json
|-- README.md
|-- yarn.lock

Generate Components

$ rjs generate-component | gc <name> [directory] [options]

This command will create a folder with your component name within your default (e.g. src/components) directory, and its corresponding file.

To create a component just run:

$ rjs generate-component Header

Or you can use an alias

$ rjs gc Header

This will generate a folder and a .js file with your component name.

|-- /src
    |-- /components
        |-- /Header
            |-- Header.js

Example of the javascript generated component

import React from 'react';
import PropTypes from 'prop-types';

const Header = () => {
  return <div>Header Component</div>;
};

Header.propTypes = {};

export default Header;

You can also attach a style file with you component:

$ rjs generate-component Header -s css

This will generate a folder with a .js file and a css file with your component name.

|-- /src
    |-- /components
        |-- /Header
            |-- Header.js
            |-- Header.css

You can also use typescript and css modules:

$ rjs gc Header -tms css

or

$ rjs generate-component Header --use-typescript --use-modules -with-styles scss

This will generate a folder with a .tsx file and a scss module file with your component name.

|-- /src
    |-- /components
        |-- /Header
            |-- Header.tsx
            |-- Header.module.scss

Example of the typescript generated component

import React, { FC } from 'react';
import styles from './Header.module.scss';

interface HeaderProps {}

const Header: FC<HeaderProps> = () => {
  return <div className={styles.Header}>Header Component</div>;
};

export default Header;

Directory

You can also specify a directory name or path for your component, it will create a path from where you currently are

if you're in src directory and want to create a Nav component in the components/Header/Nav

# path : src

$ rjs gc Nav components/Header/Nav -tms scss

Result

|-- /src
    |-- /components
        |-- /Header
            |-- Header.tsx
            |-- Header.module.scss
        |-- /Nav
            |-- Nav.tsx
            |-- Nav.module.scss

You can also create a component in the folder where you currently are by using . as a directory name.

Let's say you want to create a Layout component with typescript in your components directory

# path : src/components
$ rjs gc Layout . -t

Result

|-- /src
    |-- /components
        |-- /Header
            |-- Header.tsx
            |-- Header.module.scss
        |-- Layout.tsx

Options

Here are all the available options

Option	Description	Value Type	Default Value
--use-typescript, -t	Creates the component with typescript	boolean	false
--use-styles <type>, -s <type>	Creates a style file along with the component file	scss | css | false	false
--use-modules, -m	Configures the component and style file to use "css modules"	boolean	false
--class, -c	Configures the component and style file to use "css modules"	boolean	false

License

rjs-cli is open source software licensed as MIT.