Learning how to code, especially with  React, a JavaScript UI library, can be unnecessarily difficult. However, if you enjoy interactive web pages, then you might be able to view learning React as a fun way to design your own interactive site.

With React, you can create elements quickly by writing the guidelines for one customizable component and reusing it throughout the project, only altering some of its details. This is also a great exercise for understanding why you should follow best programming practices to write code in an organized and efficient way.

In this article, you’ll be exploring how to write a custom button component for a basic TypeScript React project. You will be able to reuse the button throughout the site and practice reusing components efficiently.

Tutorial Requirements

• Node version 14.16.0 or above at the time that this article is written.
• npm,  yarn, or another package manager.
• Some prior knowledge in JavaScript and TypeScript, or a willingness to learn.

Start a React app

In React, there are a few different ways to start an application. For the sake of simplicity, use the create-react-app utility to create a project structure that you can build on.

On your command line, run the following lines to create the project folders and change into the my-first-react-app directory.

#code #typescript #react