❯ 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 with npm:

$ npm install -g cli-rjs

Install with yarn:

$ yarn global add cli-rjs

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

|-- /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

$ 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

License

rjs-cli is open source software licensed as MIT.