Need help with dumb-react?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

bradfrost
451 Stars 18 Forks 41 Commits 3 Opened issues

Services available

!
?

Need anything else?

Contributors list

# 53,245
CSS
Node.js
pattern...
PHP
28 commits
# 5,937
TypeScr...
css-in-...
redux-t...
Redux
4 commits
# 73,037
TypeScr...
modern-...
cash
jQuery
1 commit
# 605,689
CSS
HTML
1 commit
# 660,056
CSS
HTML
1 commit
# 533,370
CSS
HTML
1 commit

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.