资源分类: IT编程	查看预览
最近更新: 2025-03-17	文件内容: 视频+中英文字幕+配套课件
视频分辨率: 720P 准高清	文件大小: 8.27GB
视频语言: 英语	视频字幕: 中英字幕

幻仿编程 Udemy 付费课程，独家中英字幕 + 配套资料！
限时1折特惠！课程永久访问权，随时随地学习！

用 JavaScript-CSS 和 React-TS-Tailwind 编写 30 个项目

不仅掌握 JavaScript 基础知识，还学习如何使用 React、TypeScript 和 Tailwind 重写它

讲师：Amir shahbabaee

您将学到什么

如何从 JavaScript 迁移到 React
如何通过定制项目使用 JavaScript 和 React 进行编码
识别并解决 Javascript 与 React 之间的差异
完成 30 个项目两次，一次使用纯 JavaScript，一次使用 React 等现代工具

探索相关主题

React JS
Web 开发
发展

要求

需要具备 javascript、react 和 typescript 的基础知识

描述

通过从头开始构建 30 个项目掌握 JavaScript 和 React

课程概述：本课程旨在帮助您通过从头开始构建 30 个项目来获得 JavaScript（原生 JS）和 React 的实践经验。每个项目将构建两次 – 一次使用原生 JavaScript，然后使用TypeScript重构为 React 应用程序并使用Tailwind CSS进行样式设置。通过此过程，您将深入了解核心 JavaScript 概念，同时学习如何有效利用 React 基于组件的架构、状态管理和现代工具。

为什么要开设这门课程？

大多数课程只关注原生 JavaScript 或 React，因此在两者之间转换时会存在理解上的差距。本课程通过清晰比较使用和不使用框架解决问题的方法，填补了这一空白。对于想要深入了解 JavaScript 基础知识和使用 React 进行现代前端开发的开发人员来说，这是一门完美的课程。

学生将完成本课程，并有信心使用原生 JS 或 React 构建功能齐全的 Web 应用程序，并能够理解何时以及为何在更大、可扩展的项目中采用 React 之类的框架。

这种结构确保学生不仅学习如何使用 JavaScript 和 React，还学习何时以及为何最佳地应用每种工具。

本课程适合哪些人？本课程适合：

初级到中级开发人员，熟悉基本的 JavaScript，并希望通过实践加深知识。

正在转向 React 的开发人员已经拥有 JavaScript 经验，但想了解 React 如何改进传统的开发实践。

有抱负的前端开发人员希望通过现实世界的项目来增强他们的投资组合并巩固他们对现代前端开发的知识。

课程目标：课程结束时，您将：

课程结构：

本课程分为30 个模块，每个模块侧重于一个独特的项目。每个模块的结构如下：

项目概况：

对项目、其用例和预期特性的简要说明。

该模块将涵盖的关键 JavaScript 概念或 React 概念。

第 1 部分：使用原生 JavaScript 进行构建

仅使用 HTML、CSS 和 JavaScript 的逐步开发过程。

重点关注 DOM 操作、事件、本地存储和该工具的其他功能。

了解如何在没有外部库的情况下处理更新和优化。

第 2 部分：React 中的重构

一步一步的 React 实现同一个项目。

专注于 React 组件、钩子（例如 useState、useEffect）、JSX 等。

讨论与原始 JS 版本的主要区别，以及 React 如何简化某些任务。

项目反思与比较

代码库的比较，突出显示原始 JavaScript 和 React 实现之间的差异。

讨论性能、可扩展性和代码可维护性方面的权衡。

对学生的主要好处：

全面掌握 JavaScript 和 React：通过使用原生 JavaScript 和 React 从头构建每个项目，学生将熟练掌握这两种编程范式。他们将了解 JavaScript 的优势和局限性，同时深入了解 React 为何成为现代前端开发的首选库。

实践、动手学习：课程强调边做边学，有 30 个具体项目，在传统 JavaScript 编码和现代 React 开发之间取得平衡。每个项目都基于一些特定功能，让学生逐步提高技能。

提高解决问题的能力：两次解决同一个问题（一次使用原生 JS，一次使用 React）迫使学生批判性地思考解决编码挑战的不同方法。他们将学习如何权衡不同开发方法之间的利弊。

深入了解 React 的核心概念：通过从传统 JS 过渡到 React，学生将深入了解 React 的关键概念，例如组件、钩子、道具和状态。这种反复的接触巩固了这些概念，使学生更轻松地在实际场景中使用 React。

前端开发坚实基础：除了学习 React，学生还将加强对前端开发基础知识的理解——DOM 操作、事件处理、CSS 和 JavaScript 功能。这使得该课程即使对于那些只想巩固 JavaScript 技能的人来说也是有益的。

为就业机会做准备：项目的双重性质（原生 JS 和 React）为学生提供了更广阔的前端开发视角，使他们在就业市场上更加灵活。雇主通常欣赏那些既了解如何从头开始构建应用程序，又了解如何使用现代工具简化流程的开发人员。

课程要求：

需要CSS 、JavaScript 和 React的基本知识。

本课程适合哪些人：

对编码技术感兴趣的初级和中级前端开发人员

共 173 节课程 • 总时长 15 小时 54 分钟
第一章简介
1. 课程结构与目标	1分5秒
2. 安装软件	1分
3. 添加 VSCode 扩展	1分45秒
4. 为JavaScript项目设置环境	3分32秒
5. React项目环境搭建	3分34秒
6. App组件初始状态	7分56秒
第二章项目1 隐藏搜索框
1. JavaScript 版本	9分1秒
2. React版本	9分50秒
第三章项目2 二维码生成器
1. JavaScript版本第1部分	3分57秒
2. JavaScript版本第2部分	3分8秒
3. JavaScript版本第3部分	4分1秒
4. React版本 – 第1部分	9分7秒
5. React版本 – 第2部分	8分31秒
第四章项目3 密码生成器
1. JavaScript版本第1部分	6分27秒
2. JavaScript版本第2部分	6分27秒
3. React版本 – 第1部分	10分45秒
4. React版本 – 第2部分	4分37秒
5. React版本 – 第3部分	3分55秒
第五章项目4 密码强度
1. JavaScript版本第1部分	4分7秒
2. JavaScript版本第2部分	1分40秒
3. JavaScript版本第3部分	7分25秒
4. JavaScript版本第4部分	4分51秒
5. React版本 – 第1部分	6分57秒
6. React版本 – 第2部分	7分52秒
第六章项目5 文本转语音
1. JavaScript版本第1部分	2分6秒
2. JavaScript版本第2部分	4分4秒
3. React版本 – 第1部分	3分4秒
4. React版本 – 第2部分	2分39秒
第七章项目6 圆形进度条
1. JavaScript版本第1部分	3分21秒
2. JavaScript版本第2部分	5分58秒
3. JavaScript版本第3部分	5分25秒
4. JavaScript版本第4部分	4分57秒
5. React版本 – 第1部分	7分47秒
6. React版本 – 第2部分	9分32秒
第八章项目07 – 深色模式切换
1. JavaScript版本第1部分	4分14秒
2. JavaScript版本第2部分	7分37秒
3. React版本 – 第1部分	2分50秒
第九章项目8 – 数学验证码
1. JavaScript版本第1部分	2分57秒
2. JavaScript版本第2部分	6分27秒
3. React版本 – 第1部分	10分40秒
第十章项目09 – 阴影生成器
1. JavaScript版本第1部分	9分34秒
2. JavaScript版本第2部分	7分36秒
3. React版本 – 第1部分	9分14秒
4. React版本第3部分 SetState和onChange	11分8秒
5. React版本第4部分自定义hook	4分51秒
6. React版本第2部分自定义组件	2分16秒
第11章项目10 – 渐变生成器
1. JavaScript版本第1部分	6分43秒
2. JavaScript版本第2部分添加颜色	6分1秒
3. JavaScript版本第3部分编写监听器	9分44秒
4. React版本 – 第1部分	4分57秒
5. React版本 – 第2部分	9分19秒
第12章项目11 – 吐司
1. JavaScript版本第1部分	4分16秒
2. JavaScript版本第2部分	4分18秒
3. React版本 – 第1部分	4分24秒
4. React版本 – 第2部分	7分34秒
第13章项目12 – Flex幻灯片
1. JavaScript版本第1部分	5分5秒
2. JavaScript版本第2部分	3分59秒
3. React版本 – 第1部分	4分36秒
4. React版本 – 第2部分	3分24秒
第14章项目13 – 滚动监听器
1. JavaScript版本第1部分	5分51秒
2. JavaScript版本 – 第2部分	1分54秒
3. React 版本 – 第1部分	4分43秒
4. React版本 – 第2部分	1分33秒
第15章项目14 – 网络摄像头捕获
1. JavaScript版本第1部分	5分30秒
2. JavaScript版本第2部分	3分43秒
3. JavaScript版本 – 第3部分	5分43秒
4. JavaScript版本第4部分	3分
5. React版本 – 第1部分	5分11秒
6. React版本 – 第2部分	2分14秒
7. React版本 – 第3部分	5分2秒
8. React版本 – 第4部分	3分26秒
第16章项目15 – 屏幕共享
1. JavaScript版本第1部分	3分1秒
2. JavaScript版本第2部分	2分23秒
3. JavaScript版本第3部分	5分13秒
4. React版本 – 第1部分	3分46秒
5. React版本 – 第2部分	5分18秒
第17章项目16 – 发射倒计时
1. JavaScript版本 – 第1部分	4分13秒
2. JavaScript版本第2部分	7分45秒
3. JavaScript版本 – 第3部分	4分21秒
4. React版本 – 第1部分	2分52秒
5. React版本 – 第2部分	9分27秒
第18章项目17 – 多步骤进度条
1. JavaScript版本第1部分	3分5秒
2. JavaScript版本 – 第2部分	8分30秒
3. JavaScript版本第3部分	7分8秒
4. React版本 – 第1部分	4分39秒
5. React版本 – 第2部分	3分13秒
第19章项目18 – 自定义视频播放器
1. JavaScript版本 – 第1部分	4分28秒
2. JavaScript版本第2部分	5分1秒
3. JavaScript版本第3部分	7分5秒
4. JavaScript版本第4部分	8分3秒
5. React版本 – 第1部分	6分29秒
6. React版本 – 第2部分	6分25秒
7. React版本 – 第3部分	8分16秒
第20章项目19 – 无限滚动
1. JavaScript版本 – 第1部分	2分36秒
2. JavaScript版本第2部分	8分45秒
3. React版本 – 第1部分	6分29秒
4. React版本 – 第2部分	6分50秒
第21章项目20 模态框
1. JavaScript版本第1部分	2分31秒
2. JavaScript版本第2部分	5分36秒
3. JavaScript版本第3部分	4分37秒
4. React版本 – 第1部分	6分11秒
5. React版本 – 第2部分	4分51秒
6. React版本 – 第3部分	5分36秒
第22章项目21 – 模拟时钟
1. JavaScript版本第1部分	1分48秒
2. JavaScript版本第2部分	8分33秒
3. JavaScript版本第3部分	9分49秒
4. React 版本 – 第1部分	6分54秒
第23章项目22 猜数字游戏
1. JavaScript版本第1部分	7分29秒
2. JavaScript版本 – 第2部分	7分16秒
3. JavaScript版本 – 第3部分	6分49秒
4. React版本 – 第1部分	6分7秒
5. React版本 – 第2部分	4分33秒
6. React版本 – 第3部分	4分27秒
第24章项目23 – 石头剪刀布
1. JavaScript版本第1部分	6分44秒
2. JavaScript版本第2部分	10分4秒
3. React版本 – 第1部分	6分37秒
4. React版本 – 第2部分	9分54秒
第25章项目24 – 拖放
1. JavaScript版本第1部分	2分32秒
2. JavaScript版本 – 第2部分	3分21秒
3. JavaScript版本 – 第3部分	4分49秒
4. JavaScript版本第4部分	4分21秒
5. React 版本 – 第1部分	6分18秒
6. React版本 – 第2部分	3分1秒
7. React版本 – 第3部分	5分54秒
8. React版本 – 第4部分	5分16秒
第26章项目25 – 西蒙游戏
1. JavaScript版本第1部分	3分48秒
2. JavaScript版本第2部分	7分24秒
3. JavaScript版本第3部分	6分22秒
4. JavaScript版本第4部分	8分32秒
5. JavaScript版本第5部分	9分41秒
6. React版本 – 第1部分	13分48秒
7. React版本 – 第2部分	6分40秒
8. React版本 – 第3部分	4分7秒
9. React版本 – 第4部分	8分1秒
10. React版本 – 第5部分	4分12秒
第27章项目26 – 文件夹结构
1. JavaScript版本第1部分	5分56秒
2. JavaScript版本第2部分	4分3秒
3. JavaScript版本第3部分	3分36秒
4. React版本 – 第1部分	5分5秒
5. React版本 – 第2部分	5分38秒
第28章项目27 数独求解器
1. JavaScript版本第1部分	7分35秒
2. JavaScript版本第2部分	15分21秒
3. JavaScript版本第3部分	2分6秒
4. React版本 – 第1部分	4分44秒
5. React版本 – 第2部分	3分36秒
第29章项目28 绘图
1. JavaScript版本第1部分	4分2秒
2. JavaScript版本第2部分	6分21秒
3. JavaScript版本第3部分	9分
4. React版本 – 第1部分	2分33秒
5. React版本 – 第2部分	5分35秒
6. React版本 – 第3部分	5分24秒
第30章项目29 单词拼写游戏
1. JavaScript版本第1部分	4分19秒
2. JavaScript版本第2部分	6分41秒
3. JavaScript版本第3部分	2分52秒
4. JavaScript版本第4部分	4分59秒
5. React版本 – 第1部分	4分13秒
6. React版本 – 第2部分	6分30秒
7. React版本 – 第3部分	6分51秒
第31章项目30 – 贪吃蛇游戏
1. JavaScript版本第1部分	7分53秒
2. JavaScript版本第2部分	4分49秒
3. JavaScript版本第3部分	5分45秒
4. JavaScript版本第4部分	3分24秒
5. JavaScript版本第5部分	2分49秒
6. JavaScript版本 – 第6部分	3分29秒
7. JavaScript版本 – 第7部分	2分59秒
8. JavaScript版本 – 第8部分	5分52秒
9. React版本 – 第1部分	3分16秒
10. React版本 – 第2部分	3分44秒
11. React版本 – 第3部分	4分49秒
12. React版本 – 第4部分	3分41秒
13. React版本 – 第5部分	3分45秒
14. React版本 – 第6部分	4分59秒

1. 关于课程更新与获取

如何获取本站课程？
○ 免费获取方式：在本站签到、评论、发布文章等可获取积分，通过积分购买课程。
○ 付费获取方式：购买本站【月度会员】或【永久会员】。

课程购买后是否支持更新？
○ 是的，所有课程均提供免费更新服务。 我们致力于为您提供持续的学习支持。

如何获取更新？
○ 单独购买的课程： 您可在“个人中心”随时查看购买记录及最新下载链接，轻松获取免费更新。
○ 永久会员： 您可在相关页面直接查看最新下载地址，随时免费获取更新。
○ 非永久会员（重要提示）：通过会员权限下载的课程，在“个人中心”可能不显示具体订单记录。

因此，会员到期后，您将无法通过“个人中心”查看最新下载链接。
① 解决方案建议：续费会员： 恢复会员权限后，即可再次查看所有最新下载链接。
② 妥善保存下载链接： 我们强烈建议您在会员有效期内，保存好本站分享的课程下载链接。通常，课程更新内容会直接补充到原有分享链接中。

2. 关于课程资料

课程下载后资料是否齐全？
○ 绝大部分课程资料齐全。 我们尽力确保您获得完整的学习资源。
○ 少数情况说明： 极少数课程可能存在资料缺失情况。针对 Udemy 课程，资料形式多样，请知悉：本地文件（随视频下载）： 此类课件通常随视频一并提供，下载即得。

① 本地文件（含链接）： 课件文件中会提供资料下载链接，您需自行访问链接下载。此类资料通常也可获取。
② 在线平台存储（如 GitHub）： 讲师会在视频中说明资料获取方式（如访问特定平台），请您按指引自行下载。
③ Udemy 平台内资料：部分资料需登录您在 Udemy 购买的账号才能查看。此类资料本站无法提供，除非您自行在 Udemy 平台购买该课程。

3. 关于课程字幕

是否提供中英文双字幕？原本无字幕的课程是否支持？
○ 是的，本站下载的所有课程均提供中英文双字幕，包括 Udemy 原本无任何字幕的课程。 我们致力于提升您的学习体验。

Udemy 字幕现状与本站服务：
○ Udemy 绝大多数课程本身不提供任何字幕。在少数提供字幕的课程中，也几乎不提供中文字幕。

本站字幕服务流程：
① Udemy 有字幕： 我们会将其翻译成中文字幕，与英文字幕一同提供。
② Udemy 无字幕： 我们会通过技术手段识别生成英文字幕，再翻译成中文字幕，一同提供给您。

字幕服务重要说明（请您理解）：
○ 翻译精度： 字幕翻译采用谷歌翻译引擎完成，虽不及人工翻译精准，但足以保障您正常学习理解。
○ 若您仍然觉得字幕精度较低： 可联系站长针对性润色字幕（该服务仅限本站会员）。

4. 关于视频存储与使用

视频存储位置与观看/下载方式？
本站所有课程视频均存储于网盘平台。
您支持在线观看： 可在网盘内直接播放学习。
您支持下载： 可将视频下载至本地，使用播放器播放，更灵活便捷。

主要存储网盘：百度网盘

视频格式与加密情况？
本站所有课程视频均以 MP4 或 MKV 通用格式提供。
视频文件不加密，您可自由分享（请遵守相关法律法规）。
播放建议： 使用本地播放器（如 PotPlayer）播放时，可同时加载中英文字幕文件，学习体验更佳。您可参考我们提供的《PotPlayer 挂载中英双字幕教程》。

5. 关于售后支持与退款政策

遇到问题如何联系？
无论您在购买前或购买后遇到任何疑问，都欢迎随时联系站长。 我们将竭诚为您服务。

退款政策说明：
原则： 由于虚拟商品（课程、资料等）具有可复制性，一旦购买成功并完成下载，原则上不支持退款。

请您在购买前仔细阅读课程介绍、资料说明及本条款，确认符合您的需求。 如有不确定之处，欢迎先行咨询站长。

文章版权归作者所有，未经允许请勿转载。

THE END