React Boilerplate est un environnement de travail React préconfiguré pour le développement et le déploiement en production d’applications de toutes tailles. Cet ensemble outils React créé par Max Stoiber présente de nombreux avantages comme:

• Rester concentrer sur son code et mettre l'accent sur les performances
• Adopter des pratiques de programmation inspirées des meilleurs développeurs.
• Garantir automatiquement la qualité du code et des modifications.
• Prendre en charge le référencement
• Développer des Application Web native.
• Charger les polices de caractère plus rapidement
• De gagner du temps (beaucoup de temps… )

Malheureusement, la prise-en-main du boilerplate peut sembler complexe aux non-initiés et encore plus aux non-anglophones.

L'objectif de ce document sera donc principalement de proposer une traduction intégrale et en français de la documentation officielle de React Boilerplate et accessoirement de démystifier l’utilisation de React Boilerplate via des leçons et des exercices pratiques.

• 1. Général
  • 1.1. Commandes CLI
  • 1.2. Introduction
  • 1.3. Configuration: fichiers
  • 1.4. Configuration serveur
  • 1.5. Déploiement
  • 1.6. Débogage
  • 1.7. Questions fréquemment posées
  • 1.8. Écueils
  • 1.9. Suppression
  • 1.10. Extraction de composants
• 2. Tests
  • 2.1. Test Unitaire
  • 2.2. Test des composants
  • 2.3. Test à distance
• 3. Style (CSS)
  • 3.1. CSS nouvelle génération
  • 3.2. Support CSS
  • 3.3. styled-components
  • 3.4. Feuilles de style
  • 3.5. Modules CSS
  • 3.6. Sass
  • 3.7. LESS
• 4. JavaScript
  • 4.1. Redux
  • 4.2. Immer
  • 4.3. reselect
  • 4.4. Redux-saga
  • 4.5. i18n
  • 4.6. Routage
• 5. Maintenance
  • 5.1. Mettre à jour les Dépendances
• 6. Forks

1. Commençons en lançant l'exemple d'application Repospective fourni avec ce projet pour faire la démonstration de certaines de ses meilleures fonctionnalités:

   npm run setup && npm start

2. Ouvrez localhost:3000 pour voir l’exemple en action...

   • Ajoutez un nom d'utilisateur Github pour voir Redux et Redux Sagas en action: les mises à jour asynchrone de l'état sans effort et les effets de bord sont maintenant à vous :)
   • Modifiez le fichier ./app/components/Header/index.js pour que le texte du composant <Button> affiche "Features !!!" ... Le rechargement à chaud du module vous donne une boucle de rétroaction avec votre interface utilisateur si lisse qu'elle est presque conversationnelle !
   • Cliquez sur votre bouton Features (nouvellement vigoureux) pour voir React Router en action... Vous pouvez maintenant partager un lien direct vers ce contenu en privé sur votre réseau local ou adressable globalement à n'importe quel appareil, n'importe où. Pas mal pour une application monopage exécutée localement.

3. Il est temps de créer votre propre application: lancez

   npm run clean

   ... et utilisez les générateurs intégrés pour débuter votre première fonctionnalité.

Exécutez npm start pour voir votre application fonctionner sur localhost:3000

1. Lancez npm run build, cela compilera tous les fichiers nécessaires dans le dossier build.

2. Envoyez le contenu du dossier build dans le dossier racine de votre serveur Web.

Le dossier app/ contient l'intégralité de votre code d'application, y compris CSS, JavaScript, HTML et les tests.

Les autres dossiers et fichiers n'existent que pour vous faciliter la vie et ne doivent pas être modifiés ou supprimés.

(S'ils doivent être modifiés, veuillez soumettre le problème!)

En utilisant des littéraux de modèle balisés (un ajout récent à JavaScript) et la puissance de CSS, les styled-components vous permettent d'écrire du code CSS réel pour styliser vos composants. Ils suppriment également le mappage entre les composants et les styles - ce qui rend plus facile l'utilisation de composants comme construction de style de bas niveau !

Voir la documentation CSS pour plus d'informations.

Nous regroupons tous vos scripts côté client et les découpons en plusieurs fichiers en utilisant le fractionnement de code lorsque cela est possible. Nous optimisons ensuite automatiquement votre code lors de la compilation pour la production afin que vous n'ayez pas à vous en soucier.

Consultez la documentation JS pour plus d'informations sur le côté JavaScript des choses.

Nous utilisons react-helmet pour gérer les balises de document. Des exemples sur la façon d'écrire les balises head peuvent être trouvés ici.

Pour une explication approfondie de la procédure de test, consultez la documentation de test! !

npm run start:tunnelrend votre application exécutée localement disponible globalement sur le Web via une URL temporaire: idéal pour tester sur différents appareils, démos client, etc. !

Les tests unitaires se trouvent dans les répertoires test/ juste à côté des composants testés et sont exécutés avec npm run test.