Getting Started with React and TypeScript

TypeScript is a powerful addition to React development that brings static typing and enhanced developer experience. In this guide, we'll explore how to set up a new React project with TypeScript and follow best practices.

Setting Up Your Project

First, create a new React project with TypeScript using Vite:

npm create vite@latest my-react-ts-app -- --template react-ts

Key Benefits

1. Static Type Checking
2. Better IDE Support
3. Enhanced Developer Experience
4. Fewer Runtime Errors

Basic TypeScript with React

Here's a simple example of a typed React component:

interface ButtonProps {
  text: string;
  onClick: () => void;
  variant?: 'primary' | 'secondary';
}

const Button: React.FC<ButtonProps> = ({ text, onClick, variant = 'primary' }) => {
  return (
    <button
      onClick={onClick}
      className={`btn ${variant === 'primary' ? 'btn-primary' : 'btn-secondary'}`}
    >
      {text}
    </button>
  );
};

Type Safety with Hooks

TypeScript makes React hooks even more powerful:

interface User {
  id: number;
  name: string;
  email: string;
}

const [user, setUser] = useState<User | null>(null);