Redwood's Revenge Walkthrough PT I, Storybook
Tags: react, redwoodjs, community, storybook
Published: 2021-02-05 08:22:24



[Redwood](https://redwoodjs.com) is a full-stack framework that combines many of our favorite JavaScript libraries into a fully integrated development experience that allows you to optimize for productivity and scalability. 
It's catch phrase is:
> Bringing full-stack to the jamstack

I want to take you along my journey learning RedwoodJS, starting with part II of the tutorial on the official website.

## # Prerequisites
There is nothing too complicated about Redwood if you are already familiar with the underlying technologies and is even a good way to learn some of them, however where I will be starting this blog won't make much sense if you haven't read my friend Anthony's [RedwoodJS Series](https://dev.to/ajcwebdev/a-first-look-at-redwood-js-1017).

## # Beginning
Alright, so you have done some reading, gotten through the first portion of the redwood tutorial, and have yourself a nice blog site to call your very own. If you are following the [PT II tutorial](https://redwoodjs.com/tutorial2/welcome-to-redwood-part-ii-redwood-s-revenge) they say you can continue with your repo from the first portion of the tutorial; however you would be unable to follow along 1-for-1. I used the new [repo](https://github.com/redwoodjs/redwood-tutorial), however you may find the additional work you do in keeping parity with the tutorial leads you to learn more than you otherwise would.


## # [Storybook](https://storybook.js.org/)
This piece of tech was completely new to me going into this tutorial; if I am being honest I was rather skeptical of how exactly it was going to be useful. After using it in just the brief time that I have, I can not imagine going back to doing something else. Simply put, if you are using reusable components in your UI that have props passed into them, storybook gives you a incredible developer workflow.

Pieces of tech like this aren't normally of great value to a newer developer such as myself, as learning to actually integrate it into my workflow takes even longer than my potential productivity gains. My projects tend to be smaller in scope, so I would have traditionally viewed this as more of an "enterprise" tool. However, Redwood gives this tooling and integration with your project for the low configuration cost of......Free! *It Just Works* ™. If you have picked up on ANYTHING in the Redwood philosophy, it should be that adding new technologies to your project does not need to be so painful.

With no prior experience to Storybook or any similar tech, I was able to quickly get productive with it. I understood what its' purpose was, how to use it, and how to navigate the docs to dig deeper if I needed to. It felt almost like a form of testing, but instead of testing code, it tested design. I could quickly slap code together to see how things looked. The real kicker for me was that all of it would be based off of data that had the same shape I would be using.

This portion of the data was a big selling point for me. All of the other stuff is non-trivial, and I don't want to discount how great all of it is. That being said, having redwood create a file for me that would allow me to mock the data without actually making a graphql call was mind blowing to me. I adjusted my `SomeCell.mock.js`, and then with no other code changes Story Book would display new data.

Story book seemed good, but the Redwood functionality sprinkled on top pushed it over the edge for me. When I am building an mvp, I like to do my UI portion first, and then build out my queries for my use-cases.
This usually involves a bit of breaking, fixing, and re-breaking my frontend as I fully integrate my api into my UI. Storybook with Redwood fixes all of that.

## # Lessons Learned

Storybook is good. Storybook with RedwoodJS is *AMAZING*. If you have not given it a whirl before, the tutorial is a great place to get a feel for how it feels to build out a redwood application. In addition, if you don't have figurative streaks of grey in your programming beard, Redwood is an excellent way to learn some of the proper development workflows that not only keep you productive, but keep your code hygienic. 

### Really, try it out. 
# Seriously. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/o164zlylj6v8u7ehqz7t.gif)

## # Conclusion

I know I did not go over individual lines of code, but I really want to have this series be my impressions of the tutorial, as it is excellently written by [Rob Cameron](https://twitter.com/cannikin) on the core Redwood team. I haven't found myself needing to go elsewhere to figure out why something isn't working. I would be foolish however to not tell you where to go should you come into a problem that you can't fix on your own! 
The community around this project is truly like none other, and you could not ask for a friendlier bunch of folks. You can catch people over on the [community forums](https://community.redwoodjs.com/). There is also a [discord](https://discord.com/invite/jjSYEQd) if you want to pop in and say hi, or if you have a quick question you need help with.