React Start

Design principles

atomic design
isomorphic js

React Starter Kit

React Starter Kit is an opinionated boilerplate for web development built on top of Node.js, Express, GraphQL and React, containing modern web development tools such as Webpack, Babel and Browsersync. Helping you to stay productive following the best practices. A solid starting point for both professionals and newcomers to the industry.

Documentation

Setup

$ git clone -o react-starter-kit -b master --single-branch https://github.com/kriasoft/react-starter-kit.git react-start
> $ cd react-start
> $ yarn (install)
> $ yarn start

Storybook

Storybook is a UI development environment and playground for UI components. The tool enables users to create components independently and showcase components interactively in an isolated development environment.

Storybook runs outside of the main app so users can develop UI components in isolation without worrying about app specific dependencies and requirements.

Setup

$ yarn add --dev @storybook/react

Add the following to package.json

"scripts": {
  {
    "storybook": "start-storybook -p 9001 -c .storybook"
  }
}

Create a config file, name it .storybook/config.js and fill it:

import { configure } from '@storybook/react';

function loadStories() {
  require('../stories/index.js');
  // You can require as many stories as you need.
}

configure(loadStories, module);

Add stories in the referenced file above, ../stories/config.js

import React from 'react';
import { storiesOf } from '@storybook/react';
import { Button } from '@storybook/react/demo';

storiesOf('Button', module)
  .add('with text', () => <Button>Hello Button</Button>)
  .add('with some emoji', () => (
    <Button>
      <span role="img" aria-label="so cool">
        😀 😎 👍 💯
      </span>
    </Button>
  ));

$ yarn storybook

Source

Storybook for React

General links

Should you use React Storybook?
github repo