How do I create functional components in React with TypeScript?

How do I create functional components in React with TypeScript?

To create a functional component in React with TypeScript, you can define a function that returns JSX. Here's a simple example:

import React from 'react';

interface Props {
  name: string;
}

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

export default Greeting;

What are the benefits of using TypeScript with React?

Using TypeScript with React provides type safety, better tooling support, and improved code readability, which helps catch errors early.

Can you show me an example of props validation?

Sure! In the example I provided, the Props interface defines the expected structure of the props. TypeScript will enforce that the name prop is a string when using the Greeting component.

How do I handle state in functional components?

You can use the useState hook to manage state in functional components. Here's an example:

import React, { useState } from 'react';

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

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

export default Counter;