Dumb React

Dumb React is a collection of React components used to create a static (dumb) website screen. Why do this? Many React tutorials or boilerplates I've encountered are either too basic ("here's a button component!") or more often too complex ("here's a simple babel typescript redux cssmodules isometric oh god oh god oh god..."). I wanted to be able to draw a straight line from how a simple component ("atom" in atomic design speak) makes its way into a full page.

There are a ton of different ways to build reusable components and put dynamic content inside them, and many teams — even ones that aren't building highly-interactive web apps that would actually benefit from a tool like React — are reaching for React to create component-driven experiences. So in that spirit, I wanted to create a demo that shows how to construct a whole screen (even if it's a dumb, static one) out of React components.

More info in my blog post

React w/ Storybook Starter

This repo is a fork of Micah Godbolt's React with Storybook Starter, which is a combination of Create React App and the Storybook CLI. The

stories

components

Using This Repo

• git clone https://github.com/bradfrost/dumb-react.git && cd dumb-react

• npm install

• npm start

  will start the application

• npm run storybook

  will start the storybook.

Building components

Start building in the

src/components

- ComponentName
  - Component.css
  - ComponentName.stories.js
  - ComponentName.js

Create

src/components/Button

Button.css

Button.js

Button.stories.js

Button.js will be:

import React, { Component } from 'react';
import './Button.css';

export class Button extends Component {
  render() {
    return (
       {this.props.children} 
    );
  }
}

Button.stories.js will be:

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

let stories = storiesOf('Button', module);
stories.add('Default', () =>
   console.log("clicked!!")}>
    Hello Button
  
);

Button.css is plain CSS, but will automatically be loaded when the component is used.

Run Storybook

npm run storybook

Add Button to App.js

import React, { Component } from 'react';
import { Button } from './components/Button/Button';

class App extends Component {
  render() {
    return (
      

         alert('i was clicked!')} > Click Me Please 
      
    );
  }
}

export default App;

Run the application

npm start

Adding Sass

Adding Sass involves "ejecting" out of create react app. This process is out of the scope of this demo, but I'll include some links below.

• Adding Sass support to Create React App
• Adding Sass support to Storybook