# Créer un projet React moderne (Vite + TypeScript + Tailwind) : architecture scalable et templates réutilisables

## Pourquoi standardiser son setup React dès le départ ?

Si tu développes plusieurs projets React (clients, SaaS, side projects), tu sais qu’une mauvaise structure dès le début coûte cher :

- Refactor constant
- Composants dupliqués
- CSS incontrôlable
- Dette technique

Avec le temps, j’ai optimisé mon workflow pour toujours démarrer avec un **setup React moderne performant et scalable**.

Objectif :
Créer un projet React avec :
- ⚡ Vite (performance)
- 🧠 TypeScript strict (robustesse)
- 🎨 Tailwind CSS (rapidité UI)
- 🧩 Architecture modulaire
- 🚀 Optimisation production

---

## TL;DR – Setup React moderne recommandé

Pour créer un projet React professionnel en 2026 :

1. Vite + React TypeScript
2. Tailwind CSS bien configuré
3. Architecture feature-based
4. Composants UI isolés
5. Lazy loading
6. Build optimisé
7. Déploiement Vercel

---

# Étape 1 – Créer un projet React avec Vite et TypeScript

```bash
npm create vite@latest mon-projet-react -- --template react-ts
cd mon-projet-react
npm install
```

### Pourquoi Vite est devenu le standard ?

Comparaison rapide :

| Outil | Dev Server | Build | Modernité |
|-------|------------|--------|-----------|
| CRA | Lent | Correct | Dépassé |
| Vite | Instantané | Ultra rapide | Moderne |

👉 Si tu cherches à créer un projet React optimisé performance, Vite est clairement le meilleur choix aujourd’hui.

---

# Étape 2 – Configurer Tailwind CSS proprement

```bash
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```

Configuration :

```javascript
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

## Erreur critique fréquente

Si le champ `content` est mal configuré :
- Styles supprimés en production
- UI cassée
- Debug inutile

Toujours vérifier le pattern des fichiers.

---

# Étape 3 – Architecture React scalable (niveau pro)

Une bonne architecture React évite 80% des problèmes futurs.

Structure recommandée :

```
src/
├── components/
│   ├── ui/
│   ├── layout/
│   └── templates/
├── features/
├── pages/
├── hooks/
├── utils/
└── types/
```

### Pourquoi cette architecture fonctionne ?

- UI découplée
- Logique isolée
- Réutilisabilité maximale
- Scalabilité naturelle

C’est ce que j’utilise sur mes projets clients.

---

# Étape 4 – Mettre en place un système de templates réutilisables

Le principe :
Créer une base commune extensible.

Exemple de BaseTemplate :

```tsx
interface TemplateProps {
  title: string;
  description: string;
  gradient: string;
  icon: string;
  children: React.ReactNode;
}
```

Avantages :
- DRY
- Maintenance simplifiée
- Expérience cohérente

---

# Étape 5 – Optimisation des performances

## Lazy loading des templates

```tsx
const BlogTemplate = React.lazy(() => import("./templates/BlogTemplate"));
```

## Pourquoi c’est important ?

- Réduction du bundle initial
- Meilleur score Lighthouse
- Amélioration Core Web Vitals

---

# Étape 6 – Build et déploiement production

```bash
npm run build
```

Déploiement :

```bash
vercel --prod
```

Pourquoi Vercel ?
- CI/CD intégré
- CDN global
- HTTPS automatique
- Optimisation automatique

---

# Bonnes pratiques avancées

## TypeScript strict

Toujours activer :

```json
{
  "compilerOptions": {
    "strict": true
  }
}
```

## ESLint + Prettier

Maintient cohérence codebase.

## Tests unitaires (Vitest)

Réduit dette technique long terme.

---

# Erreurs fréquentes à éviter

- Architecture trop plate
- Mélange logique / UI
- Pas de lazy loading
- CSS mal isolé
- TypeScript non strict
- Pas d’optimisation build

---

# FAQ – Créer un projet React moderne

## Vite ou Create React App ?

Vite est aujourd’hui plus performant et recommandé.

## Tailwind est-il adapté aux gros projets ?

Oui, avec une architecture claire et des composants bien structurés.

## React seul suffit-il pour le SEO ?

Pour une application : oui.
Pour un blog ou site marketing : Next.js est préférable.

## Quelle architecture React choisir ?

Feature-based + séparation UI / logique.

---

# Conclusion

Créer un projet React moderne ne doit pas être improvisé.

Un bon setup dès le départ te permet :

- De scaler plus vite
- De réduire la dette technique
- D’améliorer les performances
- De travailler proprement

C’est exactement la structure que j’utilise aujourd’hui sur mes projets sérieux.

---

## Ressources utiles

- React.dev
- Vitejs.dev
- Tailwindcss.com
- Typescriptlang.org

---

Tu veux aller plus loin ?

👉 Prochain article :  
“Architecture React avancée pour projets SaaS”



Créer un projet React moderne (Vite + TypeScript + Tailwind) : architecture scalable et templates réutilisables

# ⚛️ Comment créer un hook React personnalisé (guide complet avec TypeScript + exemples)

Si vous développez en React, vous avez forcément déjà :

- copié-collé du useEffect
- dupliqué du useState
- répété des appels API

👉 C’est exactement pour éviter ça qu’existent les hooks React personnalisés.

Dans ce guide complet, vous allez apprendre :

- Comment créer un hook React personnalisé  
- Les règles essentielles à respecter  
- Des exemples concrets en TypeScript  
- Les erreurs fréquentes à éviter  
- Comment optimiser vos hooks pour la performance  

---

## TL;DR – C’est quoi un hook React personnalisé ?

Un hook React personnalisé est :

- une fonction JavaScript  
- qui commence par "use"  
- qui utilise des hooks React (useState, useEffect, etc.)  
- qui encapsule une logique réutilisable  

👉 Objectif : réutiliser du code proprement et améliorer l’architecture de votre application.

---

## Pourquoi créer un hook React personnalisé ?

### Sans hook

- code dupliqué  
- logique dispersée  
- maintenance compliquée  

### Avec hook

- logique centralisée  
- réutilisable  
- testable  
- plus lisible  

👉 C’est une base essentielle pour une architecture React moderne.

---

## Exemple 1 – Hook simple : useCounter

```tsx
import { useState } from "react";

export function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);

  const increment = () => setCount(c => c + 1);
  const decrement = () => setCount(c => c - 1);
  const reset = () => setCount(initialValue);

  return { count, increment, decrement, reset };
}
````

### Utilisation

```tsx
function Counter() {
  const { count, increment, decrement, reset } = useCounter(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
}
```

---

## Exemple 2 – useLocalStorage (persistant)

Cas d’usage : sauvegarder des préférences utilisateur.

```tsx
import { useState } from "react";

export function useLocalStorage<T>(key: string, initialValue: T) {
  const [storedValue, setStoredValue] = useState<T>(() => {
    if (typeof window === "undefined") return initialValue;

    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch {
      return initialValue;
    }
  });

  const setValue = (value: T | ((val: T) => T)) => {
    const valueToStore =
      value instanceof Function ? value(storedValue) : value;

    setStoredValue(valueToStore);

    if (typeof window !== "undefined") {
      window.localStorage.setItem(key, JSON.stringify(valueToStore));
    }
  };

  return [storedValue, setValue] as const;
}
```

⚠️ Important avec Next.js : toujours vérifier que window existe (SSR).

---

## Exemple 3 – Hook API : useApi

```tsx
import { useState, useEffect } from "react";

export function useApi<T>(url: string) {
  const [data, setData] = useState<T | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    const controller = new AbortController();

    const fetchData = async () => {
      try {
        setLoading(true);
        const response = await fetch(url, { signal: controller.signal });

        if (!response.ok) throw new Error("Network error");

        const result = await response.json();
        setData(result);
      } catch (err) {
        if ((err as any).name !== "AbortError") {
          setError(err as Error);
        }
      } finally {
        setLoading(false);
      }
    };

    fetchData();

    return () => controller.abort();
  }, [url]);

  return { data, loading, error };
}
```

---

## Exemple 4 – Performance : useDebounce

```tsx
import { useEffect, useState } from "react";

export function useDebounce<T>(value: T, delay: number): T {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => clearTimeout(handler);
  }, [value, delay]);

  return debouncedValue;
}
```

---

## Règles importantes des hooks React

* ne jamais appeler un hook dans une condition
* respecter l’ordre d’appel
* toujours commencer par "use"
* gérer correctement les dépendances

👉 Sinon : erreur "Invalid Hook Call"

---

## Erreurs fréquentes

* hook trop complexe
* trop de responsabilités
* dépendances mal gérées
* oublier le SSR
* ne pas tester

---

## Tester un hook React

```tsx
import { renderHook, act } from "@testing-library/react";
import { useCounter } from "./useCounter";

test("should increment counter", () => {
  const { result } = renderHook(() => useCounter());

  act(() => {
    result.current.increment();
  });

  expect(result.current.count).toBe(1);
});
```

---

## FAQ – Hooks React personnalisés

### Comment créer un hook React personnalisé ?

Créer une fonction qui commence par "use" et encapsule une logique réutilisable.

### Peut-on utiliser TypeScript ?

Oui, c’est recommandé.

### Compatible avec Next.js ?

Oui, mais attention au SSR (window, localStorage).

### Différence hook vs composant ?

* hook = logique
* composant = interface

---

## Conclusion

Maîtriser les hooks React personnalisés permet de :

* structurer votre application
* réduire la duplication
* améliorer les performances
* créer une architecture scalable

👉 C’est une compétence essentielle pour tout développeur React moderne.

---

## Besoin d’aller plus loin ?

👉 Vous souhaitez optimiser votre architecture React ou Next.js ?

**[Contactez-nous pour un accompagnement sur mesure.](/contact)**

React

Créer un projet React moderne (Vite + TypeScript + Tailwind) : architecture scalable et templates réutilisables

Comment créer un hook React (guide complet avec TypeScript et exemples)

Explorer d'autres categories