Creating Reusable React Components

You may know React, but do you know how to design and distribute truly reusable React components? Learn how to design, create, and publish a reusable React component library that you can share with your team, your company, or the world.
Course info
Rating
(88)
Level
Intermediate
Updated
Jun 5, 2017
Duration
6h 20m
Table of contents
Course Overview
Core Decisions
Development Environment
Documentation
Reusable Component Design
Atoms
Molecules
Organisms
Styling and Theming
Testing
Distribution Decisions
Publishing
Description
Course info
Rating
(88)
Level
Intermediate
Updated
Jun 5, 2017
Duration
6h 20m
Description

Are you copy/pasting components from previous projects? Are you fighting consistency issues with your team? Sure, you know React, but do you know how to design, create, and publish reusable React components, so others can benefit from your team's work? In this course, Creating Reusable React Components, you'll explore over 50 decisions to consider when designing, creating, and publishing reusable React components, including atomic design, documentation generation, styling, theming, testing, packaging, and publishing. By the end of this course, you'll know how to publish and maintain your own reusable component library.

About the author
About the author

Cory is an independent consultant with over 15 years of experience in software development. He is the principal consultant at reactjsconsulting.com and a Microsoft MVP.

More from the author
React: The Big Picture
Beginner
1h 11m
21 Nov 2017
More courses by Cory House
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hi everyone! I'm Cory House, and welcome to my course on Creating Reusable React Components. I'm the principle consultant at reactjsconsulting. com, so I'm obviously a big fan of React's elegant component model. And if you're watching this, I assume you love React too. But is your team creating and sharing reusable React components or reinventing the wheel? In this course, we're going to explore how to design, create, and publish reusable React components that you can share with your team, your company, or even the world. Some of the major topics that we'll cover include tips, tricks, and patterns for creating React components, atomic design principles, techniques for generating custom documentation, reusable component styling and testing, and we'll wrap up by packaging and publishing the custom component library that we create to npm. By the end of this course, you'll have all the tools you need to create a reusable component library that can be enjoyed by multiple teams and managed in a centralized and automated way. Before beginning the course, you should be familiar with JavaScript and React. I hope you'll join me on this journey to learn how to create and publish reusable React components at Pluralsight.

Development Environment
Of course, when you're working in React one of the tougher decisions is how to set up your development environment. As you'll see, there are many interesting and unique development environments and libraries to consider that are especially tailored to doing reusable React component development. We'll begin by considering two key decisions that you need to make on your dev environment for component development, including whether to create a library of components or a set of stand along components, and whether to use a boilerplate, a documentation library, or build your own custom development environment from scratch. Then we'll set things in motion by installing the essential software that we need to get rolling, including Node. js and Git. We'll wrap up by creating the foundation for our project using the tool that we select. Alright, let's get started.

Documentation
Of course, if you're hoping that people will actually use your components, then it's a good idea to document what they are, how they work, and where people can find them, and yes, I know that it seems odd to be discussing documentation before we've even created any components, but I'll explain why in a moment. In this module we'll explore how to make helpful, rich documentation for your reusable components. We'll begin by outlining our goals for what should be in our documentation, and how it should be generated. Then, we'll spend the rest of this module coding. We'll create our own custom setup for generating rich documentation, and we'll use this as the foundation for our work in the rest of the course. I'm really excited about this setup for custom documentation generation, so let's dive in.

Reusable Component Design
In this module it's time to explore the fundamentals of reusable component design, and to get this done we'll use the atomic design philosophy to help us compose components at multiple levels of abstraction. We'll begin by discussing eight key reusable component design tips. Then we'll dive into atomic design. We'll discuss what atomic design is, and why the mindset is so useful. This will set the stage for subsequent modules where we'll build reusable components using the atomic design philosophy. Alright, let's begin with some core reusable component design tips.

Atoms
Let's begin by digging into the details of atomic design by exploring atoms. We'll begin by defining an atom and considering a simple example. We'll look at some core decisions that we need to make, such as whether to wrap HTML primitives and how to structure your component folder. Then we'll review a few key design tips for atoms. We'll spend the rest of the module coding our first three atoms, a ProgressBar, a label, and an icon. Alright, let's go.

Molecules
It's time to put the atoms that we just created to use by building something more substantial. These components are called molecules. This short module builds upon the previous atoms module. We'll quickly define what a molecule is and how it differs from the atoms we discussed in the previous module. Then we'll spend the rest of our time coding. We'll use the atoms that we created as the foundation of our first two molecules. We're going to build a reusable TextInput and a reusable PasswordInput. We'll bake a handful of useful opinions into these components to make them particularly relevant for a specific teams use cases. Okay, let's keep moving.

Organisms
We've built atoms and molecules. Now it's time to put those reusable pieces together to create an even higher level reusable component called an organism. In this module we'll begin to wrap up our exploration of atomic design by looking at reusable organisms. We'll look at what makes an organism special, and how its mission and design differ from lower level atoms and molecules. I'll cover some key design tips, such as strong opinions being a feature, and the importance of keeping your organisms dumb, and then we'll wrap up by creating a registration form. As you'll see, this organism won't contain much code because it will utilize the atoms and molecules that we've already created. Alright, let's dive in.

Styling and Theming
Styling is a surprisingly complicated topic for reusable React components. In fact, there may be more decisions to consider in this space than in any other. The @iamdevloper account sums up many people's feelings when it comes to writing styles. Oh, CSS is easy. It's like riding a bike, which is on fire, and the ground is on fire, and everything is on fire because it's hell. Okay, slight exaggeration, but still, styling is surprisingly hard but, as you'll see, there's a number of compelling and modern ways to handle component styling. So in this module I'll walk through four popular React styling approaches to consider, including compiled CSS with naming schemes, Inline styles, CSS modules, and CSS in JS, and we'll wrap up with my summary of how to pick a styling approach, as well as how to handle component theming. We'll explore these styling approaches in order, so we'll begin with compiled CSS.

Testing
Of course, if you're going to share components with others it's pretty important to make sure they're operating as you expected them to, so let's explore automated testing. It's really a shame how uncommon automated testing is in JavaScript, and I believe it's because people don't see a clear picture of how to quickly get started. Since JavaScript has no built-in opinions on handling testing you need to spend a lot of time browsing the web and investigating strategies first. Now I explored automated JavaScript testing in detail in my Building a JavaScript Development Environment course, so I'm not going to repeat all that content here. If you're new to automated testing in JavaScript I suggest watching the testing module of the Building a JavaScript Development Environment course. Then jump back to here. So in this module I'll outline the landscape to help you understand the key decisions you need to make. I'll begin by briefly contrasting different automated UI testing styles, including unit testing, interaction testing, structural testing, and style testing. Just deciding which tool and patterns to use is a major hurtle, so we'll review six key decisions that you need to make, including testing frameworks, assertion libraries, helper libraries and more. Once we have clarified our testing stack we'll jump back into the editor and write unit interaction, and structural, automated tests. I'll close out the module by discussing and configuring continuous integration, so that we're notified immediately any time someone breaks the build. This is a big topic, but in this module I'm going to focus on the most popular ways to get it done in React.

Distribution Decisions
Alright, we're down to the final two short modules. Before we publish our components and documentation to production there are a few important decisions to make. In this module we'll explore six key distribution decisions. We'll begin by considering how to manage the code base itself. Should you do closed source, inner source, or open source. Then we'll look at both public and private npm hosting options, including third-party asset servers. We'll look at different import approaches that you can consider supporting, and ways to specify which files should be published to your package. We'll consider the different output formats that you might choose to support, and we'll close out the module by looking at where to host the documentation that we've generated throughout the course. For each of these decisions I'll clarify the approach that we're going to take and why, and in the final module we'll execute on these decisions by publishing both our components and our documentation. We're in the final stretch, so let's go.

Publishing
Congratulations on hanging on to the final module. This one is critical because if you don't actually publish your components, then they're significantly less likely to be useful for people, so let's get this code out there where the world can put it to good use. In this module we'll get all this work hosted in production. We'll set up an automated build and deployment for our documentation, and to prepare our package for production we'll prepare package. json and our Readme with the appropriate package metadata. We'll set up an automated build and deployment to get our code out there for the world to use, and we'll close out this course by reviewing some existing component libraries. These are great places to find inspiration and avoid reinventing the wheel. I like to end each of my courses with a relevant challenge, so I'll close out this course with a challenge for putting all this knowledge to use. We're in the final stretch, so let's go.