Do you want to build a React application with TypeScript, but don’t know where to start? Today we’ll do it the quick and easy way with create-react-app.
This tool lets you create a React project without worrying about configurations or dependencies, since it’s already done for you. You can simply focus on coding, which is perfect especially if you are a beginner.
Procedure
In order to use create-react-app, you’ll need to install Node and npm:
- Node: https://nodejs.org/
- npm: https://www.npmjs.com/
Let’s also install npx globally:
npm i -g npx
Now you can create a new project with the handy TypeScript template:
npx create-react-app new-app --template typescript
If you want to add TypeScript to an existing React project, type the following command and include all the necessary type packages, then change all .js files to the .tsx file extension:
npm install --save typescript @types/node @types/react @types/react-dom @types/jest
Enter the project directory and start the development server:
cd new-app
npm start
Now the app will automatically open to localhost:3000 in your browser:
…and voila! Now you can start to build your dream React project with TypeScript. 💪
The Computer Chick 