Creating Reusable React Components

—Intro 0m 50s
—Library vs. Standalone 6m 29s
—Environment Option 1: Boilerplate 5m 17s
—Environment Option 2: Documentation Tool 4m 32s
—Environment Option 3: Custom 3m 46s
—Install Node and Git 1m 15s
—Demo: Create GitHub Repository 1m 47s
—Demo: Create Project with Create React App 5m 52s
—Demo: Eject Create React App 4m 5s
—Summary 0m 59s

—Intro 0m 50s
—Documentation Goals 2m 36s
—Why Generate Documentation? 1m 21s
—Documentation Tools 0m 45s
—Custom Documentation Generation Approach 3m 56s
—Demo: Documentation Framework Setup 1m 5s
—Demo: Generate Component Metadata 6m 13s
—Demo: npm Scripts 3m 43s
—Demo: Create HelloWorld Component 2m 9s
—Demo: Create Docs Component 1m 53s
—Demo: Create Navigation Component 0m 38s
—Demo: Create ComponentPage Component 1m 4s
—Demo: Create Example Component 3m 0s
—Demo: Create Props Component 4m 46s
—Demo: Enhance HelloWorld with Comments 3m 34s
—Demo: Webpack Alias 4m 17s
—Syntax Highlighting 1m 28s
—Demo: Syntax Highlighting 3m 26s
—Potential Enhancements 2m 42s
—Summary 0m 42s

—Intro 0m 41s
—Tip 1: Avoid Weak Elements 0m 40s
—Tip 2: Declare PropTypes 1m 27s
—Tip 3: Don’t Hard Code HTML IDs 1m 20s
—Tip 4: Declare Logical Defaults 1m 21s
—Tip 5: Consider Accessibility 1m 45s
—Tip 6: Consider Configuration Objects 1m 41s
—Tip 7: Consider Server-side Rendering 1m 39s
—Tip 8: Honor the Single Responsibility Principle 1m 32s
—What Is Atomic Design? 5m 26s
—Why Atomic Design? 1m 24s
—Summary 1m 13s

—Intro 0m 34s
—What's an Atom? 0m 50s
—Decision 1: Wrap HTML Primitives? 2m 25s
—Decision 2: Folder Structure 3m 33s
—Tip 1: Honor the Native API 0m 54s
—Tip 2: Pass Props via Spread 1m 5s
—Tip 3: Use Spread with Destructuring 2m 8s
—Tip 4: Create Formatting Components 0m 55s
—Demo: ProgressBar Atom 7m 40s
—Demo: Label Atom 4m 28s
—Demo: Icon Atom 2m 0s
—Summary 0m 57s

—Intro 0m 43s
—What's a Molecule? 1m 35s
—Demo: TextInput Molecule 6m 17s
—TextInput Review 1m 40s
—Demo: PasswordInput 6m 46s
—PasswordInput Review 1m 16s
—Summary 0m 52s

—Intro 0m 48s
—What's an Organism?' 0m 53s
—Tip 1: Strong Opinions Are a Feature 2m 18s
—Tip 2: Keep Organisms Dumb 4m 41s
—Demo: RegistrationForm Organism 7m 17s
—Summary 0m 58s

—Intro 1m 7s
—Compiled CSS 2m 35s
—Naming Schemes 3m 12s
—Demo: CSS with BEM 5m 3s
—React Inline Styles 3m 56s
—CSS Modules 4m 11s
—Demo: CSS Modules 8m 4s
—CSS in JS 4m 23s
—Demo: CSS in JS via Styled-components 6m 11s
—Decision: Styling Approach 8m 32s
—Decision: Unstyled, Enforced, or Themeable? 4m 1s
—Theming Approaches 2m 30s
—Summary 0m 53s

—Intro 1m 32s
—Decision 1: Framework 2m 49s
—Decision 2: Testing Types 5m 27s
—Decision 3: Assertion Library 0m 40s
—Decision 4: Helper Libraries 0m 39s
—Decision 5: Where to Run Tests 0m 59s
—Decision 6: Where to Place Test Files 0m 48s
—Decision 7: When to Run Tests 0m 48s
—Demo: Unit Test 8m 12s
—Demo: Snapshot Test 5m 35s
—Demo: Interaction Test 5m 21s
—Continuous Integration 1m 41s
—Demo: Continuous Integration 4m 46s
—Summary 1m 13s

—Intro 1m 3s
—Decision 1: Open, Closed, or Inner Source? 3m 30s
—Decision 2: Package Hosting 3m 27s
—Decision 3: Import Approaches 4m 37s
—Decision 4: Declaring Package Files 5m 9s
—Decision 5: Output Format 0m 52s
—ES Module Build 6m 29s
—UMD Build 3m 10s
—Decision 6: Documentation Hosting 0m 53s
—Summary 1m 32s

—Intro 0m 58s
—Demo: Publish Docs via GitHub Pages 3m 21s
—Demo: Set up Readme 2m 20s
—Demo: Initial npm Configuration 1m 12s
—Demo: Production Component Library Build 5m 20s
—Preparing package.json for Publish 2m 13s
—Demo: Add Named Import Support 0m 34s
—Demo: Prepare package.json for Publish 4m 52s
—Demo: Publish npm Package 1m 27s
—Demo: Consume npm Package 3m 3s
—Demo: Compare Import Approaches 2m 10s
—Decision: Pick a Direct Import Approach 2m 3s
—Adding Short Direct Import Support 1m 1s
—Demo: Add Short Direct Import Support 6m 5s
—Demo: Releases 4m 7s
—Semantic Versioning 2m 50s
—Accepting Contributions 0m 50s
—Inspiration 1m 31s
—Challenge 1m 15s