Dumb React Sass

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 simple babel typescript redux cssmodules isometric oh god oh god oh god..."). I wanted to be able 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 dumb, static one) one out of React components.

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 folder has been changed to components and a new Button component has been scaffolded and used in the application.

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 folder with this folder structure

- ComponentName
  - ComponentName.stories.js
  - ComponentName.js

Create src/components/Button and add Button.css, Button.js and Button.stories.js

Button.js will be:

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

export class Button extends Component {
  render() {
    return (
      <button className="Button" {...this.props}> {this.props.children} </button>
    );
  }
}

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', () =>
  <Button onClick={() => console.log("clicked!!")}>
    Hello Button
  </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 (
      <div className="App">
        <Button onClick={() => alert('i was clicked!')} > Click Me Please </Button>
      </div>
    );
  }
}

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