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.
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.
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.
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.