Installation et Configuration de React

Dans ce chapitre, nous allons mettre en place notre environnement de développement React. Nous allons utiliser Create React App, l’outil officiel recommandé par l’équipe React pour démarrer un nouveau projet.

Prérequis

Avant de commencer, assurez-vous d’avoir installé :

1. Node.js (version 14.0.0 ou supérieure)
2. npm (généralement installé avec Node.js)

Pour vérifier vos installations, ouvrez un terminal et exécutez :

node --version
npm --version

Création d’un nouveau projet React

La façon la plus simple de créer une nouvelle application React est d’utiliser Create React App. Voici comment procéder :

1. Ouvrez un terminal et exécutez la commande suivante :

npx create-react-app mon-app-react

2. Une fois l’installation terminée, accédez au répertoire du projet :

cd mon-app-react

3. Démarrez l’application en mode développement :

npm start

Votre application devrait maintenant être accessible à l’adresse http://localhost:3000.

Structure du projet

Après la création, votre projet aura la structure suivante :

mon-app-react/
  ├── node_modules/
  ├── public/
  │   ├── favicon.ico
  │   ├── index.html
  │   └── manifest.json
  ├── src/
  │   ├── App.css
  │   ├── App.js
  │   ├── App.test.js
  │   ├── index.css
  │   ├── index.js
  │   ├── logo.svg
  │   └── reportWebVitals.js
  ├── package.json
  └── README.md

Configuration de l’éditeur

Pour une meilleure expérience de développement, je recommande d’installer les extensions suivantes dans VS Code :

1. ESLint : Pour la détection des erreurs et le formatage du code
2. Prettier : Pour le formatage automatique du code
3. ES7+ React/Redux/React-Native snippets : Pour les raccourcis de code React

Configuration de Prettier

Créez un fichier .prettierrc à la racine du projet :

{
  "semi": true,
  "tabWidth": 2,
  "printWidth": 100,
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true
}

Configuration d’ESLint

Create React App inclut déjà ESLint, mais vous pouvez personnaliser les règles en créant un fichier .eslintrc.json :

{
  "extends": [
    "react-app",
    "react-app/jest"
  ],
  "rules": {
    "react/react-in-jsx-scope": "off",
    "react/prop-types": "off"
  }
}

Scripts disponibles

Dans votre package.json, vous trouverez les scripts suivants :

• npm start : Lance l’application en mode développement
• npm test : Lance les tests
• npm run build : Crée une version de production
• npm run eject : Éjecte la configuration (à utiliser avec précaution)

Bonnes pratiques

1. Organisation des fichiers :

   • Créez un dossier components pour vos composants
   • Créez un dossier assets pour vos images et autres ressources
   • Créez un dossier styles pour vos fichiers CSS

2. Nommage des fichiers :

   • Utilisez PascalCase pour les composants (ex: Button.js)
   • Utilisez camelCase pour les autres fichiers (ex: userProfile.js)

3. Version Control :

   • Créez un fichier .gitignore (déjà inclus par Create React App)
   • Committez régulièrement vos changements

Conclusion

Votre environnement de développement React est maintenant configuré et prêt à être utilisé. Dans le prochain chapitre, nous allons commencer à créer nos premiers composants React.