To create a React app with TypeScript support, you can use a tool like Create React App or Vite. We will use the Create React App to create a React App with TypeScript. Create React App is a tool built by the React team that allows you to quickly set up a new React project without needing to configure build tools like Webpack or Babel manually.
Here is a step-by-step guide:
Prerequisites
- Node.js
First, make sure you have Node.js installed on your computer. You can download and install it from the official Node.js website: https://nodejs.org/
1. Install the Create React App tool
To install Create React App globally, run the following command:
npm install -g create-react-app
To install Create React App locally, go to the directory where you want to install the Create React App tool and run the following command:
npm install create-react-app
The following file structure has been created:
node_modules
package.json
package-lock.json
2. Create an application
After installing Create React App, go to the directory where you want to create your React app using the terminal or command prompt.
To start a new Create React App project with TypeScript, you can run:
npx create-react-app <app_name> --template typescript
Replace
with the name you want to give to your React app.<app_name>
Example
npx create-react-app my-first-app --template typescript
Now you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
3. Start the development server
Once the project has been generated, go to the project directory using the terminal:
cd <app_name>
Start the development server by running:
npm start
This command will start the development server and open your default web browser to display the new React app.
Terminal output:
Compiled successfully!
You can now view my-first-app in the browser.
Local: http://localhost:3000
On Your Network: http://10.0.2.15:3000
Note that the development build is not optimized.
To create a production build, use npm run build.
webpack compiled successfully
No issues found.
4. Upgrade the Create React App tool
When a new version of the Create React App is released, you can upgrade it using the following command:
npm install react-scripts@latest