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

提升你的 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 项目想法变为现实，那么让我们开始吧！

课程目录：

01. Project Demo.mp4
01. Project Demo.srt
01. Project Demo.vtt
02. What is TypeScript_ Lesson Summary.mp4
02. What is TypeScript_ Lesson Summary.srt
02. What is TypeScript_ Lesson Summary.vtt
03. Why use TypeScript with React_.mp4
03. Why use TypeScript with React_.srt
03. Why use TypeScript with React_.vtt
04. Your First React TypeScript Application.mp4
04. Your First React TypeScript Application.srt
04. Your First React TypeScript Application.vtt
05. Prepare Dev Environment - Windows.mp4
05. Prepare Dev Environment - Windows.srt
05. Prepare Dev Environment - Windows.vtt
06. Prepare Dev Environment - MacOS.mp4
06. Prepare Dev Environment - MacOS.srt
06. Prepare Dev Environment - MacOS.vtt
07. How to Set up a New Typescript Project.mp4
07. How to Set up a New Typescript Project.srt
07. How to Set up a New Typescript Project.vtt
08. TypeScript Configuration Options.mp4
08. TypeScript Configuration Options.srt
08. TypeScript Configuration Options.vtt
09. Setting up React TypeScript Using App Generators.mp4
09. Setting up React TypeScript Using App Generators.srt
09. Setting up React TypeScript Using App Generators.vtt
10. Setting up React TypeScript App Using Create React App.mp4
10. Setting up React TypeScript App Using Create React App.srt
10. Setting up React TypeScript App Using Create React App.vtt
11. Setting up React TypeScript Apps Using Vite.mp4
11. Setting up React TypeScript Apps Using Vite.srt
11. Setting up React TypeScript Apps Using Vite.vtt
12. Setting up React TypeScript App Using Parcel.mp4
12. Setting up React TypeScript App Using Parcel.srt
12. Setting up React TypeScript App Using Parcel.vtt
13. Configure Webpack with TypeScript.mp4
13. Configure Webpack with TypeScript.srt
13. Configure Webpack with TypeScript.vtt
14. Configure ESLint and Prettier.mp4
14. Configure ESLint and Prettier.srt
14. Configure ESLint and Prettier.vtt
15. Adding Third Party Libraries.mp4
15. Adding Third Party Libraries.srt
15. Adding Third Party Libraries.vtt
16. Integrating with APIs.mp4
16. Integrating with APIs.srt
16. Integrating with APIs.vtt
17. Deploying an App.mp4
17. Deploying an App.srt
17. Deploying an App.vtt
18. What Are We Building_.mp4
18. What Are We Building_.srt
18. What Are We Building_.vtt
19. Generate the App Scaffold.mp4
19. Generate the App Scaffold.srt
19. Generate the App Scaffold.vtt
20. Setup Supabase and Netlify.mp4
20. Setup Supabase and Netlify.sq.vtt
20. Setup Supabase and Netlify.srt
20. Setup Supabase and Netlify.vtt
21. Supabase Setup Continued.mp4
21. Supabase Setup Continued.sq.vtt
21. Supabase Setup Continued.vtt
22. Types Basics.mp4
22. Types Basics.sq.vtt
22. Types Basics.vtt
23. What Types Does TypeScript Have_.mp4
23. What Types Does TypeScript Have_.sq.vtt
23. What Types Does TypeScript Have_.vtt
24. Creating Custom Types.mp4
24. Creating Custom Types.sq.vtt
24. Creating Custom Types.vtt
25. Arrays and Tuples.mp4
25. Arrays and Tuples.sq.vtt
25. Arrays and Tuples.vtt
26. Type Aliases.mp4
26. Type Aliases.sq.vtt
26. Type Aliases.vtt
27. Union and Intersection Types.mp4
27. Union and Intersection Types.sq.vtt
27. Union and Intersection Types.vtt
28. Interfaces.mp4
28. Interfaces.sq.vtt
28. Interfaces.vtt
29. Enums.mp4
29. Enums.sq.vtt
29. Enums.vtt
30. Functions.mp4
30. Functions.sq.vtt
30. Functions.vtt
31. Parametric Types and Generics.mp4
31. Parametric Types and Generics.sq.vtt
31. Parametric Types and Generics.vtt
32. Utility Types.mp4
32. Utility Types.sq.vtt
32. Utility Types.vtt
33. Advanced Type Manipulations.mp4
33. Advanced Type Manipulations.sq.vtt
33. Advanced Type Manipulations.vtt
34. Identifying and Addressing Type Errors.mp4
34. Identifying and Addressing Type Errors.sq.vtt
34. Identifying and Addressing Type Errors.vtt
35. Using Props and State.mp4
35. Using Props and State.sq.vtt
35. Using Props and State.vtt
36. Using Hooks.mp4
36. Using Hooks.sq.vtt
36. Using Hooks.vtt
37. Handling Events.mp4
37. Handling Events.sq.vtt
37. Handling Events.vtt
38. Using Context.mp4
38. Using Context.sq.vtt
38. Using Context.vtt
39. Using Refs.mp4
39. Using Refs.vtt
40. Styling React Components.mp4
40. Styling React Components.sq(1).vtt
40. Styling React Components.sq.vtt
40. Styling React Components.vtt
41. Define the Types.mp4
41. Define the Types.srt
41. Define the Types.vtt
42. Basic Implementation.mp4
42. Basic Implementation.srt
42. Basic Implementation.vtt
43. Cover Image Component.mp4
43. Cover Image Component.srt
43. Cover Image Component.vtt
44. Spacer Component.mp4
44. Spacer Component.srt
44. Spacer Component.vtt
45. Title Component.mp4
45. Title Component.srt
45. Title Component.vtt
46. Basic Node.mp4
46. Basic Node.srt
46. Basic Node.vtt
47. useFocusedNodeIndex Hook.mp4
47. useFocusedNodeIndex Hook.srt
47. useFocusedNodeIndex Hook.vtt
48. Page Component.mp4
48. Page Component.srt
48. Page Component.vtt
49. Render the Page and Test the App.mp4
49. Render the Page and Test the App.srt
49. Render the Page and Test the App.vtt
50. Move State Management to Context.mp4
50. Move State Management to Context.srt
50. Move State Management to Context.vtt
51. Create the usePageState Hook.mp4
51. Create the usePageState Hook.srt
51. Create the usePageState Hook.vtt
52. Create AppStateContext.mp4
52. Create AppStateContext.srt
52. Create AppStateContext.vtt
53. Make the BasicNode - the AppStateContext.mp4
53. Make the BasicNode - the AppStateContext.srt
53. Make the BasicNode - the AppStateContext.vtt
54. Make the Page - the AppStateContext.mp4
54. Make the Page - the AppStateContext.srt
54. Make the Page - the AppStateContext.vtt
55. Add Multiple Node Kinds.mp4
55. Add Multiple Node Kinds.srt
55. Add Multiple Node Kinds.vtt
56. Create NodeTypeSwitcher.mp4
56. Create NodeTypeSwitcher.srt
56. Create NodeTypeSwitcher.vtt
57. useOverflowsScreenBottom.mp4
57. useOverflowsScreenBottom.srt
57. useOverflowsScreenBottom.vtt
58. Create CommandPanel.mp4
58. Create CommandPanel.srt
58. Create CommandPanel.vtt
59. Render CommandPanel Inside the BasicNode.mp4
59. Render CommandPanel Inside the BasicNode.srt
59. Render CommandPanel Inside the BasicNode.vtt
60. Make the Nodes Draggable.mp4
60. Make the Nodes Draggable.srt
60. Make the Nodes Draggable.vtt
61. Create the NodeContainer Component.mp4
61. Create the NodeContainer Component.srt
61. Create the NodeContainer Component.vtt
62. Reordering the Nodes.mp4
62. Reordering the Nodes.srt
62. Reordering the Nodes.vtt
63. Using HOCs.mp4
63. Using HOCs.srt
63. Using HOCs.vtt
64. Typing HOCs.mp4
64. Typing HOCs.srt
64. Typing HOCs.vtt
65. Using Render Props.mp4
65. Using Render Props.srt
65. Using Render Props.vtt
66. Implement Navigation.mp4
66. Implement Navigation.srt
66. Implement Navigation.vtt
67. Create AuthSessionContext.mp4
67. Create AuthSessionContext.srt
67. Create AuthSessionContext.vtt
68. Create the Auth Page.mp4
68. Create the Auth Page.srt
68. Create the Auth Page.vtt
69. Create the Private Route Component.mp4
69. Create the Private Route Component.srt
69. Create the Private Route Component.vtt
70. Sync the State with the Backend.mp4
70. Sync the State with the Backend.srt
70. Sync the State with the Backend.vtt
71. Create the withInitialState HOC.mp4
71. Create the withInitialState HOC.srt
71. Create the withInitialState HOC.vtt
72. Create Page Node Component.mp4
72. Create Page Node Component.srt
72. Create Page Node Component.vtt
73. Create FileImage Component.mp4
73. Create FileImage Component.srt
73. Create FileImage Component.vtt
74. Update the Cover Component.mp4
74. Update the Cover Component.srt
74. Update the Cover Component.vtt
75. Create ImageNode Component.mp4
75. Create ImageNode Component.srt
75. Create ImageNode Component.vtt
76. Upload the Project to Netlify.mp4
76. Upload the Project to Netlify.srt
76. Upload the Project to Netlify.vtt
77. Testing with Jest or Vitest and React Testing Library.mp4
77. Testing with Jest or Vitest and React Testing Library.srt
77. Testing with Jest or Vitest and React Testing Library.vtt
78. Setting Up Jest and React Testing Library.mp4
78. Setting Up Jest and React Testing Library.srt
78. Setting Up Jest and React Testing Library.vtt
79. Setting Up Vitest and React Testing Library.mp4
79. Setting Up Vitest and React Testing Library.srt
79. Setting Up Vitest and React Testing Library.vtt
80. Testing Components.mp4
80. Testing Components.srt
80. Testing Components.vtt
81. Testing Hooks.mp4
81. Testing Hooks.srt
81. Testing Hooks.vtt
82. Using Mocks.mp4
82. Using Mocks.srt
82. Using Mocks.vtt
83. Prepare the Project for Migration.mp4
83. Prepare the Project for Migration.srt
83. Prepare the Project for Migration.vtt
84. Migrate React Components.mp4
84. Migrate React Components.srt
84. Migrate React Components.vtt
85. Migrate React Hooks.mp4
85. Migrate React Hooks.srt
85. Migrate React Hooks.vtt
86. Update TypeScript Version.mp4
86. Update TypeScript Version.srt
86. Update TypeScript Version.vtt
Build a Notion Clone with React and TypeScript.txt