Welcome!

In this series, we will learn TypeScript (TS), a typed variant of JavaScript (JS), and use React and Ant Design to build your first frontend project quickly.

Prerequisites

This course assumes you already know basic HTML, CSS and JavaScript. If you don’t, start with the MDN tutorials first.

What’s in the course

The course currently has two parts: TypeScript Quick Start, and React + Ant Design Quick Start. In the first part, we review the basics of JavaScript and learn the basics of TypeScript. In the second part, we learn the basics of React and Ant Design, and build a simple shopping cart page.

Is this course for me?

The main goal of this course is to help you finish your first project, not to teach every technical detail. It is meant to get you interested, and to show you how to learn a language and how to finish a project. If you are a beginner who isn’t sure what programming is for, or how to start your first project, this course is a great fit. If you are looking for a course that prepares you directly for job interviews, this one probably isn’t. The course was written to help computer science students better understand how software is built, and to introduce concepts such as JSON, HTTP APIs and RESTful APIs. If you already have a solid foundation and have finished your own projects, you may not need it.

What will I learn?

In this course, you will learn:

The basics of TypeScript
The basics of React: components, routing and state
How to use the Ant Design component library
How to fetch data from an HTTP API
Basic concepts such as JSON and RESTful APIs

By the end, you will have built a frontend page that lists products and lets users add them to a cart.

Software

We assume you already have a code editor installed. I recommend VS Code, which was designed with JavaScript-like languages in mind. I have also tried JetBrains WebStorm and IntelliJ IDEA Ultimate, but their JS/TS support may not be as good as VS Code’s, so VS Code is my recommendation.

Corrections

If you find a mistake or have a question while learning, click “Edit page” at the bottom of the page and open a pull request on GitHub to help improve the course.

Author and license

This tutorial was written by Junxuan Bao and is published under CC BY-NC-SA 4.0. You may share and adapt it under the terms of the license, as long as you credit the author with a link and do not use it commercially. With proper attribution, you may:

Share this tutorial with friends and students
Use it in schools for educational purposes
Adapt it to fit your own needs
Print it for offline reading

You may not:

Use this tutorial in a paid course
Publish it commercially
Sell it in any form
Use it without crediting the original author
Change its license in any way

A note before you start

I wrote this as a second-year student. I have not studied TypeScript or the rest of this stack systematically; I learned them out of interest and with practical use in mind. Everything in this series points toward one goal, “build your first project”, so some explanations of how things work under the hood may be inaccurate. When you read about underlying principles, please double-check them with other sources so this tutorial doesn’t mislead you.

Hidden content

I have added some hidden content to this course. When you reach one, stop and think, try to solve it yourself, and only then reveal the answer. You will understand the topic much better that way.

Hidden content looks like this

Click to reveal answer

Let’s get started!

If you’re ready, let’s begin! Click “TypeScript Quick Start” in the sidebar to start learning.