English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 6h 20m | 917 MB
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.
Table of Contents
01 – Course Overview
02 – Intro
03 – Agenda
04 – Why Reusable Components
05 – Why Not Web Components
06 – Why React
07 – Decision Overview
08 – Decision 1 – Audience
09 – Decision 2 – Rigid vs. Flexible
10 – Warning – Tragedy of the Commons
11 – Decision 3 – Link, Wrap, or Fork Third Parties
12 – Decision 4 – When Should I Add Components to My Library
13 – How I’m Handling Demos and Issues
14 – Summary
15 – Intro
16 – Library vs. Standalone
17 – Environment Option 1 – Boilerplate
18 – Environment Option 2 – Documentation Tool
19 – Environment Option 3 – Custom
20 – Install Node and Git
21 – Demo – Create GitHub Repository
22 – Demo – Create Project with Create React App
23 – Demo – Eject Create React App
24 – Summary
25 – Intro
26 – Documentation Goals
27 – Why Generate Documentation
28 – Documentation Tools
29 – Custom Documentation Generation Approach
30 – Demo – Documentation Framework Setup
31 – Demo – Generate Component Metadata
32 – Demo – npm Scripts
33 – Demo – Create HelloWorld Component
34 – Demo – Create Docs Component
35 – Demo – Create Navigation Component
36 – Demo – Create ComponentPage Component
37 – Demo – Create Example Component
38 – Demo – Create Props Component
39 – Demo – Enhance HelloWorld with Comments
40 – Demo – Webpack Alias
41 – Syntax Highlighting
42 – Demo – Syntax Highlighting
43 – Potential Enhancements
44 – Summary
45 – Intro
46 – Tip 1 – Avoid Weak Elements
47 – Tip 2 – Declare PropTypes
48 – Tip 3 – Don’t Hard Code HTML IDs
49 – Tip 4 – Declare Logical Defaults
50 – Tip 5 – Consider Accessibility
51 – Tip 6 – Consider Configuration Objects
52 – Tip 7 – Consider Server-side Rendering
53 – Tip 8 – Honor the Single Responsibility Principle
54 – What Is Atomic Design
55 – Why Atomic Design
56 – Summary
57 – Intro
58 – What’s an Atom
59 – Decision 1 – Wrap HTML Primitives
60 – Decision 2 – Folder Structure
61 – Tip 1 – Honor the Native API
62 – Tip 2 – Pass Props via Spread
63 – Tip 3 – Use Spread with Destructuring
64 – Tip 4 – Create Formatting Components
65 – Demo – ProgressBar Atom
66 – Demo – Label Atom
67 – Demo – Icon Atom
68 – Summary
69 – Intro
70 – What’s a Molecule’
71 – Demo – TextInput Molecule
72 – TextInput Review
73 – Demo – PasswordInput
74 – PasswordInput Review
75 – Summary
76 – Intro
77 – What’s an Organism’
78 – Tip 1 – Strong Opinions Are a Feature
79 – Tip 2 – Keep Organisms Dumb
80 – Demo – RegistrationForm Organism
81 – Summary
82 – Intro
83 – Compiled CSS
84 – Naming Schemes
85 – Demo – CSS with BEM
86 – React Inline Styles
87 – CSS Modules
88 – Demo – CSS Modules
89 – CSS in JS
90 – Demo – CSS in JS via Styled-components
91 – Decision – Styling Approach
92 – Decision – Unstyled, Enforced, or Themeable
93 – Theming Approaches
94 – Summary
95 – Intro
96 – Decision 1 – Framework
97 – Decision 2 – Testing Types
98 – Decision 3 – Assertion Library
99 – Decision 4 – Helper Libraries
100 – Decision 5 – Where to Run Tests
101 – Decision 6 – Where to Place Test Files
102 – Decision 7 – When to Run Tests
103 – Demo – Unit Test
104 – Demo – Snapshot Test
105 – Demo – Interaction Test
106 – Continuous Integration
107 – Demo – Continuous Integration
108 – Summary
109 – Intro
110 – Decision 1 – Open, Closed, or Inner Source
111 – Decision 2 – Package Hosting
112 – Decision 3 – Import Approaches
113 – Decision 4 – Declaring Package Files
114 – Decision 5 – Output Format
115 – ES Module Build
116 – UMD Build
117 – Decision 6 – Documentation Hosting
118 – Summary
119 – Intro
120 – Demo – Publish Docs via GitHub Pages
121 – Demo – Set up Readme
122 – Demo – Initial npm Configuration
123 – Demo – Production Component Library Build
124 – Preparing package.json for Publish
125 – Demo – Add Named Import Support
126 – Demo – Prepare package.json for Publish
127 – Demo – Publish npm Package
128 – Demo – Consume npm Package
129 – Demo – Compare Import Approaches
130 – Decision – Pick a Direct Import Approach
131 – Adding Short Direct Import Support
132 – Demo – Add Short Direct Import Support
133 – Demo – Releases
134 – Semantic Versioning
135 – Accepting Contributions
136 – Inspiration
137 – Challenge
Resolve the captcha to access the links!