Configuration Avancée de React

Dans ce chapitre, nous allons explorer les configurations avancées pour optimiser votre application React. Nous verrons comment personnaliser l’environnement de développement et de production.

Configuration de TypeScript

TypeScript apporte un typage statique à JavaScript, ce qui améliore la maintenabilité et la robustesse de votre code.

1. Installation de TypeScript :

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

2. Configuration du tsconfig.json :

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": "src"
  },
  "include": ["src"]
}

Configuration de Webpack

Bien que Create React App utilise Webpack en interne, nous pouvons l’éjecter pour une personnalisation avancée :

1. Éjection de la configuration :

npm run eject

2. Personnalisation du webpack.config.js :

module.exports = {
  // Configuration de base
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: '[name].[contenthash].js',
    clean: true
  },
  
  // Optimisations
  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 20000,
      maxSize: 244000,
      minChunks: 1,
      maxAsyncRequests: 30,
      maxInitialRequests: 30
    }
  },
  
  // Gestion des assets
  module: {
    rules: [
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource'
      }
    ]
  }
};

Configuration de Babel

Babel permet de transpiler le code JavaScript moderne en une version compatible avec les navigateurs plus anciens.

1. Installation des dépendances :

npm install --save-dev @babel/core @babel/preset-react @babel/preset-typescript

2. Configuration du .babelrc :

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
    "@babel/preset-typescript"
  ],
  "plugins": [
    "@babel/plugin-transform-runtime",
    "@babel/plugin-proposal-class-properties"
  ]
}

Configuration des Variables d’Environnement

React permet de gérer différentes configurations selon l’environnement :

1. Fichiers de configuration :

.env                # Variables par défaut
.env.local         # Variables locales (non versionnées)
.env.development   # Variables pour le développement
.env.production    # Variables pour la production

2. Exemple de configuration :

REACT_APP_API_URL=https://api.example.com
REACT_APP_ENV=development

Optimisation des Performances

1. Configuration du Code Splitting

// Dans votre fichier de routage
const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Chargement...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

2. Configuration du Service Worker

// Dans src/serviceWorker.js
const isLocalhost = Boolean(
  window.location.hostname === 'localhost' ||
    window.location.hostname === '[::1]' ||
    window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/)
);

export function register(config) {
  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
    window.addEventListener('load', () => {
      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
      if (isLocalhost) {
        checkValidServiceWorker(swUrl, config);
      } else {
        registerValidSW(swUrl, config);
      }
    });
  }
}

Configuration de la Sécurité

1. Configuration des Headers de Sécurité

// Dans le fichier public/index.html
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline';">

2. Configuration de CORS

// Dans votre serveur backend
app.use(cors({
  origin: process.env.REACT_APP_URL,
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
  allowedHeaders: ['Content-Type', 'Authorization']
}));

Configuration des Tests

1. Configuration de Jest

// Dans package.json
{
  "jest": {
    "setupFilesAfterEnv": [
      "<rootDir>/src/setupTests.js"
    ],
    "moduleNameMapper": {
      "\\.(css|less|scss|sass)$": "identity-obj-proxy"
    }
  }
}

2. Configuration de Cypress

// Dans cypress.config.js
module.exports = {
  e2e: {
    baseUrl: 'http://localhost:3000',
    setupNodeEvents(on, config) {
      // Configuration des plugins
    }
  }
};

Bonnes Pratiques de Configuration

1. Version Control :

   • Ne versionnez pas les fichiers .env.local
   • Incluez des exemples de configuration dans .env.example

2. Sécurité :

   • Ne stockez pas de secrets dans le code source
   • Utilisez des variables d’environnement pour les informations sensibles

3. Performance :

   • Activez la compression gzip
   • Configurez le cache des assets
   • Optimisez les images

Conclusion

La configuration avancée de React vous permet d’optimiser votre application pour la production, d’améliorer les performances et de renforcer la sécurité. Dans le prochain chapitre, nous allons commencer à créer des composants React.