Getting Started With React and TypeScript

When you first starting with React, you just skim through the official documentation and copy/paste code examples in some online tools like codesandbox.io. However, this post will encourage you to create your own project and focus on learning by doing. The benefit of taking this path is to get hands-on experience with the React concepts, maintain muscle memory, and get the feel of how the real React application is actually working. There are a number of ways to bootstrap your application, and while React can work with a server-side rendering approach, we will focus on creating a single page application using a create-react-app library, the most popular and recommended way of starting a new project with React, open-sourced by the Facebook team.

Prerequisites

Node ≥ 8.10 (we will use current latest version 14.4.0)
Yarn ≥ 0.25 (we will use current latest version 1.22)

Installation

There are a couple of ways you can create new React application, using npx, npm or yarn. There is no hard rule which one to pick from, it’s just a matter of personal preference. For the purpose of this exercise, we will be using yarn.

yarn create react-app learning-react

This command will create a new repository with all the necessary tools to get you up to speed. The only thing you need to do is to start the application.

cd learning-react
yarn start

Running start the script will spawn a small server on your host machine and open a new browser window.

What about TypeScript?

create-react-app comes with pre-configured Webpack and Babel so you don’t have to worry about managing them on your own. If you want to bootstrap an application with TypeScript support, you can leverage create-react-app template to do so.

yarn create react-app learning-react --template typescript

Now if we edit src/App.tsx file, changes will be automatically reflected in the browser, how cool is that? 😎

You will be surprised that this was all you had to do to get going with your own React application. Congratulations! 👏🏻

Recap

Folks from Facebook made our life easier than never before by creating a tool that can be used in production as well. create-react-app allows you to quickly get your development environment up and running without the need for complex Webpack and Babel configuration. TypeScript support is exposed through templates, making the installation and configuration process a breeze. The library has a pre-configured bundler for all your static files and set up auto-reloading, making your developer experience even better. You just edit the file and the library will do the heavy lifting, shifting your focus to what really matters, code. 🤗

Check out our other tech blog posts!