Organisation et Structure d’un projet React/TypeScript

1. Structure générale d’un projet React/TypeScript

Ce projet créé par create-react-app a une organisation typique :

frontend/
├── public/
├── src/
├── node_modules/
├── package.json
├── package-lock.json
├── tsconfig.json
└── ...

Zoom : Organisation du dossier racine

Ce dossier contient :

public/ : Fichiers statiques (HTML, images).
src/ : Code source React, composants, styles, etc.
node_modules/ : Dépendances npm.
package.json : Dépendances et scripts npm.
tsconfig.json : Configuration TypeScript.

2. Dossier `public/`

Fichiers statiques, accessible directement par le serveur web :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8" />
    <title>Ma Première Application Web</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

Zoom : Fonction du fichier index.html

C’est la page HTML de base contenant <div id="root"> où React monte l’application.

Ce fichier ne sera pas modifié par Webpack, il sert de template d’accueil.

3. Dossier `src/`

Tout le code React, composants, styles, logique métier :

src/components/ : composants réutilisables.
src/pages/ : composants de pages (ex : Home, About).
src/services/ : appels API.
src/types/ : définitions TypeScript.

Zoom : Organisation de src/

Ce zoom vous aide à structurer votre dossier :

components/ : composants réutilisables.
pages/ : composants de pages majeures.
services/ : API et logique métier.
types/ : interfaces et types TypeScript.

4. Fichier `App.tsx`

Composant racine de l’application React :


function App() {
  return (
    <div className="App">
      <h1>Bienvenue dans mon app !</h1>
    </div>
  );
}
export default App;

Zoom : Fonction d’App.tsx

Ce composant organise la structure principale de votre site ou application.

Il peut inclure des routes, des barres de navigation, etc.

5. Fichier `index.tsx`

Point d’entrée de React, il monte le composant App dans le DOM :


import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Zoom : Démarrage de React

Ce fichier initialise React et affiche le composant racine dans <div id="root">.

Il utilise ReactDOM.createRoot et le mode Strict pour le développement.

6. Fichier `package.json`

Contient :

Les dépendances npm (react, react-dom, typescript...)
Les scripts (start, build, test)

Zoom : Gestion des dépendances et scripts

Exemple :


{
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test"
  },
  "dependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "typescript": "^4.9.0"
  }
}

7. Fichier `tsconfig.json`

Configure TypeScript pour le projet :


{
  "compilerOptions": {
    "target": "es2020",
    "jsx": "react-jsx",
    "strict": true
  }
}

Zoom : Configuration TypeScript

Ce fichier définit :

La version JavaScript cible.
La gestion du JSX.
Les vérifications strictes.

Autres éléments

node_modules/ : dépendances, à ne pas versionner.
package-lock.json : verrouille versions pour la reproductibilité.
.env.local : variables d’environnement locales.

Bonnes pratiques

Organiser composants par fonctionnalités.
Noms clairs pour fichiers et composants.
Séparer logique métier et composants UI.
Utiliser variables d’environnement pour URLs, clés sensibles.
Faire des commits réguliers avec des messages explicites.

Conclusion

Ce guide vous aide à comprendre la structure d’un projet React/TypeScript, avec ses composants clés et leur rôle.

Les sections "zoom" approfondissent chaque aspect pour mieux maîtriser leur fonctionnement.