Noodle Printing Machine

    cli-rjs

    1.0.2 • Public • Published

    CLI RJS

    License

    ❯ 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

    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.

    Install

    npm i cli-rjs

    DownloadsWeekly Downloads

    0

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    137 kB

    Total Files

    40

    Last publish

    Collaborators

    • zayenjs