react-cnp-component-creator v0.2.1

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

📑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.