Premiers pas avec React et TypeScript

React est l'une des librairies JavaScript les plus populaires. Mais débuter dedans peut être déroutant si on ne sait pas par où commencer.

Après 8+ ans à écrire du code en production, j'ai vu des équipes réussir rapidement et d'autres tourner en rond pendant des mois. La différence, ce n'est pas la syntaxe : c'est les bonnes pratiques qu'on adopte dès le départ.

Comprendre les composants

Un composant React n'est qu'une fonction JavaScript qui retourne du JSX.

// Bon — simple et clair
function Greeting({ name }) {
  return <h1>Bonjour, {name} !</h1>
}

// Pas bon — trop de logique
function Greeting({ name }) {
  const message = `Bonjour, ${name}!`
  const greeting = message.charAt(0).toUpperCase() + message.slice(1)
  return <h1>{greeting}</h1>
}

Le code simple est du code qui reste simple quand on le relit en production — une semaine, un mois, un an plus tard.

L'état et ses pièges

L'état (useState) est où beaucoup de débutants font leurs premières erreurs.

// Bon — une source de vérité
function Counter() {
  const [count, setCount] = useState(0)
  
  return (
    <div>
      <p>Compteur: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  )
}

// Mauvais — état qui sort de sync
function Counter() {
  const [count, setCount] = useState(0)
  const [doubled, setDoubled] = useState(0) // ⚠️ source de vérité dupliquée
  
  const handleClick = () => {
    setCount(count + 1)
    setDoubled((count + 1) * 2) // C'est facile de se tromper
  }
}

Si tu peux calculer une valeur depuis l'état, ne la mets pas dans l'état. Calcule-la à la render.

TypeScript : dès le début

Si tu apprends React maintenant, apprends-le avec TypeScript dès le départ. C'est moins pénible que de migrer un projet React-JS après coup.

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

interface UserCardProps {
  user: User
  onSelect: (userId: number) => void
}

function UserCard({ user, onSelect }: UserCardProps) {
  return (
    <div onClick={() => onSelect(user.id)}>
      <h3>{user.name}</h3>
      <p>{user.email}</p>
    </div>
  )
}

TypeScript t'empêche de passer un prop oublié. C'est comme un filet de sécurité.

Conclusion

React n'est pas compliqué. Ce qui rend un projet React compliqué, ce sont les décisions qu'on prend au début.

Commence par les bases : composants simples, état minimal, types explicites. Le reste viendra naturellement.