Dumb React

I recently posted about my struggle to learn React. There are a lot of personal reasons for this, which I explain in the post. But I’ve also found it frustrating that many React tutorials, projects, and boilerplates I’ve encountered are either too basic (“here’s a button component!”), or more often too complex (“here’s a simple isomorphic redux babel typescript css-modules react-native graphql oh god oh god oh god…”). On the simple side, it’s a bit like how to draw an owl, and on the complex side I get overwhelmed as rendering boring markup tends to take a backseat to more exciting stuff like creating interactions, managing state, and other stuff.

So I wanted to show how to, uh, render a web page using React. Nothing more, nothing less. 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.

So with that, I’d like to introduce Dumb React. Dumb React is a collection of dumb React components that are used to stitch together a website screen. You can see it in action on Glitch, or check it out on Github. I also created a Dumb React Sass version that handles CSS differently.

Screenshot from Dumb React, a basic demo that shows how to take components, include them inside of one another to build a simple, static page.

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. It uses Storybook to display individual components, which looks something like this:

Big thanks to Dan Abramov for reviewing the project and giving some great guidance. And big thanks to Micah Godbolt for the starter, for walking me through some of this architecture, and for reviewing the project.

I hope this project can help people better understand how UIs get built using React without overwhelming them. If you have thoughts, opinions, or improvements, feel free to open an issue and reach out on Twitter.