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-creatoryarn
$ 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.jsCan 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.