Fullstack React with TypeScript (Revision 1p) (Nate Murray) (Z-Library)

📄 File Format: PDF

💾 File Size: 13.4 MB

📖 Read Online ⬇️ Download

Registered users can read the full content for free

Register as a Gaohf Library member to read the complete e-book online for free and enjoy a better reading experience.

📄 Page 1

(This page has no text content)

📄 Page 2

Fullstack React with TypeScript Learn Pro Patterns for Hooks, Testing, Redux, SSR, and GraphQL Written by Maksim Ivanov and Alex Bespoyasov Edited by Nate Murray © 2020 Fullstack.io All rights reserved. No portion of the book manuscript may be reproduced, stored in a retrieval system, or transmitted in any form or by any means beyond the number of purchased copies, except for a single backup or archival copy. The code may be used freely in your projects, commercial or otherwise. The authors and publisher have taken care in preparation of this book, but make no expressed or implied warranty of any kind and assume no responsibility for errors or omissions. No liability is assumed for incidental or consequential damagers in connection with or arising out of the use of the information or programs container herein. Published by \newline

📄 Page 3

Contents Book Revision . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 EARLY DRAFT VERSION . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 Join Our Discord Channel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 Bug Reports . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 Be notified of updates via Twitter . . . . . . . . . . . . . . . . . . . . . . . . . 1 We’d love to hear from you! . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 How To Get The Most Out Of This Book . . . . . . . . . . . . . . . . . . . . 2 What is Typescript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 Why Use Typescript With React . . . . . . . . . . . . . . . . . . . . . . . . . . 9 A Necessary Word Of Caution . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 Your First React and Typescript Application: Building Trello with Drag and Drop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 Prerequisites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 What Are We Building . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 Preview The Final Result . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 How to Bootstrap React + Typescript App Automatically? . . . . . . . . . . 17 App Layout. React + Typescript Basics . . . . . . . . . . . . . . . . . . . . . . 28 Render Children Inside The Columns . . . . . . . . . . . . . . . . . . . . . . 41 Create The Card Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42 Render Everything Together . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 Component For Adding New Items. State, Hooks, and Events . . . . . . . . 44 Add Global State And Business Logic . . . . . . . . . . . . . . . . . . . . . . 56 Using useReducer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56 Implement State Management . . . . . . . . . . . . . . . . . . . . . . . . . . . 61

📄 Page 4

CONTENTS Adding Items. Typescript Interfaces Vs Types . . . . . . . . . . . . . . . . . . 68 Moving Items . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75 Implement Custom Dragging Preview . . . . . . . . . . . . . . . . . . . . . . 86 Move The Dragged Item Preview . . . . . . . . . . . . . . . . . . . . . . . . . 87 Hide The Default Drag Preview . . . . . . . . . . . . . . . . . . . . . . . . . . 90 Make The Custom Preview Visible . . . . . . . . . . . . . . . . . . . . . . . . 91 Tilt The Custom Preview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93 Drag Cards . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95 Update The Reducer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96 Implement The useDrop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97 Drag a Card To an Empty Column . . . . . . . . . . . . . . . . . . . . . . . . 99 Saving State On Backend. How To Make Network Requests . . . . . . . . . 100 Loading The Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109 How to Test Your Applications: Testing a Digital Goods Store . . . . . . . . 115 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115 Initial Setup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120 Writing Tests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127 Home Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148 Testing React Hooks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181 Congratulations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192 Patterns in React Typescript Applications: Making Music with React . . . 193 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193 What We’re Going to Build . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193 First Steps and Basic Application Layout . . . . . . . . . . . . . . . . . . . . 195 A Bit of a Music Theory . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200 Third Party API and Browser API . . . . . . . . . . . . . . . . . . . . . . . . . 208 Patterns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211 Creating a Keyboard . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212 Playing a Sound . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220 Mapping Real Keys to Virtual . . . . . . . . . . . . . . . . . . . . . . . . . . . 228 Instruments List . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231 Render-Props . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236 Higher Order Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261

📄 Page 5

CONTENTS Next.js and Static Site Generation: Building a Medium-like Blog . . . . . . 262 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262 What we’re going to build . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262 Pre-rendering . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265 Next.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266 Setting up a project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266 First page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268 Basic application layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269 Center component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272 Footer component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273 Custom _app . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273 Application theme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275 Custom _document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277 Site front page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281 Page 404 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286 Post page template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 288 “Backend API” server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289 Frontend API client . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292 Updating main page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293 Pre-render post page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 300 Category page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 305 Adding Breadcrumbs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309 Building a project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311 Using Redux and TypeScript - (COMING SOON) . . . . . . . . . . . . . . . . 312 GraphQL, React, and TypeScript (COMING SOON) . . . . . . . . . . . . . . . 313 Appendix . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314 Changelog . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315 Revision 1p (05-20-2020) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315

📄 Page 6

CONTENTS 1 Book Revision Revision 1p - 2020-05-19 EARLY DRAFT VERSION This version of the book is an early draft. Our expectation is that the code works, but some of the manuscript has not been through final edits. If you’d like to report any bugs or typos, join our Discord or email us below. Join Our Discord Channel If you’d like to get help, help others, and hang out with other readers of this book, come join our Discord channel: https://newline.co/discord/¹ Bug Reports If you’d like to report any bugs, typos, or suggestions just email us at:us@fullstack.io. Be notified of updates via Twitter If you’d like to be notified of updates to the book on Twitter, follow us at @full- stackio². We’d love to hear from you! Did you like the book? Did you find it helpful? We’d love to add your face to our list of testimonials on the website! Email us at: us@fullstack.io³. ¹https://newline.co/discord/ ²https://twitter.com/fullstackio ³mailto:us@fullstack.io

📄 Page 7

Introduction Welcome to Fullstack React with TypeScript! React and TypeScript are a powerful combination that can prevent bugs and help you (and your team) ship products faster. But understanding idiomatic React patterns and getting the typings setup isn’t always straightforward. This practical, hands-on book is a guide that will have you (and your team) writing React apps with TypeScript (and hooks) in no time. This book consists of several sections. Each section covers one practical case of using Typescript with React. Your First React and Typescript Application: Building Trello with Drag and Drop: There you will learn how to bootstrap a React Typescript application and all the basics of using React with Typescript. We will build a kanban board application like Trello that will store it’s state on backend. Testing React With TypeScript: Testing a Digital-Goods Store:. In this section you will set up your testing environment and learn how to test your application. We will take an online store application and cover it with tests. Patterns in React Typescript Applications: Making Music with React: Making Music with React. Here we cover Higher Order Components (HOCs) and render props React patterns. We show when are they useful and how to use them with Typescript. In this section we will build a virtual piano that supports different sound sets. Next.js and Static Site Generation: Building a Medium-like Blog Building Medium with SSG. React can be rendered server-side. It allows to create multi-page interactive websites. In this section we cover the basics of server-side generation with React and then we build an advanced application using NextJS framework. The example application will be blogging platform (like Medium). State Management With Redux and Typescript. (coming soon – Summer 2020) Some React applications are so complex that they require using some external state

📄 Page 8

Introduction 2 management library. Redux is a solid choice in this case. It is worth learning how to use it with Typescript. In this section we will build a drawing application with undo/redo support. It will also let you save your drawings on backend. VI GraphQLWith React And Typescript. (coming soon – Summer 2020) GraphQL is a query language that allows to create flexible APIs. Facebook, Github, Twitter and a lot of other companies provide GraphQL APIs. Typescript works pretty well with GraphQL. In this section we will build a Github issue viewer. We recommend you to read the book in linear order, from start to finish. The sections are arranged from basic topics to more complex. Most sections assume that you are familiar with topics explained in previous sections. How To Get The Most Out Of This Book Prerequisites In this book we assumed that you have at least the following skills: • basic Javascript knowledge (working with functions, objects, and arrays) • basic React understanding (at least general idea of component based approach) • some command line skill (you know how to run a command in terminal) Here we mostly focus on specifics of using Typescript with React and some other popular technologies. The instructions we give in this book are very detailed, so if you lack some of the listed skills - you can still follow along with the tutorials and be just fine. Running Code Examples Each section has an example app shipped with it. You can download code examples from the same place where you purchased this book. If you have any trouble finding or downloading the code examples, email us at us@fullstack.io⁴. ⁴mailto:us@fullstack.io

📄 Page 9

Introduction 3 In the beginning of each section you will find instructions of how to run the example app. In order to run the examples you need a terminal app and NodeJS installed on your machine. Make sure you have NodeJS installed. Run node -v, it should output your current NodeJS version: $ node -v v10.19.0 Here are instructions for installing NodeJS on different systems: Windows To work with examples in this book we recommend installing Cmder⁵ as a terminal application. We recommend installing node using nvm-windows⁶. Follow the installation instruc- tions on the Github page. Then run nvm to get the latest LTS version of NodeJS: nvm install --lts It will install the latest available LTS version. Mac Mac OS has a Terminal app installed by default. To launch it toggle Spotlight, search for terminal and press Enter. Run the following command to install nvm⁷: ⁵https://cmder.net/ ⁶https://github.com/coreybutler/nvm-windows ⁷https://github.com/nvm-sh/nvm

📄 Page 10

Introduction 4 curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/inst\ all.sh | bash Then run nvm to get the latest LTS version of NodeJS: nvm install --lts This command will also set the latest LTS version as default, so you should be all set. If you face any issues follow the troubleshooting guide for Mac OS⁸. Linux Most Linux distributions come with some terminal app provided by default. If you use Linux - you probably know how to launch terminal app. Run the following command to install nvm⁹: curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/inst\ all.sh | bash Then run nvm to get the latest LTS version of NodeJS: nvm install --lts In case of problems with installation follow the troubleshooting guide for Linux¹⁰. Code Blocks And Context Code Block Numbering In this book, we build example applications in steps. Every time we achieve a runnable state - we put it in a separate step folder. ⁸https://github.com/nvm-sh/nvm#troubleshooting-on-macos ⁹https://github.com/nvm-sh/nvm ¹⁰https://github.com/nvm-sh/nvm#troubleshooting-on-linux

📄 Page 11

Introduction 5 1 01-first-app/ 2 ├── step1 3 ├── step2 4 ├── step3 5 ... // other steps If at some point in the chapter we achieve the state that we can run - we will tell you how to run the version of the app from the particular step. Some files in that folders can have numbered suffixes with *.example word in the end: 1 src/AddNewItem0.tsx.example If you see this - it means that we are building up to something bigger. You can jump to the file with same name but without suffix to see a completed version of it. Here the completed file would be src/AddNewItem.tsx. Reporting Issues We did our best to make sure that our instructions are correct and code samples don’t contain errors. There is still a chance that you will encounter problems. If you find a place where a concept isn’t clear or you find an inaccuracy in our explanations or a bug in our code, email us¹¹! We want to make sure that our book is precise and clear. Getting Help If you have any problems working through the code examples in this book, email us¹². To make it easier for us to help you include the following information: ¹¹mailto:fullstack-react-typescript@newline.co ¹²mailto:fullstack-react-typescript@newline.co

📄 Page 12

Introduction 6 • What revision of the book are you referring to? • What operating system are you on? (e.g. Mac OS X 10.13.2, Windows 95) • Which chapter and which example project are you on? • What were you trying to accomplish? • What have you tried already? • What output did you expect? • What actually happened? (Including relevant log output.) Ideally also provide a link to a git repository where we can reproduce an issue you are having. What is Typescript TypeScript is a typed superset of JavaScript that compiles to plain JavaScript - typescriptlang.org¹³. Typescript allows you to specify types for values in your code, so you can develop applications with more confidence. Using Types In Your Code Consider this Javascript example. Here we have a function that verifies that password has at least eight characters: function validatePasswordLength(password) { return password.length >= 8; } When you pass it a string that has at least eight characters it will return true. validatePasswordLength("123456789") // Returns true Someone might accidentally pass a numeric value to this function: ¹³https://typescriptlang.org

📄 Page 13

Introduction 7 validatePasswordLength(123456789) // Returns false In this case the function will return false. Even though the function was designed to only work with strings you won’t get an error saying that you misused the function. It can cause nasty run-time bugs that might be hard to catch. With typescript we can restrict the values that we pass to our function to only be strings: function validatePasswordLength(password: string) { return password.length >= 8; } validatePasswordLength(123456789) // Argument of type '123456789' is no\ t assignable to parameter of type 'string'. Now if we try to call our function with the wrong type - Typescript typechecker will give us an error. Typescript typechecker can tell if we have an error in our code just by analysing the syntax. That means that you won’t have to run your program. Most code editors support Typescript so the error will be immediately highlighted when you will try to call the function with the wrong value type. Strings and numbers are examples of built-in types in Typescript. Typescript supports all the types available in Javascript and adds some more. We will get familiar with a lot of them during next chapters. But the coolest thing is that you can define your own types. Defining Custom Types Let’s say we have a greet function that works with user objects. It generates a greeting message using provided first and last name.

📄 Page 14

Introduction 8 function greet(user){ return `Hello ${user.firstName} ${user.lastName}`; } How can we make sure that this function recieves the input of correct type? We can define our own type User and specify it as a type of our function user argument: type User = { firstName: string; lastName: string; } function greet(user: User){ return `Hello ${user.firstName} ${user.lastName}`; } Now our function will only accept objects that match the defined User type. greet({firstName: "Maksim", lastName: "Ivanov"}) // Returns "Hello Maks\ im Ivanov!" If we’ll try to pass something else - we’ll get an error. greet({}) // Argument of type '{}' is not assignable to parameter of ty\ pe 'User'. // Type '{}' is missing the following properties from type 'U\ ser': firstName, lastName Benefits Of Using Typescript Preventing errors. As you can see with Typescript we can define the interfaces for the parts of our program, so we can be sure that they interact correctly. It means they

📄 Page 15

Introduction 9 will have clear contracts of communicating with each other which will significantly reduce the amount of bugs. Typescript contracts by which parts of your programm communicate. If on top of that we cover our code with unit tests - BOOM, our application becomes rock-solid. Now we can add new features with confidence, without fear of breaking it. There is a research paper¹⁴ showing that just by using typed language you will get 15% less bugs in your code. There is also an interesting paper about unit tests¹⁵ stating that products where TDD was applied had bettween 40% and 90% decrease in pre-relese bug density. Better Developer Experience. When you use Typescript you also get better code suggestions in your editor, which makes it easier to work with large and unfamiliar codebases. Why Use Typescript With React Revolutionary thing about React is that it allows you to describe your application as a tree of components. ¹⁴http://ttendency.cs.ucl.ac.uk/projects/type_study/documents/type_study.pdf ¹⁵http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.210.4502&rep=rep1&type=pdf

📄 Page 16

Introduction 10 Component can represent an element, like a button or an input. It can be a group of elements representing a login form. Or it can be a complete page that consists of multipler simpler components. Components can pass the information down the tree, from parent to child. You can also pass down functions functions as callbacks. So if something happens in child component it can notify it’s parent by calling the passed callback function. This is where Typescript becomes very handy. You can use it to define interfaces of your components, so that you can be sure that your component gets only correct inputs. If you worked with React before you probably know that you can specify compo- nent’s interface using prop-types. import PropTypes from 'prop-types'; const Greeting = ({name}) => { return ( <h1>Hello, {name}</h1> ); } Greeting.propTypes = { name: PropTypes.string }; If you could do with prop-types - why would you need Typescript? For several reasons: • You don’t need to run your application to know if you have type errors. Typescript can be run by your code editor so you can see the errors just as you make them. • You can only use prop-types with components. In your application you will probably have functions and classes that are not using React. It is important to be able to provide types for them as well.

📄 Page 17

Introduction 11 • Typescript is just more powerfull. It gives you more options to define the types and then it allows you to use this type information in many different ways. We will demonstrate you examples of it in the next chapters. A Necessary Word Of Caution Typescript does not catch run-time type errors. It means that you can write the code that will pass the type check, but you will get an error upon execution. function messUpTheArray(arr: Array<string | number>): void { arr.push(3); } const strings: Array<string> = ['foo', 'bar']; messUpTheArray(strings); const s: string = strings[2]; console.log(s.toLowerCase()) // Uncaught TypeError: s.toLowerCase is no\ t a function Try to launch this code example in Typescript sandbox¹⁶. You will get Uncaught TypeError: s.toLowerCase is not a function error. Here we said that our messUpTheArray accepts an array containing elements of type string or number. Then we passed to it our strings array that is defined as an array of string elements. Typescript allows this because it thinks that types Array<string | number> and Array<string> match. Usually it is convenient because a an array that is defined as having number or string elements can actually have only strings. ¹⁶https://www.typescriptlang.org/play/index.html?ssl=9&ssc=29&pln=1&pc=1#code/ GYVwdgxgLglg9mABAWwKYGd0FUAOAVAC1QEEAnUgQwE8AKC8gLkTMqoB50pSYwBzRAD6IwIZACNUpAHwBKJgDc4MACaIA3gFgAUIl2J6pAHQ4Q6AjQDMMgNzaAvtu0QEnRJ2590TFtQ5cevFKIALyIANoA5MBwcBEANIgRYvQRALq2WmiYuIQk5NQ07gHoNo5azmCuXm7+ fCE1HrzoYQBM6U4ucAA2qIZdcLyFhlBwADJwAO6SAMIU6Kg0MjLaQA

📄 Page 18

Introduction 12 const stringsAndNumbers: Array<string | number> = ['foo', 'bar']; In our case it allowed a bug to slip through the type checking. It also means that you have to be extra careful with the data obtained through network requests or loaded from the file system. During this book we demonstrate the techniques that allow to minimize the risk of such issues.

📄 Page 19

Your First React and Typescript Application: Building Trello with Drag and Drop Introduction In this part of the book, we will create our first React + TypeScript application. We will bootstrap the file structure using the create-react-app CLI. If you’ve 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 in more detail further in this chapter. I will show you the file structure it generates and then I’ll tell you what is the purpose of each file there. Then we’ll create our components. You’ll see how to use Typescript to specify the props. We’ll talk about using Javascript libraries in your Typescript project. Some of them are compatible by default, and some require you to install special @types packages. By the end of this chapter, we will have the application layout. In the next chapter, we’ll add the drag-and-drop and the business logic to it. Prerequisites There are a bunch of requirements before you start working with this chapter. First of all, you need to know how to use the command line. On Mac, you can use Terminal.app, it’s available by default. All Linux distributions also have some

📄 Page 20

Your First React and Typescript Application: Building Trello with Drag and Drop 14 preinstalled terminal applications. On Windows I recommend using Cygwin¹⁷ or Cmder¹⁸. If you are more experienced - you can useWindows Subsystem for Linux¹⁹. You will need a code editor with Typescript support. I recommend using VSCode, it supports Typescript out of the box. Make sure you have Node 10.16.0 or later. You can use nvm²⁰ on Mac or Linux to switch Node versions. For Windows there is nvm-windows²¹. You also need to know how to use node package managers. In this chapter examples, I will use Yarn²². You can use npm²³ if you want. All the examples for this chapter contain yarn.lock files, remove them if you want to use npm to install dependencies. You need to have some React understanding. Specifically, you have to know how to use functional components and React hooks. In this example, we won’t use class- based components. If you don’t feel confident it might be worth visiting React Documentation²⁴ to refresh your knowledge. What Are We Building We will create a simplified version of a kanban board. A popular example of such an application is Trello. ¹⁷https://www.cygwin.com/ ¹⁸https://cmder.net/ ¹⁹https://docs.microsoft.com/en-us/windows/wsl/install-win10 ²⁰https://github.com/creationix/nvm#installation ²¹https://github.com/coreybutler/nvm-windows#node-version-manager-nvm-for-windows ²²https://yarnpkg.com/ ²³https://www.npmjs.com/ ²⁴https://reactjs.org/docs/getting-started.html