What we are building and prerequisites
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
This lesson preview is part of the Fullstack React with TypeScript Masterclass course and can be unlocked immediately with a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Fullstack React with TypeScript Masterclass with a single-time purchase.
[00:00 - 00:42] In this module we are going to build our first React and TypeScript application . We are going to build Trello clone. As you can see Trello is a Kanban board where you can create new lists, new list, you can add items to it, new card, you can drag the lists and the cards around, and we are going to do something similar but more simple. We also will be able to add new lists, new list, add new cards, and move the lists and the cards around. We will also connect our app to the back end.
[00:43 - 01:12] So even if you refresh the page you will still have all the data preserved. We will bootstrap the file structure using the create react app CLI. If you worked with react before you might be familiar with it. If you haven't heard about it yet, no worries. I will talk about it more in detail further in this tutorial. There are a bunch of requirements before you start working on this chapter. First of all, make sure that you know how to use command line. On Mac you can use the terminal app and it's available by default. All the Linux distributions also have some pre-installed terminal applications.
[01:13 - 02:12] On Windows I recommend using sigwin or commander. And if you are more experienced then you can use Windows subsystem for Linux. You will also need some code editor with the Type Script support. I recommend using this code. It supports TypeScript out of the box. Make sure that you have Node.js installed. It should be version 10 or higher. On Mac and Linux I recommend using NVM or Node version manager to install the Node version that you need. I'm going to show you how to use it in the next lesson. For Windows there is another package called NVM Windows and it basically does the same. You also need to know how to use Node package managers. In this module examples I'm going to be using Yarn. But you can use NPM if you want. And finally you need to have some basic React understanding. Specifically you need to know how to use components, how to create functional components for example, and how to use hooks. In this example we are not going to be using class based components so this knowledge will be enough. If you don't feel confident it might be worth visiting React documentation to refresh your knowledge.