Этот материал находится в платной подписке. Оформи премиум подписку и смотри или слушай React and Typescript: Build a Portfolio Project, а также все другие курсы, прямо сейчас!
Купить сейчас
  • Урок 1. 00:00:56
    How to Get Help
  • Урок 2. 00:01:40
    Be Sure to Watch this Video!
  • Урок 3. 00:01:35
    Generating TypeScript-Enabled Projects
  • Урок 4. 00:04:35
    File Extensions and Starting Up React
  • Урок 5. 00:02:34
    Changes with TypeScript
  • Урок 6. 00:03:54
    The Big Difference with Props
  • Урок 7. 00:05:51
    Explicit Component Type Annotations
  • Урок 8. 00:05:48
    Annotations with Children
  • Урок 9. 00:04:42
    State with TypeScript
  • Урок 10. 00:05:42
    Type Inference with State
  • Урок 11. 00:00:56
    Quick Finish to the Example
  • Урок 12. 00:04:20
    More on State
  • Урок 13. 00:05:42
    Type Unions in State
  • Урок 14. 00:03:19
    Inline Event Handlers
  • Урок 15. 00:02:41
    Typing Standalone Event Handlers
  • Урок 16. 00:03:45
    Handling Drag Events Too!
  • Урок 17. 00:09:04
    TypeScript with Class Components
  • Урок 18. 00:05:36
    Applying Types to Refs
  • Урок 19. 00:04:31
    More on Refs
  • Урок 20. 00:02:05
    App Overview
  • Урок 21. 00:01:50
    Project Setup
  • Урок 22. 00:08:54
    Redux Store Design
  • Урок 23. 00:08:17
    Reducer Setup
  • Урок 24. 00:01:27
    Annotating the Return Type
  • Урок 25. 00:01:55
    Typing an Action
  • Урок 26. 00:04:22
    Separate Interfaces for Actions
  • Урок 27. 00:04:23
    Applying Action Interfaces
  • Урок 28. 00:05:42
    Adding an Action Type Enum
  • Урок 29. 00:03:38
    A Better Way to Organize Code
  • Урок 30. 00:04:28
    Adding Action Creators
  • Урок 31. 00:03:16
    Adding Request Logic
  • Урок 32. 00:02:47
    Applying Typings to Dispatch
  • Урок 33. 00:04:20
    Setting Up Exports
  • Урок 34. 00:03:25
    Wiring Up to React
  • Урок 35. 00:01:04
    Oops... Initial State!
  • Урок 36. 00:03:01
    Reminder on Event Types
  • Урок 37. 00:03:06
    Calling an Action Creator
  • Урок 38. 00:04:22
    Binding Action Creators
  • Урок 39. 00:04:17
    Selecting State
  • Урок 40. 00:04:47
    Awkward Typings Around React-Redux
  • Урок 41. 00:04:01
    Creating a Typed Selector
  • Урок 42. 00:03:03
    Consuming Store State
  • Урок 43. 00:03:25
    Quick Wrapup
  • Урок 44. 00:06:16
    App Overview
  • Урок 45. 00:06:03
    Three Big Challenges
  • Урок 46. 00:06:09
    Transpiling Options
  • Урок 47. 00:02:58
    Remote Transpiling
  • Урок 48. 00:04:31
    Module Systems
  • Урок 49. 00:07:10
    Behind the Scenes with Webpack
  • Урок 50. 00:02:41
    Webpack with ES Modules
  • Урок 51. 00:02:42
    One Small Change
  • Урок 52. 00:06:50
    Options for Bundling
  • Урок 53. 00:04:02
    So Which Approach?
  • Урок 54. 00:02:49
    A Webpack Replacement
  • Урок 55. 00:01:07
    A Demo App
  • Урок 56. 00:02:55
    Project Setup
  • Урок 57. 00:04:55
    Basic Form Elements
  • Урок 58. 00:06:08
    Understanding ESBuild
  • Урок 59. 00:03:41
    Initializing ESBuild
  • Урок 60. 00:03:11
    Using Refs for Arbitrary Values
  • Урок 61. 00:04:43
    Transpiling Works!
  • Урок 62. 00:05:57
    Troubles with Bundling in the Browser
  • Урок 63. 00:04:56
    Issues with NPM
  • Урок 64. 00:04:33
    Solution with Unpkg
  • Урок 65. 00:05:22
    ESBuild Can Bundle!
  • Урок 66. 00:10:50
    Deep Dive on Bundling
  • Урок 67. 00:03:01
    Filters and Namespaces
  • Урок 68. 00:02:31
    Adding a Tiny Test Package
  • Урок 69. 00:08:24
    Dynamically Fetching Modules
  • Урок 70. 00:02:00
    Generating the Unpkg URL
  • Урок 71. 00:04:21
    Issues with Multi-File Packages
  • Урок 72. 00:06:43
    Solving Relative Paths
  • Урок 73. 00:03:58
    Using the URL Constructor
  • Урок 74. 00:10:41
    Failing Nested Requires
  • Урок 75. 00:07:50
    Resolving Nested Paths
  • Урок 76. 00:05:48
    It Works!
  • Урок 77. 00:05:59
    Defines During Bundling
  • Урок 78. 00:02:47
    Bonus! Package Versioning
  • Урок 79. 00:03:12
    Crazy Numbers of Requests
  • Урок 80. 00:03:56
    Implementing a Caching Layer
  • Урок 81. 00:06:32
    Caching with Key-Value Pairs
  • Урок 82. 00:06:05
    Fixing a TypeScript Error
  • Урок 83. 00:04:36
    Bundling User Input
  • Урок 84. 00:06:26
    Breaking Up Resolve Logic With Filters
  • Урок 85. 00:05:45
    Refactoring to Multiple Plugins
  • Урок 86. 00:01:51
    Loading CSS Files
  • Урок 87. 00:04:17
    Configuring the Correct Loader
  • Урок 88. 00:02:40
    Small Shortcoming with ESBuild
  • Урок 89. 00:05:59
    Tricking ESBuild's CSS Handling
  • Урок 90. 00:05:11
    Escaping CSS Snippets
  • Урок 91. 00:05:35
    Separate Load Filters
  • Урок 92. 00:04:19
    Extracting Common Caching Logic
  • Урок 93. 00:03:27
    A Better Way of Loading WASM
  • Урок 94. 00:06:08
    Executing User Code
  • Урок 95. 00:06:47
    Big Issues with Code Execution
  • Урок 96. 00:01:44
    How Do Others Solve This?
  • Урок 97. 00:02:54
    Displaying IFrames
  • Урок 98. 00:02:50
    Different Execution Context
  • Урок 99. 00:03:19
    Crossing Context
  • Урок 100. 00:03:42
    Sandboxing an IFrame
  • Урок 101. 00:04:12
    Breaking Access with Different Domains
  • Урок 102. 00:03:25
    How Do IFrames Fix Anything?
  • Урок 103. 00:04:37
    The Full Flow - How CodePen and CodeSandbox Work
  • Урок 104. 00:04:30
    Do We Need Separation?
  • Урок 105. 00:07:21
    Middle Ground Approach
  • Урок 106. 00:07:50
    IFrames with SrcDocs
  • Урок 107. 00:04:26
    Execution Using SrcDoc
  • Урок 108. 00:09:46
    Running Unescaped Code
  • Урок 109. 00:05:40
    Indirect Communication Between Frames
  • Урок 110. 00:07:04
    Passing Code to the IFrame
  • Урок 111. 00:03:00
    It Works!
  • Урок 112. 00:06:29
    Highlighting Errors
  • Урок 113. 00:03:09
    Issues with Repeat Execution
  • Урок 114. 00:03:50
    Resetting the IFrame Contents
  • Урок 115. 00:00:52
    Warning Fixup
  • Урок 116. 00:05:59
    Issues with Eager Bundling
  • Урок 117. 00:00:45
    Quick Revert
  • Урок 118. 00:02:43
    Open Source Editor Options
  • Урок 119. 00:05:55
    Displaying an Editor
  • Урок 120. 00:03:51
    Configuring the Editor
  • Урок 121. 00:08:45
    Crazy Monaco Editor Type Defs
  • Урок 122. 00:04:21
    A Few More Options
  • Урок 123. 00:03:43
    Setting the Initial Value
  • Урок 124. 00:05:51
    Handling Editor Change Events
  • Урок 125. 00:04:00
    Adding a Type Definition
  • Урок 126. 00:04:03
    Adding Prettier to Our Editor
  • Урок 127. 00:05:52
    Automatic Code Formatting
  • Урок 128. 00:03:19
    Adding a CSS Library
  • Урок 129. 00:05:24
    Floating the Format Button
  • Урок 130. 00:16:10
    Fixing Syntax Highlighting
  • Урок 131. 00:08:16
    Refactoring Out a Preview Component
  • Урок 132. 00:08:05
    Extracting Bundling Logic
  • Урок 133. 00:03:24
    Fixing a Few Warnings
  • Урок 134. 00:05:22
    Multiple Editors and Preview Windows
  • Урок 135. 00:03:18
    Adding Resizable Panes
  • Урок 136. 00:05:44
    Setting Up React-Resizable
  • Урок 137. 00:05:42
    Setting a Resize Handle
  • Урок 138. 00:01:38
    Adding a Bunch of CSS
  • Урок 139. 00:04:28
    Expanding the Resizer Horizontally
  • Урок 140. 00:04:43
    Expanding the Code Editor
  • Урок 141. 00:05:40
    Fixing the Resize Issue
  • Урок 142. 00:03:32
    Constraining Vertical Resizes
  • Урок 143. 00:01:59
    Resizing Horizontally
  • Урок 144. 00:04:35
    Strategies for Prop Definitions
  • Урок 145. 00:03:46
    Applying Horizontal Resize Props
  • Урок 146. 00:05:24
    Getting Preview to Expand
  • Урок 147. 00:01:46
    A Small Workaround
  • Урок 148. 00:01:06
    Updating the After Selector
  • Урок 149. 00:00:47
    An Oddity Around the Resizer
  • Урок 150. 00:03:20
    On Resize Events
  • Урок 151. 00:04:29
    Updating Resizer Props
  • Урок 152. 00:02:15
    Improving Resize Performance
  • Урок 153. 00:03:28
    Why Width Jumps?
  • Урок 154. 00:07:20
    Synchronizing Width State
  • Урок 155. 00:04:47
    Adding Debouncing Logic
  • Урок 156. 00:02:30
    Clearing the Timeout
  • Урок 157. 00:03:18
    Adding an Execution Timeout
  • Урок 158. 00:01:31
    Error Handling
  • Урок 159. 00:03:03
    Extracting Reusable Error Handling Logic
  • Урок 160. 00:04:38
    Handling Async Errors
  • Урок 161. 00:04:03
    Capturing Bundling Errors
  • Урок 162. 00:05:01
    Printing the Captured Error
  • Урок 163. 00:03:45
    Plan for the Text Cell
  • Урок 164. 00:05:40
    A Few Issues with the Markdown Editor
  • Урок 165. 00:05:26
    Toggling the Markdown Editor Mode
  • Урок 166. 00:05:27
    Conditional Toggling
  • Урок 167. 00:02:49
    Why the Broken Cursor?
  • Урок 168. 00:02:49
    Solving Class Name Conflicts
  • Урок 169. 00:01:43
    Fixing the Divider Height
  • Урок 170. 00:04:49
    Restyling the Resizer Bar
  • Урок 171. 00:00:51
    Applying the Dark Theme
  • Урок 172. 00:02:39
    Adding State to the Editor
  • Урок 173. 00:01:13
    Last Touch of Styling
  • Урок 174. 00:04:55
    Redux Design
  • Урок 175. 00:04:56
    Initial Scaffolding
  • Урок 176. 00:07:32
    Action Interface Definitions
  • Урок 177. 00:04:09
    Defining What a Cell Is
  • Урок 178. 00:05:49
    Cells Reducer Setup
  • Урок 179. 00:02:22
    Adding a Few Reducer Cases
  • Урок 180. 00:03:16
    Creating and Exporting the Store
  • Урок 181. 00:02:00
    React to Redux Connection
  • Урок 182. 00:05:14
    Action Creator Return Type Annotations
  • Урок 183. 00:05:43
    Easy Action Creator Implementations
  • Урок 184. 00:03:47
    Handling Cyclical Imports
  • Урок 185. 00:01:14
    Defining Direction
  • Урок 186. 00:06:17
    Update Cell Logic
  • Урок 187. 00:07:11
    Simple Updates with Immer
  • Урок 188. 00:03:37
    Removing a Cell
  • Урок 189. 00:06:34
    Swapping Cell Placement
  • Урок 190. 00:09:46
    Inserting New Cells
  • Урок 191. 00:05:50
    Small Gotcha with Immer
  • Урок 192. 00:06:27
    Manual Testing of a Redux Store
  • Урок 193. 00:03:50
    Back to React
  • Урок 194. 00:03:15
    Creating a Typed Selector
  • Урок 195. 00:02:45
    Selecting an Ordered List
  • Урок 196. 00:03:44
    Rendering the List of Cells
  • Урок 197. 00:04:06
    Cell Type Rendering
  • Урок 198. 00:05:09
    Reminder on the Action Creator Helper
  • Урок 199. 00:07:44
    Extracting Local State
  • Урок 200. 00:07:07
    Extracting State from Text Cell
  • Урок 201. 00:06:51
    The Action Bar Component
  • Урок 202. 00:07:03
    Adding Icon Buttons
  • Урок 203. 00:04:46
    Applying Custom CSS
  • Урок 204. 00:06:35
    Last Touch of Styling
  • Урок 205. 00:05:13
    Adding New Cells
  • Урок 206. 00:04:30
    Displaying Add Cell
  • Урок 207. 00:01:02
    Resolving the Key Warning
  • Урок 208. 00:03:32
    Styling Add Cell
  • Урок 209. 00:07:25
    A Touch More Styling
  • Урок 210. 00:07:16
    Forcing Add Cell Visibility
  • Урок 211. 00:05:15
    Understanding CSS Transition Curves
  • Урок 212. 00:03:35
    Adding Vertical Spacing
  • Урок 213. 00:04:45
    Why is Add Cell Weird
  • Урок 214. 00:10:59
    Three Possible Solutions
  • Урок 215. 00:05:44
    Refactoring the Redux Side
  • Урок 216. 00:04:35
    Refactoring the React Side
  • Урок 217. 00:09:21
    Should There Be a Bundles Reducer?
  • Урок 218. 00:02:55
    Here's the Plan
  • Урок 219. 00:03:44
    Defining Bundling Action Types
  • Урок 220. 00:04:29
    Initial Reducer Implementation
  • Урок 221. 00:02:48
    Finishing Up the Reducer
  • Урок 222. 00:07:00
    Adding the Action Creator
  • Урок 223. 00:08:03
    React Wire Up
  • Урок 224. 00:04:50
    Adjusting the Reducer State
  • Урок 225. 00:07:32
    Solving a Small Warning with useMemo
  • Урок 226. 00:05:32
    Adding Eager Bundling
  • Урок 227. 00:03:23
    Getting an Initial Bundle
  • Урок 228. 00:03:21
    Showing a Loading Message
  • Урок 229. 00:04:34
    Styling the Progress Bar
  • Урок 230. 00:03:55
    Can We Estimate Bundle Duration?
  • Урок 231. 00:07:18
    Fading In the Progress Bar
  • Урок 232. 00:05:59
    Fixing the Background
  • Урок 233. 00:04:15
    Referencing Code from Previous Cells
  • Урок 234. 00:03:52
    Method of Implementation
  • Урок 235. 00:05:44
    Calculating Cumulative Code
  • Урок 236. 00:02:59
    Executing the Cumulative Code
  • Урок 237. 00:04:44
    Adding a Show Function
  • Урок 238. 00:02:44
    Showing Complex Values
  • Урок 239. 00:04:53
    Showing a JSX Element
  • Урок 240. 00:02:30
    Import Name Collisions
  • Урок 241. 00:04:32
    Avoiding Naming Collisions
  • Урок 242. 00:02:57
    Showing a React Component
  • Урок 243. 00:02:46
    Selective Calls to Show
  • Урок 244. 00:03:56
    Implementing a Show Function No-Op
  • Урок 245. 00:04:09
    Extracting a Hook
  • Урок 246. 00:01:50
    A Touch of CSS
  • Урок 247. 00:03:01
    Fixing Edge Snaps
  • Урок 248. 00:03:19
    The Path Moving Forward
  • Урок 249. 00:05:16
    Planning Local Architecture
  • Урок 250. 00:05:00
    An Easy Solution
  • Урок 251. 00:10:32
    What's the App Look Like in the Future?
  • Урок 252. 00:08:13
    Package Based Development
  • Урок 253. 00:05:29
    Introducing Lerna
  • Урок 254. 00:01:51
    Disclaimer on Lerna
  • Урок 255. 00:02:47
    Lerna Setup
  • Урок 256. 00:08:24
    Adding Modules with Lerna
  • Урок 257. 00:06:11
    Linking Packages
  • Урок 258. 00:08:07
    Adding TypeScript Support
  • Урок 259. 00:02:18
    Adding TypeScript to the CLI
  • Урок 260. 00:02:18
    Finishing TS Support
  • Урок 261. 00:04:07
    Parallel Start Scripts
  • Урок 262. 00:07:43
    Reading Command Line Arguments
  • Урок 263. 00:07:43
    Using Commander to Build a CLI
  • Урок 264. 00:05:57
    Specifying Command Line Options
  • Урок 265. 00:07:50
    Communication from the CLI to the API
  • Урок 266. 00:03:00
    What's that Directory Argument?
  • Урок 267. 00:05:31
    Calculating File Paths
  • Урок 268. 00:03:14
    The Local API
  • Урок 269. 00:04:23
    Adding Dependencies and Running Express
  • Урок 270. 00:04:27
    Error Handling Where?
  • Урок 271. 00:04:24
    Wrapping Express Listen with a Promise
  • Урок 272. 00:04:29
    Error Handling Solution
  • Урок 273. 00:02:48
    Accessing the React App
  • Урок 274. 00:04:59
    Connecting the Proxy
  • Урок 275. 00:02:36
    Building a Production Bundle
  • Урок 276. 00:12:09
    Understanding Package Links
  • Урок 277. 00:06:07
    What's the Path
  • Урок 278. 00:03:15
    Which Method Do We Use?
  • Урок 279. 00:05:03
    Determining Our Execution Environment
  • Урок 280. 00:02:00
    A Quick Test
  • Урок 281. 00:06:06
    Creating the Cells Router
  • Урок 282. 00:04:44
    Writing Cells to a File
  • Урок 283. 00:03:13
    Reading File Contents
  • Урок 284. 00:01:28
    Default Cell Values
  • Урок 285. 00:00:47
    Adding a JSON Parser
  • Урок 286. 00:06:25
    Adding Fetch Cell Logic to Redux
  • Урок 287. 00:03:50
    The Fetch Cells Action Creator
  • Урок 288. 00:04:47
    Handling Fetch Cell Types
  • Урок 289. 00:07:47
    Saving a List of Cells
  • Урок 290. 00:05:15
    When to Call Fetch?
  • Урок 291. 00:02:50
    Saving a List of Cells
  • Урок 292. 00:06:31
    Adding a Persist Middleware
  • Урок 293. 00:05:51
    Detecting When to Save
  • Урок 294. 00:02:14
    Debouncing Save Logic
  • Урок 295. 00:02:26
    The Path to NPM Publishing
  • Урок 296. 00:03:51
    Bootstrapping the Project
  • Урок 297. 00:02:15
    A Touch More Setup
  • Урок 298. 00:04:59
    Getting Ready to Publish
  • Урок 299. 00:03:54
    Configuring the CLI
  • Урок 300. 00:01:58
    Publishing to NPM
  • Урок 301. 00:04:43
    NPM Organizations
  • Урок 302. 00:03:03
    Declaring Scoped Packages
  • Урок 303. 00:04:21
    Refactoring Package Names
  • Урок 304. 00:06:28
    Auditing Dev Dependencies
  • Урок 305. 00:03:55
    Adding Build Scripts
  • Урок 306. 00:04:03
    The Case for Bundling
  • Урок 307. 00:06:00
    Running ESBuild
  • Урок 308. 00:01:52
    Creating a Repository
  • Урок 309. 00:01:06
    Publishing with Lerna
  • Урок 310. 00:01:49
    Does it Work?
  • Урок 311. 00:04:45
    Next Steps
  • Урок 312. 00:06:20
    TypeScript Overview
  • Урок 313. 00:08:00
    Environment Setup
  • Урок 314. 00:04:44
    A First App
  • Урок 315. 00:05:04
    Executing TypeScript Code
  • Урок 316. 00:03:36
    One Quick Change
  • Урок 317. 00:07:23
    Catching Errors with TypeScript
  • Урок 318. 00:05:16
    Catching More Errors!
  • Урок 319. 00:03:37
    Course Overview
  • Урок 320. 00:05:13
    Types
  • Урок 321. 00:05:54
    More on Types
  • Урок 322. 00:04:50
    Examples of Types
  • Урок 323. 00:00:50
    Where Do We Use Types?
  • Урок 324. 00:02:04
    Type Annotations and Inference
  • Урок 325. 00:04:54
    Annotations with Variables
  • Урок 326. 00:06:54
    Object Literal Annotations
  • Урок 327. 00:05:57
    Annotations Around Functions
  • Урок 328. 00:03:52
    Understanding Inference
  • Урок 329. 00:07:48
    The Any Type
  • Урок 330. 00:01:50
    Fixing the "Any" Type
  • Урок 331. 00:03:06
    Delayed Initialization
  • Урок 332. 00:04:38
    When Inference Doesn't Work
  • Урок 333. 00:04:57
    More on Annotations Around Functions
  • Урок 334. 00:06:09
    Inference Around Functions
  • Урок 335. 00:01:43
    Annotations for Anonymous Functions
  • Урок 336. 00:02:50
    Void and Never
  • Урок 337. 00:03:36
    Destructuring with Annotations
  • Урок 338. 00:07:06
    Annotations Around Objects
  • Урок 339. 00:05:06
    Arrays in TypeScript
  • Урок 340. 00:04:31
    Why Typed Arrays?
  • Урок 341. 00:02:58
    Multiple Types in Arrays
  • Урок 342. 00:00:55
    When to Use Typed Arrays
  • Урок 343. 00:04:06
    Tuples in TypeScript
  • Урок 344. 00:05:29
    Tuples in Action
  • Урок 345. 00:03:21
    Why Tuples?
  • Урок 346. 00:01:27
    Interfaces
  • Урок 347. 00:04:43
    Long Type Annotations
  • Урок 348. 00:04:37
    Fixing Annotations with Interfaces
  • Урок 349. 00:03:32
    Syntax Around Interfaces
  • Урок 350. 00:04:47
    Functions In Interfaces
  • Урок 351. 00:04:16
    Code Reuse with Interfaces
  • Урок 352. 00:03:13
    General Plan with Interfaces
  • Урок 353. 00:03:48
    Classes
  • Урок 354. 00:03:04
    Basic Inheritance
  • Урок 355. 00:06:42
    Class Method Modifiers
  • Урок 356. 00:06:19
    Fields in Classes
  • Урок 357. 00:04:19
    Fields with Inheritance
  • Урок 358. 00:01:11
    Where to Use Classes
  • Урок 359. 00:02:46
    App Overview
  • Урок 360. 00:04:55
    Bundling with Parcel
  • Урок 361. 00:03:20
    Project Structure
  • Урок 362. 00:05:30
    Generating Random Data
  • Урок 363. 00:05:18
    Type Definition Files
  • Урок 364. 00:06:21
    Using Type Definition Files
  • Урок 365. 00:05:07
    Export Statements in TypeScript
  • Урок 366. 00:04:44
    Defining a Company
  • Урок 367. 00:07:39
    Adding Google Maps Support
  • Урок 368. 00:04:07
    Google Maps Integration with TypeScript
  • Урок 369. 00:12:47
    Exploring Type Definition Files
  • Урок 370. 00:06:29
    Hiding Functionality
  • Урок 371. 00:08:26
    Why Use Private Modifiers? Here's Why
  • Урок 372. 00:09:19
    Adding Markers
  • Урок 373. 00:02:46
    Duplicate Code
  • Урок 374. 00:06:39
    One Possible Solution
  • Урок 375. 00:05:36
    Restricting Access with Interfaces
  • Урок 376. 00:03:27
    Implicit Type Checks
  • Урок 377. 00:06:48
    Showing Popup Windows
  • Урок 378. 00:07:12
    Updating Interface Definitions
  • Урок 379. 00:06:07
    Optional Implements Clauses
  • Урок 380. 00:08:09
    App Wrapup