跳转到内容

欢迎!

在这个系列课程中,我们将学习如何使用 JavaScript(JS)的变体 TypeScript(TS),并基于 React 与 Ant Design 快速完成你的第一个前端项目。

本课程默认你具备基础的HTML、CSS和JavaScript知识,如果你还不了解,可以先学习一下 MDN 的教程。

本课程目前分为两个部分:TypeScript 快速上手,以及 React + Ant Design 前端快速上手。在第一部分中,我们将复习 JavaScript 的基础知识,并学习 TypeScript 的基础知识。在第二部分中,我们将学习 React 与 Ant Design 的基础知识,并完成一个简单的购物车页面。

本课程的核心目标是教会你完成第一个项目,而不是深入教授你技术细节。课程的核心是激发你的兴趣并且告诉你如何学习一门语言、如何完成一个项目。因此如果你是一个初学者,目前不知道编程的意义在哪里,也不知道如何开始自己的第一个项目,那么这个课程非常适合你。但是如果你正在寻找一个可以直接帮助你完成入职面试的课程,那么这个课程可能不适合你。
这门课程的初衷是帮助计算机学生更好的理解软件开发的流程,并且了解一些类似于 JSON、HTTP API、RESTful API 等概念。如果你已经有了许多基础并且完成过自己的项目。那么这门课程对你来说可能是多余的。

在这门课程中,你将会学到:

  • TypeScript 的基础知识
  • React 的基础知识:组件、路由、状态管理
  • Ant Design 组件库的使用
  • 如何通过 HTTP API 获取数据
  • JSON、RESTful API 等基础概念

最终,你将完成一个可以展示商品、加入购物车的前端页面。

我们默认你已经安装了一个编辑器,这里推荐VSCode,VSCode的设计初衷就是为类JS语言设计的。我也尝试过JetBrains的WebStorm或高级版IntelliJ IDEA,这两个编辑器在对于JS/TS的支持可能不如VSCode,因此在此推荐VSCode。

如果你在学习过程中发现了错误,或者有任何问题,欢迎点击页面右下角的“编辑此页”按钮,通过GitHub的PR提交修改,帮助我们改进课程。

本教程作者为 Junxuan Bao。本教程采用 CC BY-NC-SA 4.0 协议发布,你可以在遵守协议的前提下自由分享、修改本教程,但是必须注明作者和链接,且不得用于商业用途。
你可以在进行合理署名的前提下:

  • 把本教程分享给朋友、学生
  • 基于教育目的在学校使用
  • 修改本教程以适应自己的需求
  • 印刷本教程以便离线阅读

你不可以:

  • 在收费的课程中使用本教程
  • 商业出版本教程
  • 以任何形式出售本教程
  • 在任何情况下不署名原作者
  • 以任何形式修改本教程的版权协议

事先说明,作者目前只是大二学生并且没有系统性地学习过 TypeScript 或其他技术栈,只是单纯的凭借爱好和以运用为最终目的学习过相关知识。这个系列教程的所有最终导向都是“制作你的第一个项目”,因此在底层原理上可能有错误,请在阅读有关底层原理和逻辑的部分时进行额外的检索以避免这个教程给你带来误导内容。

在这门课程中,我设计了一些隐藏内容。在遇到这些内容时,我希望你能够停下来,思考一下,自己尝试完成这部分内容,然后再查看答案。这样你会更好地理解这个知识点。

你会看到这样的隐藏内容
点击查看答案

如果你已经准备好了,那就让我们开始吧!点击左侧的“语言基础”开始你的学习之旅!