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.
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
storiesfolder has been changed to
componentsand a new Button component has been scaffolded and used in the application.
git clone https://github.com/bradfrost/dumb-react.git && cd dumb-react
npm install
npm startwill start the application
npm run storybookwill start the storybook.
Start building in the
src/componentsfolder with this folder structure
- ComponentName - Component.css - ComponentName.stories.js - ComponentName.js
Create
src/components/Buttonand add
Button.css,
Button.jsand
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.
npm run storybook
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;
npm start
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.