Introduction to TypeScript and React

TypeScript and React are a powerful combination for building scalable and maintainable user interfaces. In this tutorial, we'll cover the basics of using TypeScript with React.

Setting Up a New React Project

First, create a new React project using create-react-app:

npx create-react-app my-app --template typescript

Defining React Components

Here's an example of how to define a React component using TypeScript:

import * as React from 'react';

interface Props {
    name: string;
}

const Hello: React.FC<Props> = ({ name }) => {
    return <div>Hello, {name}!</div>;
};

Using React Hooks

You can use React hooks with TypeScript to manage state and side effects in your components:

import * as React from 'react';

const Counter: React.FC = () => {
    const [count, setCount] = React.useState(0);

return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>Increment</button>
        </div>
    );
};