Supercharge your CreateReactApp workflow with Hygen

React Components

const Avatar = ({ name }) => <div>{name}</div>
  • A functional component (like the one above).
  • A PureComponent which you'd use when you know you don't have state.
  • A stateful component when you know you have a component state.


$ brew tap jondot/tap && brew install hygen
$ yarn global add hygen
$ yarn add --dev hygen

Your New Workflow

$ brew tap jondot/hygen
$ brew install hygen
$ yarn global add create-react-app hygen-add storybook/@cli
$ create-react-app myapp && cd myapp
$ getstorybook
$ yarn add --dev react-test-renderer
$ yarn storybook
$ yarn start
$ hygen-add cra
$ hygen

Available actions:
component: help, new
$ hygen component help

hygen component new --name NAME [--stateful] [--functional]

Generates a React component, a storybook, and a test.

NAME The component name in kebab-case (required).
--stateful Generate a stateful component (optional).
--functional Generate a functional component (optional).

If no flags given, will generate a PureComponent.
$ hygen component new --name avatar

Loaded templates: _templates
added: src/components/avatar/avatar.story.js
added: src/components/avatar/avatar.test.js
added: src/components/avatar/index.js
inject: src/stories/index.js
$ tree _templates
└── component
├── help
│ └── index.txt.t
└── new
├── comp.story.js.t
├── comp.test.js.t
├── index.js.t
└── inject_story.t



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Dotan Nahum

Dotan Nahum

@jondot | Founder & CEO @ Spectral. Rust + FP + Hacking + Cracking + OSS. Previously CTO @ HiredScore, Como, Conduit.