generator-react-tdd

A lightweight react template. A simple start with linting, formating and testing.

Installation

First, install Yeoman and generator-react-tdd using npm (we assume you have pre-installed node.js).

npm install -g yo
npm install -g generator-react-tdd

Main command

yo react-tdd

Existing sub commands (explained below)

yo react-tdd:atom
yo react-tdd:molecule
yo react-tdd:organism
yo react-tdd:page

Project generation

1. Generate an react project

yo react-tdd

Enter the name of the project in capital case

? Your project name (TEMP): Myproject

1.1

Enter the created project folder. Init the git repository and install packages:

cd Myproject
git init
yarn install

2. Adding components

I prefer to split my components on their size. I have chosen to follow the Atomic design format. Based on this design pattern I would sort my components in folders atom, molecules, organisms and pages.

2.1 The command structure for components generation is the follow.

yo react-tdd:<component type>

For example you want to create an atom. Then you have to execute

yo react-tdd:atom

The prompt will reply:

? Atom module name:

Enter the component name with capital case.

Scripts

1. start development server

yarn start

2. test

yarn test

3. start storybook

yarn storybook

4. test with coverage

yarn test:ci

License

MIT © alexanderkrum