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.
What you'll learn
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.
Table of contents
- Intro 2m
- Agenda 1m
- Why Reusable Components? 5m
- Why Not Web Components? 3m
- Why React? 5m
- Decision Overview 1m
- Decision 1: Audience 2m
- Decision 2: Rigid vs. Flexible 4m
- Warning: Tragedy of the Commons 3m
- Decision 3: Link, Wrap, or Fork Third Parties? 7m
- Decision 4: When Should I Add Components to My Library? 3m
- How I'm Handling Demos and Issues 1m
- Summary 2m
- Intro 1m
- Documentation Goals 3m
- Why Generate Documentation? 1m
- Documentation Tools 1m
- Custom Documentation Generation Approach 4m
- Demo: Documentation Framework Setup 1m
- Demo: Generate Component Metadata 6m
- Demo: npm Scripts 4m
- Demo: Create HelloWorld Component 2m
- Demo: Create Docs Component 2m
- Demo: Create Navigation Component 1m
- Demo: Create ComponentPage Component 1m
- Demo: Create Example Component 3m
- Demo: Create Props Component 5m
- Demo: Enhance HelloWorld with Comments 4m
- Demo: Webpack Alias 4m
- Syntax Highlighting 1m
- Demo: Syntax Highlighting 3m
- Potential Enhancements 3m
- Summary 1m
- Intro 1m
- Tip 1: Avoid Weak Elements 1m
- Tip 2: Declare PropTypes 1m
- Tip 3: Don’t Hard Code HTML IDs 1m
- Tip 4: Declare Logical Defaults 1m
- Tip 5: Consider Accessibility 2m
- Tip 6: Consider Configuration Objects 2m
- Tip 7: Consider Server-side Rendering 2m
- Tip 8: Honor the Single Responsibility Principle 2m
- What Is Atomic Design? 5m
- Why Atomic Design? 1m
- Summary 1m
- Intro 1m
- What's an Atom? 1m
- Decision 1: Wrap HTML Primitives? 2m
- Decision 2: Folder Structure 4m
- Tip 1: Honor the Native API 1m
- Tip 2: Pass Props via Spread 1m
- Tip 3: Use Spread with Destructuring 2m
- Tip 4: Create Formatting Components 1m
- Demo: ProgressBar Atom 8m
- Demo: Label Atom 4m
- Demo: Icon Atom 2m
- Summary 1m
- Intro 2m
- Decision 1: Framework 3m
- Decision 2: Testing Types 5m
- Decision 3: Assertion Library 1m
- Decision 4: Helper Libraries 1m
- Decision 5: Where to Run Tests 1m
- Decision 6: Where to Place Test Files 1m
- Decision 7: When to Run Tests 1m
- Demo: Unit Test 8m
- Demo: Snapshot Test 6m
- Demo: Interaction Test 5m
- Continuous Integration 2m
- Demo: Continuous Integration 5m
- Summary 1m
- Intro 1m
- Demo: Publish Docs via GitHub Pages 3m
- Demo: Set up Readme 2m
- Demo: Initial npm Configuration 1m
- Demo: Production Component Library Build 5m
- Preparing package.json for Publish 2m
- Demo: Add Named Import Support 1m
- Demo: Prepare package.json for Publish 5m
- Demo: Publish npm Package 1m
- Demo: Consume npm Package 3m
- Demo: Compare Import Approaches 2m
- Decision: Pick a Direct Import Approach 2m
- Adding Short Direct Import Support 1m
- Demo: Add Short Direct Import Support 6m
- Demo: Releases 4m
- Semantic Versioning 3m
- Accepting Contributions 1m
- Inspiration 2m
- Challenge 1m
About the author
Cory is the principal consultant at reactjsconsulting.com, where he has helped dozens of companies transition to React. Cory has trained over 10,000 software developers at events and businesses worldwide. He is a seven time Microsoft MVP, and speaks regularly at conferences around the world. Cory lives in Kansas City and is active on Twitter as @housecor.