TypeScript for React Developer

Introduction

Why Learn TypeScript as React Developer

  1. Make code more maintainable

    • code is self-documented
    • easier to refactor
    • catch error earlier (in build time compared to run time)
  2. Better job prospect

This Workshop Covers

  1. TypeScript fundamentals
  2. How to slowly migrate your React codebase from JavaScript to TypeScript
  3. Common coding pattern when using TypeScript with React

This Workshop Does Not Cover

  1. React fundamentals (covered in another workshop, Introduction to React v2)
  2. Modern JavaScript (covered in another workshop, JavaScript: The React Parts)

Overview of Code-Along Project

In this workshop we will migrate an existing React project to use TypeScript.

The site is called Shopit, an E-commerce SPA.

Project Setup

Let's setup the project locally before we go further:

  1. Clone the project and checkout redux branch:

    git clone -b redux https://github.com/malcolm-kee/react-ecomm-site.git
  2. Install the dependencies:

    cd react-ecomm-site
    yarn

    If you have not installed yarn, replace the yarn command with npm install.

Libraries used in the project:

Don't worry if you're not familar with those libraries as I will explain them whenever required. But don't get excited that you will know them after this workshop, I will not go deep into them.

The focus of this workshop is using TypeScript in React. The reason I include those libraries into the project is to make it more like a real-life project so that it is easier for you to translate to your work.

Comments
Reply
Malcolm Kee
Malcolm Kee on October 6, 2019, 4:15 PM

Just comment in GitHub issue! 💁‍♂

Issue on this page? Report here