Make code more maintainable
- code is self-documented
- easier to refactor
- catch error earlier (in build time compared to run time)
Better job prospect
- TypeScript fundamentals
- Common coding pattern when using TypeScript with React
- React fundamentals (covered in another workshop, Introduction to React v2)
In this workshop we will migrate an existing React project to use TypeScript.
The site is called Shopit, an E-commerce SPA.
- Live version
- Code repository
- Branch that we will start with
- Branch we will aims to target (use this as reference when you're stuck)
Let's setup the project locally before we go further:
Clone the project and checkout
reduxbranch:git clone -b redux https://github.com/malcolm-kee/react-ecomm-site.git
Install the dependencies:cd react-ecomm-siteyarn
If you have not installed
yarn, replace the
Libraries used in the project:
- Create React App for build pipleline.
@reach/routerfor client-side routing.
reduxfor state management.
react-styleguidistfor component development environment.
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.