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