generator-mnml-component
v0.0.6
Published
yeoman generator for minimalistic React components
Downloads
14
Maintainers
Readme
mnml React Component Generator
When components obey the single responsibility principle, they're easier to develop, test, refactor, troubleshoot...
mnml is a Yeoman scaffolding generator for creating React components that align with this philosophy.
Principles of mnml components:
- A component should have a single responsibility (Ex: connect with Redux)
- Components should be grouped together by feature (Ex: ButtonContainer, ButtonWithState, ButtonPresenter)
- Component groups should have a wrapper component (Ex: Button)
- Each component should have a separate test file (except for the wrapper component)
Quickstart
Install Yeoman
npm install -g yo
Install the mnml Component Generator
npm install -g generator-mnml-component
Generate a Component
yo mnml-component
Types of Components
These are the possible Components that could be generated using mnml-component
Presenter
Folder Structure
- ComponentName
index.js
ComponentNamePresenter.js
__tests__
ComponentNamePresenter.spec.js
Component Hierarchy
ComponentName
ComponentNamePresenter
Container Presenter
Folder Structure
- ComponentName
index.js
ComponentNameContainer.js
ComponentNamePresenter.js
__tests__
ComponentNameContainer.spec.js
ComponentNamePresenter.spec.js
Component Hierarchy
ComponentName
ComponentNameContainer
ComponentNamePresenter
Container WithState Presenter
Folder Structure
- ComponentName
index.js
ComponentNameContainer.js
ComponentNameWithState.js
ComponentNamePresenter.js
__tests__
ComponentNameContainer.spec.js
ComponentNameWithState.spec.js
ComponentNamePresenter.spec.js
Component Hierarchy
ComponentName
ComponentNameContainer
ComponentNameWithState
ComponentNamePresenter
Todo
- [ ] add support for Apollo client
- [ ] add support for TypeScript