dumb-react

by bradfrost

bradfrost /dumb-react
451 Stars 19 Forks Last release: Not found 41 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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
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
  - Component.css
  - 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.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.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.