If you don't have Node.js installed, download it from Node.js. You can verify if you have Node and npm installed by running:

node -v
npm -v

Use the following command to create a new React app using TypeScript:

npx create-react-app react-getting-started --template typescript
cd react-getting-started

This sets up a React project with TypeScript.

Navigate to the project directory and start the development server:

npm start

This will open the app in your browser at http://localhost:3000.

The project structure will look similar to a regular React app, with the main difference being the use of .ts and .tsx files instead of .js:

react-getting-started
├── node_modules
├── public
│ ├── index.html
│ └── ...
├── src
│ ├── App.css
│ ├── App.tsx
│ ├── index.tsx
│ └── ...
├── tsconfig.json
├── package.json
└── ...

• tsconfig.json: This file contains the configuration for TypeScript.

• src/index.tsx: The main entry point for your app.

• src/App.tsx: Your main React component in TypeScript.

Open src/App.tsx and modify it to include TypeScript types:

import React from 'react';
interface AppProps {
 message: string;
}
const App: React.FC<AppProps> = ({ message }) => {
 return (
 <div>
 <h1>{message}</h1>
 <p>Welcome to your first React app with TypeScript.</p>
 </div>
 );
};
export default App;

In this example:

• AppProps is an interface that defines the props that the component accepts (message of type string).

• React.FC is the type for functional components.

To use this component, modify src/index.tsx:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(
 <React.StrictMode>
 <App message="Hello, React with TypeScript!" />
 </React.StrictMode>,
 document.getElementById('root')
);

When using TypeScript with React, you'll often work with interfaces or types to define the structure of your components' props, state, and more. For example:

• Props: Define the data that components expect.

• State: Define the internal state of a component.