使用React和TypeScript构建Notion克隆项目|Udemy

1. Project Demo.mp4
2. Project Demo.srt
3. Project Demo.vtt
4. What is TypeScript_ Lesson Summary.mp4
5. What is TypeScript_ Lesson Summary.srt
6. What is TypeScript_ Lesson Summary.vtt
7. Why use TypeScript with React_.mp4
8. Why use TypeScript with React_.srt
9. Why use TypeScript with React_.vtt
10. Your First React TypeScript Application.mp4
11. Your First React TypeScript Application.srt
12. Your First React TypeScript Application.vtt
13. Prepare Dev Environment – Windows.mp4
14. Prepare Dev Environment – Windows.srt
15. Prepare Dev Environment – Windows.vtt
16. Prepare Dev Environment – MacOS.mp4
17. Prepare Dev Environment – MacOS.srt
18. Prepare Dev Environment – MacOS.vtt
19. How to Set up a New Typescript Project.mp4
20. How to Set up a New Typescript Project.srt
21. How to Set up a New Typescript Project.vtt
22. TypeScript Configuration Options.mp4
23. TypeScript Configuration Options.srt
24. TypeScript Configuration Options.vtt
25. Setting up React TypeScript Using App Generators.mp4
26. Setting up React TypeScript Using App Generators.srt
27. Setting up React TypeScript Using App Generators.vtt
28. Setting up React TypeScript App Using Create React App.mp4
29. Setting up React TypeScript App Using Create React App.srt
30. Setting up React TypeScript App Using Create React App.vtt
31. Setting up React TypeScript Apps Using Vite.mp4
32. Setting up React TypeScript Apps Using Vite.srt
33. Setting up React TypeScript Apps Using Vite.vtt
34. Setting up React TypeScript App Using Parcel.mp4
35. Setting up React TypeScript App Using Parcel.srt
36. Setting up React TypeScript App Using Parcel.vtt
37. Configure Webpack with TypeScript.mp4
38. Configure Webpack with TypeScript.srt
39. Configure Webpack with TypeScript.vtt
40. Configure ESLint and Prettier.mp4
41. Configure ESLint and Prettier.srt
42. Configure ESLint and Prettier.vtt
43. Adding Third Party Libraries.mp4
44. Adding Third Party Libraries.srt
45. Adding Third Party Libraries.vtt
46. Integrating with APIs.mp4
47. Integrating with APIs.srt
48. Integrating with APIs.vtt
49. Deploying an App.mp4
50. Deploying an App.srt
51. Deploying an App.vtt
52. What Are We Building_.mp4
53. What Are We Building_.srt
54. What Are We Building_.vtt
55. Generate the App Scaffold.mp4
56. Generate the App Scaffold.srt
57. Generate the App Scaffold.vtt
58. Setup Supabase and Netlify.mp4
59. Setup Supabase and Netlify.sq.vtt
60. Setup Supabase and Netlify.srt
61. Setup Supabase and Netlify.vtt
62. Supabase Setup Continued.mp4
63. Supabase Setup Continued.sq.vtt
64. Supabase Setup Continued.vtt
65. Types Basics.mp4
66. Types Basics.sq.vtt
67. Types Basics.vtt
68. What Types Does TypeScript Have_.mp4
69. What Types Does TypeScript Have_.sq.vtt
70. What Types Does TypeScript Have_.vtt
71. Creating Custom Types.mp4
72. Creating Custom Types.sq.vtt
73. Creating Custom Types.vtt
74. Arrays and Tuples.mp4
75. Arrays and Tuples.sq.vtt
76. Arrays and Tuples.vtt
77. Type Aliases.mp4
78. Type Aliases.sq.vtt
79. Type Aliases.vtt
80. Union and Intersection Types.mp4
81. Union and Intersection Types.sq.vtt
82. Union and Intersection Types.vtt
83. Interfaces.mp4
84. Interfaces.sq.vtt
85. Interfaces.vtt
86. Enums.mp4
87. Enums.sq.vtt
88. Enums.vtt
89. Functions.mp4
90. Functions.sq.vtt
91. Functions.vtt
92. Parametric Types and Generics.mp4
93. Parametric Types and Generics.sq.vtt
94. Parametric Types and Generics.vtt
95. Utility Types.mp4
96. Utility Types.sq.vtt
97. Utility Types.vtt
98. Advanced Type Manipulations.mp4
99. Advanced Type Manipulations.sq.vtt
100. Advanced Type Manipulations.vtt
101. Identifying and Addressing Type Errors.mp4
102. Identifying and Addressing Type Errors.sq.vtt
103. Identifying and Addressing Type Errors.vtt
104. Using Props and State.mp4
105. Using Props and State.sq.vtt
106. Using Props and State.vtt
107. Using Hooks.mp4
108. Using Hooks.sq.vtt
109. Using Hooks.vtt
110. Handling Events.mp4
111. Handling Events.sq.vtt
112. Handling Events.vtt
113. Using Context.mp4
114. Using Context.sq.vtt
115. Using Context.vtt
116. Using Refs.mp4
117. Using Refs.vtt
118. Styling React Components.mp4
119. Styling React Components.sq(1).vtt
120. Styling React Components.sq.vtt
121. Styling React Components.vtt
122. Define the Types.mp4
123. Define the Types.srt
124. Define the Types.vtt
125. Basic Implementation.mp4
126. Basic Implementation.srt
127. Basic Implementation.vtt
128. Cover Image Component.mp4
129. Cover Image Component.srt
130. Cover Image Component.vtt
131. Spacer Component.mp4
132. Spacer Component.srt
133. Spacer Component.vtt
134. Title Component.mp4
135. Title Component.srt
136. Title Component.vtt
137. Basic Node.mp4
138. Basic Node.srt
139. Basic Node.vtt
140. useFocusedNodeIndex Hook.mp4
141. useFocusedNodeIndex Hook.srt
142. useFocusedNodeIndex Hook.vtt
143. Page Component.mp4
144. Page Component.srt
145. Page Component.vtt
146. Render the Page and Test the App.mp4
147. Render the Page and Test the App.srt
148. Render the Page and Test the App.vtt
149. Move State Management to Context.mp4
150. Move State Management to Context.srt
151. Move State Management to Context.vtt
152. Create the usePageState Hook.mp4
153. Create the usePageState Hook.srt
154. Create the usePageState Hook.vtt
155. Create AppStateContext.mp4
156. Create AppStateContext.srt
157. Create AppStateContext.vtt
158. Make the BasicNode – the AppStateContext.mp4
159. Make the BasicNode – the AppStateContext.srt
160. Make the BasicNode – the AppStateContext.vtt
161. Make the Page – the AppStateContext.mp4
162. Make the Page – the AppStateContext.srt
163. Make the Page – the AppStateContext.vtt
164. Add Multiple Node Kinds.mp4
165. Add Multiple Node Kinds.srt
166. Add Multiple Node Kinds.vtt
167. Create NodeTypeSwitcher.mp4
168. Create NodeTypeSwitcher.srt
169. Create NodeTypeSwitcher.vtt
170. useOverflowsScreenBottom.mp4
171. useOverflowsScreenBottom.srt
172. useOverflowsScreenBottom.vtt
173. Create CommandPanel.mp4
174. Create CommandPanel.srt
175. Create CommandPanel.vtt
176. Render CommandPanel Inside the BasicNode.mp4
177. Render CommandPanel Inside the BasicNode.srt
178. Render CommandPanel Inside the BasicNode.vtt
179. Make the Nodes Draggable.mp4
180. Make the Nodes Draggable.srt
181. Make the Nodes Draggable.vtt
182. Create the NodeContainer Component.mp4
183. Create the NodeContainer Component.srt
184. Create the NodeContainer Component.vtt
185. Reordering the Nodes.mp4
186. Reordering the Nodes.srt
187. Reordering the Nodes.vtt
188. Using HOCs.mp4
189. Using HOCs.srt
190. Using HOCs.vtt
191. Typing HOCs.mp4
192. Typing HOCs.srt
193. Typing HOCs.vtt
194. Using Render Props.mp4
195. Using Render Props.srt
196. Using Render Props.vtt
197. Implement Navigation.mp4
198. Implement Navigation.srt
199. Implement Navigation.vtt
200. Create AuthSessionContext.mp4
201. Create AuthSessionContext.srt
202. Create AuthSessionContext.vtt
203. Create the Auth Page.mp4
204. Create the Auth Page.srt
205. Create the Auth Page.vtt
206. Create the Private Route Component.mp4
207. Create the Private Route Component.srt
208. Create the Private Route Component.vtt
209. Sync the State with the Backend.mp4
210. Sync the State with the Backend.srt
211. Sync the State with the Backend.vtt
212. Create the withInitialState HOC.mp4
213. Create the withInitialState HOC.srt
214. Create the withInitialState HOC.vtt
215. Create Page Node Component.mp4
216. Create Page Node Component.srt
217. Create Page Node Component.vtt
218. Create FileImage Component.mp4
219. Create FileImage Component.srt
220. Create FileImage Component.vtt
221. Update the Cover Component.mp4
222. Update the Cover Component.srt
223. Update the Cover Component.vtt
224. Create ImageNode Component.mp4
225. Create ImageNode Component.srt
226. Create ImageNode Component.vtt
227. Upload the Project to Netlify.mp4
228. Upload the Project to Netlify.srt
229. Upload the Project to Netlify.vtt
230. Testing with Jest or Vitest and React Testing Library.mp4
231. Testing with Jest or Vitest and React Testing Library.srt
232. Testing with Jest or Vitest and React Testing Library.vtt
233. Setting Up Jest and React Testing Library.mp4
234. Setting Up Jest and React Testing Library.srt
235. Setting Up Jest and React Testing Library.vtt
236. Setting Up Vitest and React Testing Library.mp4
237. Setting Up Vitest and React Testing Library.srt
238. Setting Up Vitest and React Testing Library.vtt
239. Testing Components.mp4
240. Testing Components.srt
241. Testing Components.vtt
242. Testing Hooks.mp4
243. Testing Hooks.srt
244. Testing Hooks.vtt
245. Using Mocks.mp4
246. Using Mocks.srt
247. Using Mocks.vtt
248. Prepare the Project for Migration.mp4
249. Prepare the Project for Migration.srt
250. Prepare the Project for Migration.vtt
251. Migrate React Components.mp4
252. Migrate React Components.srt
253. Migrate React Components.vtt
254. Migrate React Hooks.mp4
255. Migrate React Hooks.srt
256. Migrate React Hooks.vtt
257. Update TypeScript Version.mp4
258. Update TypeScript Version.srt
259. Update TypeScript Version.vtt
     Build a Notion Clone with React and TypeScript.txt

提升你的 React 和 TypeScript 技术技能，并构建一个值得放入作品集的应用程序，向雇主展示你创建复杂全栈应用程序的能力。此外，你还将学习如何使用 Vite 进行高效的项目脚手架搭建，以及使用 Supabase 进行数据库管理和身份验证。

你将会学到的

• 学习如何使用 TypeScript 创建 React 应用
• 了解 React TypeScript 应用的优势
• 构建一个全面且出色的作品集项目，让雇主印象深刻
• 如何测试 React TypeScript 应用
• 高级 UI 技术，如拖放功能，创建引人入胜的界面
• 类型安全编程技能，使代码更可靠和可维护

说明

这是一个绝佳的机会，让你在构建作品集项目的同时学习如何将 React 与 TypeScript 结合使用！

这是你的游乐场，可以在这里探索、学习并创造真正令人印象深刻的东西。你不仅会提升你的技术技能，还会打造一个值得放入作品集的应用程序，向雇主展示你能够轻松构建复杂的全栈应用程序。

在这个 React TypeScript 项目中，你将学习以下内容：

首先，我们有 React.js。它是当今 web 开发的基石。我们将带你快速掌握创建组件、操作 DOM 节点、专业地处理事件以及全局和本地管理状态。这一切都是为了让应用程序响应迅速且交互性强，确保用户拥有流畅的体验。别忘了 React Router DOM 用于应用导航。我们将讲解如何实现私有路由，确保只有经过身份验证的用户才能访问应用的某些部分。这是每个 web 开发者都必须掌握的知识。

接下来是 DNDKit——谁不喜欢拖放功能呢？我们将教你如何通过简单的鼠标拖动使页面上的元素可移动。你将学会设置自定义拖动目标并无缝重新排序元素。这项技能将为你的项目增添额外的亮点。

当然，我们不能忘记 TypeScript。它旨在使你的代码无懈可击，尽早捕获错误，并使开发过程更加顺畅。我们将深入探讨如何在 React 中使用 TypeScript，定义新类型，并利用库中的类型使代码更清晰和可靠。

Vite 是你快速启动项目的通行证。它是一个注重速度的构建工具，让你比以往更快地启动、构建和运行项目。你会爱上它为你的工作流程带来的高效性。

Supabase 是你的应用数据的存储地。从管理数据库到存储图片和处理用户身份验证，它都能为你提供支持。这是一个强大的工具，简化了后端工作，让你可以更专注于创建出色的用户体验。

最后，CSS Modules 将是你进行样式设计的首选。告别样式冲突，迎接模块化、可重用的 CSS，让你的应用看起来惊艳无比。

如果你准备好将这个出色且有价值的全栈 React 项目想法变为现实，那么让我们开始吧！