create-react-component

A simple CLI tool to create react components with a single command.

Note:

• You should install Node.js first.
• This tool is only for React.js projects.
• You shoudl install this tool globally by adding -g flag.

Installation

npm i create-react-js-component-cli -g

Options:

• You can run the following command to see the available options:

crc --help

• The tool will show you the following options:

Options:
  --version  Show version number                                       [boolean]
  --name     The name of the component                                  [string]
  --path     The path to the component directory                        [string]
  --js       Use JavaScript file extesnion            [boolean] [default: false]
  --ts       Use TypeScript file extension            [boolean] [default: false]
  --css      Whether to use a CSS file                [boolean] [default: false]
  --scss     Whether to use a SCSS file               [boolean] [default: false]
  --test     Whether to include a test file           [boolean] [default: false]
  --help     Show help                                                 [boolean]

Usage:

• There are 2 ways to use this tool:

  The first way:

  • The first way is to run the following command and follow the instructions:

    crc

  • crc: stands for "create-react-component"

  • The tool will ask you for some information about the component you want to create:

    Welcome to the Create-React-Component-cli version #.#.###
    
    -------------------------

    Component name: MyComponent
    -------------------------

    Enter component path (to use the current directory press ENTER): src
    
    -------------------------

    Select language:
    
    1. JavaScript
    2. TypeScript
    
    Please enter 1 or 2 (Default is JavaScript): 2
    -------------------------

    Select stylesheet format:
    
    1. CSS
    2. SCSS
    
    Please enter 1 or 2 (Default is CSS): 2
    -------------------------
    

    Include TEST file?
    
    1. Yes
    2. No
    
    Please enter 1 or 2 (Default is No): 2
    -------------------------
    

    Creating all necessary folder and files...
    
    -------------------------

    Your directory structure is:
    
      src/
      └── myComponent
          ├── hooks
              ├── useMyComponent.tsx
          ├── style
              ├── myComponent.scss
          ├── MyComponent.tsx
          └──  index.ts
    
    -------------------------

    Thank you for using create-react-js-component-cli
    
    Created by @ Ali Helmi: [email protected]
    
    -------------------------

  The second way:

  • The second way is to run the following command:

    crc --name "MyComponent" --path "/src" --js --css --test

  • The tool will create the component with the following options:

    • Component name: MyComponent
    • Component path: /src
    • Language: JavaScript
    • Stylesheet language: CSS
    • Test file: Yes

  • The tool will create the following files inside the path you specified:

      Your direwctory structure is:
    
      src
        └── myComponent
            ├── hooks
                ├── useMyComponent.jsx
            ├── style
                ├── myComponent.css
            ├── MyComponent.jsx
            ├── index.js
            └── myComponent.test.js
    
      -------------------------

    
      Thank you for using create-react-js-component-cli
    
      Created by @ Ali Helmi: [email protected]
    
      -------------------------

Files Content:

• The tool will create the following files content:

• MyComponent.jsx

import "./style/myComponent.css";
import useMyComponent from "./hooks/useMyComponent";

const MyComponent = () => {
  return <div className={"myComponent-container"}>MyComponent works!</div>;
};

export default MyComponent;

• useMyComponent.jsx

const useMyComponent = () => {};

export default useMyComponent;

• index.js

export { default } from "./MyComponent";

• myComponent.css

.myComponent-container {
}

• myComponent.test.js

import React from "react";
import { render, screen } from "@testing-library/react";
import MyComponent from "./MyComponent";

describe("MyComponent", () => {
  it("should render successfully", () => {});
});

License

This project is licensed under the MIT License - see the LICENSE file for details.