react-cnp-component-creator

Generates react components based on the Container&Presenter pattern. Support Both class and functional components! 한국어 가이드 문서

💡Installation

npm

$ npm install -g react-cnp-component-creator

yarn

$ yarn global add react-cnp-component-creator

📖Usage

Generate component to the directory where you want.

$ crc -n <component-name> -d <directory-name>

Can skip directory-name (default directory : src/)

$ crc -n <component-name>

Will make 3 files.

$ crc -n example // The first character is automatically converted to uppercase.

CREATE src/Example/ExamplePresenter.js
CREATE src/Example/ExampleContainer.js
CREATE src/Example/index.js

Can make class component

$ crc -n <component-name> -c

⚙️Options

| name | alias | description | | --------- | ----- | -------------------------------------------- | | name | n | Name of component will create | | directory | d | Path of component will create (default: src) | | classType | c | Create a component a class component |

📑File Content

index.js

import Example from "./ExampleContainer.js";
export default Example;

ExampleContainer.js

import react from "react";
import ExamplePresenter from "./ExamplePresenter";

const ExampleContainer = () => {
    return <ExamplePresenter />;
};

export default ExampleContainer;

ExamplePresenter.js

import react from "react";

const ExamplePresenter = () => {
    return <></>;
};

export default ExamplePresenter;

class component

ExampleContainer.js

import React, { PureComponent } from "react";
import ExamplePresenter from "./ExamplePresenter";

class ExampleContainer extends PureComponent {
    state = {};
    render() {
        const {} = this.props;
        const {} = this.state;
        return <ExamplePresenter {...this.props} />;
    }
}

export default ExampleContainer;

ExamplePresenter.js

import React, { PureComponent } from "react";

class ExamplePresenter extends PureComponent {
    render() {
        const {} = this.props;
        return <>Example Component!</>;
    }
}

export default ExamplePresenter;

😵Check list

Can't overide existing folder & file.