【Udemy中英字幕】Write 30 projects in JavaScript-CSS then React-TS-Tailwind

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

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

讲师：Amir shahbabaee

双语IT资源独家Udemy付费课程，独家中英文字幕，配套资料齐全！

用不到1/10的价格，即可享受同样的高品质课程，且可以完全拥有，随时随地都可以任意观看和分享。

您将学到什么

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

探索相关主题

要求

• 需要具备 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 如何改进传统的开发实践。

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

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

1. 通过从头开始构建交互式项目来掌握原始 JavaScript 。

2. 通过使用类型安全的方法重构每个项目来学习使用 TypeScript 的 React ，从而提高应用程序的可扩展性和可维护性。

3. 探索 Tailwind CSS以快速创建响应式、现代的用户界面，而无需传统 CSS 或外部库的麻烦。

4. 了解原始 JavaScript 和带有 TypeScript 的 React 之间的主要区别，以及 React 的声明性质和 Tailwind 的实用优先方法如何提高开发速度和代码结构。

5. 建立一个包含 30 个真实项目的作品集，展示您在 JavaScript 和现代 React 生态系统（使用 TypeScript 和 Tailwind CSS）方面的熟练程度。

课程结构：

本课程分为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的基本知识。

本课程适合哪些人：

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