How to setup a React Project in TypeScript

Question

I am trying to configure React to default to .tsx instead of .jsx for project files.

If possible, everytime npx create-react-app is run, the project would be setup using .tsx files.

Is there anyway to do this in the React project configurator, or must this be done independently for each individual React project created?

I looked into the React docs, however, the closest thing I found simply provides an explanation of how to configure a single React Project with TypeScript, not how to default React Project's to TypeScript.

Ethan · Accepted Answer · 2024-08-27 23:09:11Z

3

Using `create-react-app`

CRA has a template for typeScript. To use typeScript run the following command:

npx create-react-app@latest --template typescript

This will create 3 files:

src
|___ index.tsx
|___ App.tsx
tsconfig.json

All these files carry the same meaning as their javaScript counter part just with typeScript!

IMPORTANT: create-react-app is no longer listed as a recommended option in the React docs.

Using `create-vite` a better alternative

Vite is a faster, drop in replacement for CRA. To create a Vite app simply run:

npm create vite@latest -- --template react-swc-ts

This will create a similar setup but without some of the drawbacks of CRA.

For a full comparison see create-react-app vs Vite

answered Aug 27, 2024 at 23:09

Ethan

1,8682 gold badges15 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to setup a React Project in TypeScript

1 Answer 1

Using `create-react-app`

Using `create-vite` a better alternative

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Using create-react-app

Using create-vite a better alternative

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

Using `create-react-app`

Using `create-vite` a better alternative