Create-react-js-component-cli NPM

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

--------------------------------------------------

Please enter the component name: MyComponent
componentName is:  MyComponent
--------------------------------------------------

Where do you want to create your component?
Default option is "/src"

For example "src/core/components" 

Please enter your choice: src
--------------------------------------------------

Your component will be created in this path: "src"

--------------------------------------------------

Which language do you want to use?
Default option is "js"
Please enter the number of your choice (1/2):

1. JavaScript (JS)
2. TypeScript (TS)

Please enter your choice: 1
--------------------------------------------------

Your component will be created in: "JavaScript" 

--------------------------------------------------

Which stylesheet language do you want to use?
Default option is "CSS"
Please enter the number of your choice (1/2):

1. CSS
2. SCSS

Please enter your choice: 1
-------------------------------------------------- 

Your stylesheet language is: "CSS" 

--------------------------------------------------

Do you want to create a test file?
Default option is "No"
Please enter the number of your choice (1/2):

1. Yes
2. No

Please enter your choice: 1
-------------------------------------------------- 

Your component will include TEST file named: "myComponent.test.js" 

--------------------------------------------------

Creating << myComponent >> folder...

Creating << MyComponent.jsx >> file...

Creating << index.js >> file...

Creating << myComponent.css >> file...

Creating << MyComponent.test.js >> file...

--------------------------------------------------

1 folder named "myComponent" & 4 files have been created successfully!

Your directory structure is:

  src/
  └── myComponent
      ├── MyComponent.jsx
      ├── myComponent.css
      ├── index.js
      └── myComponent.test.js

--------------------------------------------------

Thank you for using create-react-js-component-cli

Created by @ Ali Helmi: ahelmi365@gmail.com

--------------------------------------------------

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:

  Welcome to the Create-React-Component-cli

  --------------------------------------------------

  componentName is:  MyComponent
  --------------------------------------------------

  Your component will be created in this path: "src/"

  --------------------------------------------------

  Your component will be created in: "JavaScript"

  --------------------------------------------------

  Your stylesheet language is: "CSS"

  --------------------------------------------------

  Creating << myComponent >> folder...

  Creating << MyComponent.jsx >> file...

  Creating << index.js >> file...

  Creating << myComponent.css >> file...

  Creating << myComponent.test.js >> file...

  --------------------------------------------------

  1 folder named "myComponent" & 4 files have been created successfully!

  Your direwctory structure is:

  src/
  └── myComponent
      ├── MyComponent.jsx
      ├── myComponent.css
      ├── index.js
      └── myComponent.test.js

  --------------------------------------------------
```

```commandline

  Thank you for using create-react-js-component-cli

  Created by @ Ali Helmi: ahelmi365@gmail.com

  --------------------------------------------------
```

Files Content:

The tool will create the following files content:
MyComponent.jsx

import React from 'react';

import './myComponent.css'; 

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

export default MyComponent;

index.js

export { default } from "./MyComponent";

myComponent.css

.myComponent {
  /* write your styles here */
}

myComponent.test.js

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

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