React and TypeScript together offer a powerful combination for building robust web applications. This post will guide you through creating your first React component with TypeScript, ensuring type safety and enhancing developer productivity.

Setting Up Your Environment

Before diving into component creation, ensure your environment is set up for React and TypeScript:

npx create-react-app my-app --template typescript
cd my-app
npm start

Creating a Typed React Component

Let’s create a simple Greeting component that accepts a name prop:

import React from 'react';

type GreetingProps = {
  name: string;
};

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

export default Greeting;

Understanding Props and State with Types

TypeScript makes managing props and state straightforward. Here’s an example of a component with typed state:

import React, { useState } from 'react';

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

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

export default Counter;

Practical Example: A Todo List Component

Now, let’s apply what we’ve learned to build a Todo List component:

import React, { useState } from 'react';

type Todo = {
  id: number;
  text: string;
};

const TodoList: React.FC = () => {
  const [todos, setTodos] = useState<Todo[]>([]);
  const [input, setInput] = useState('');

  const addTodo = () => {
    setTodos([...todos, { id: todos.length, text: input }]);
    setInput('');
  };

  return (
    <div>
      <input value={input} onChange={e => setInput(e.target.value)} />
      <button onClick={addTodo}>Add Todo</button>
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>{todo.text}</li>
        ))}
      </ul>
    </div>
  );
};

export default TodoList;

You’ve now stepped into the world of typed React components with TypeScript. By integrating TypeScript into your React projects, you’ll enjoy a more structured development process, easier debugging, and improved code quality. Keep experimenting with different component structures and TypeScript features to deepen your understanding.