UI Development Tools For React

Articles & Tutorials

How design systems use Storybook (medium.com)
Feb 11, 2020
A roundup of the best Storybook techniques from leading design systems.
  • Dominic Nguyen
Component Story Format (medium.com)
Jul 29, 2019
Storybook 5.2 introduces Component Story Format (CSF), a new way to author stories based on ES6 modules. Component Stories are simple, easy to read, and decoupled from Storybook’s internal API so you can use them anywhere.
  • Michael Shilman
How React Storybook can simplify component testing (blog.logrocket.com)
Jul 25, 2019
In this post, we will find out how Storybook can help us create UI components and improve our component testing.
  • Raphael Ugwu
Component Development with Storybook and KendoReact (telerik.com)
Jul 23, 2019
Storybook provides a great environment for experimenting with UI components in isolation and through a variety of different configurations. In this article, I'll show you how to get started with Storybook, highlight a few add-ons, and showcase a Storybook built for KendoReact.
  • John Bristowe
How to use Storybook with React (tducasse.netlify.com)
Jun 19, 2019
Storybook is an open source tool for developing UI components in isolation.
  • Thibaud Ducasse
Building a UI Component with React and Storybook (scotch.io)
Jun 11, 2019
In this article, I’ll be explaining how to build an interactive UI component using React and Storybook. We’ll be creating a UI component using Storybook and React and at the end of the tutorial, we’ll deploy the storybook as a stand-alone application to serve as a style guide.
  • Egwuenu Gift
Documenting React Components With Storybook (dev.to)
May 06, 2019
Storybook markets itself as a playground for UI components and its main focus is on “writing stories.”
  • Emma Wedekind
How to build a React development playground using Storybook (medium.freecodecamp.org)
Apr 02, 2019
Lately, I have been wanting to try new things and test out new technologies or patterns in my React components. I needed a place where I could test these things out without launching a new app every time.
  • Sarah Sweat
Storybook 5.0 (medium.com)
Mar 05, 2019
Welcome to the future of component development! We’re kicking off 2019 with Storybook 5.0 (SB5), our biggest release to date.
  • Michael Shilman
Cosmos 4.7—the version that shows you the future (medium.com)
Jan 22, 2019
Under the hood Cosmos Next has a new foundation, which essentially is my attempt at building a world class dev platform with delightful UX, while in the process relearning what good software looks like.
  • Ovidiu Cherecheș
React Proto 2.0 Beta— Revitalized! (medium.com)
Jan 10, 2019
React Proto is a React prototyping tool built and designed with both designers and developers in mind.
  • Darryl Amour

Video Guides & Talks

Screenshot Testing React Native Apps with Percy (youtube.com)
Jul 31, 2019
Visual regressions in mobile applications can be serious problems and are notoriously tedious to catch. Hours, even days, can be spent manually sifting through screenshots of a mobile application before releasing it to real users. With automated screenshot testing, much of this tedium can be avoided, and mobile app developers can be empowered to iterate with confidence.
  • Carly Litchfield
Get up to speed on Storybook @ ReactNYC (youtube.com)
May 29, 2018
Introducing Learn Storybook - a hands-on tutorial that teaches you the fundamentals of isolated component development. If you’re like me, you may have heard of Storybook and initially overlooked it. Another day, another dev tool. But teams at Airbnb, Dropbox, and Github use it so you might be wondering what the hype is about. This lightning talk briefs you on Storybook and introduces open source tutorial Learn Storybook (React contributors needed).
  • Dominic Nguyen
The Dream of Styleguide Driven Development (youtube.com)
Nov 08, 2017
With the use of React, CSS Modules, Flow and Snapshot testing we were able to almost remove style regressions. In this talk you get a glimpse of you can start styleguide driven development and how you can sell this dream to your project managers.
React-Storybook: Design, Develop, Document and Debug your React UI components (youtube.com)
Nov 08, 2017
Designing UI React components is not an easy task. They often rely on several states that are hard to reproduce when we are developing in the middle of an existing app. Worst, once a component is live, how do we make sure that its well documented.
  • Marie Laure Thuret
The Evolution of React UI Development (youtube.com)
Jun 06, 2016
Hot reloading makes for a great Developer Experience, but we can do even better. Using interactive style guides that show our components in a variety of different states we can test their look and feel in diverse situations.

Books & Guides

Learn Storybook (learnstorybook.com)
Apr 10, 2018
Learn Storybook to create bulletproof UI components, along the way you’ll build an app UI from scratch
  • Dominic Nguyen

Courses & Video Series

Building a Component Library with Storybook (reactnativeschool.com)
Jan 17, 2019
Throughout this guide you'll learn how to build a component library using Storybook.
  • Spencer Carli
Framer X + React (learnreact.design)
Sep 19, 2018
Get productive in Framer X. Learn React fundamentals. No coding experience required!
  • Linton Ye

Podcast Episodes

Storybook: UI Engineering with Zoltan Olah (softwareengineeringdaily.com)
Jan 23, 2019
Zoltan Olah joins the show to talk about Storybook, and his company Chroma. Chroma is building tools to allow design-driven teams to work more effectively. We talked about how the relationship of designers and frontend engineers has some resemblance to the relationship between “dev” and “ops” before the DevOps movement.
  • Zoltan Olah
React Testing Discussion & React Cosmos feat. Ovidiu Chereches (devchat.tv)
Mar 22, 2018
In today’s show, the React Native Radio Host, Nader Dabit and Spencer Carli speak with Ovidiu Chereches, about Testing React and React Native applications. Ovidiu shares his journey into working as a full stack developer and working in the community as an experienced developer. Ovidiu shares a general view on testing and sharing information on projects (React Cosmos) that helped him on manual testing and much more.

Libraries

react-cosmos (react-cosmos.github.io)4813
v4.8.1
Mar 29, 2019
Dev tool for creating reusable React components.
  • Ovidiu Cherecheș
@compositor/kit (github.com)1115
v1.0.47
Jun 26, 2018
Tools for developing, documenting, and testing React component libraries.
  • John Otander
  • Brent Jackson