Créer une nouvelle appli React

Utilisez une boîte à outils intégrée pour la meilleure expérience utilisateur et développeur possible.

Cette page décrit quelques boîtes à outils populaires qui facilitent les tâches telles que :

• La montée à l’échelle avec de nombreux fichiers et composants.
• L’utilisation de bibliothèques tierces depuis npm.
• La détection précoce des erreurs courantes.
• L’édition à la volée du CSS et du JS en développement.
• L’optimisation pour la production.

Les boîtes à outils recommandées sur cette page ne nécessitent aucune configuration pour démarrer.

Vous n’avez peut-être pas besoin d’une boîte à outils

Si vous ne rencontrez pas les problèmes décrits ci-dessus ou si vous n’êtes pas encore à l’aise avec l’utilisation d’outils JavaScript, envisagez d’ajouter React comme une simple balise <script> sur une page HTML, éventuellement avec du JSX.

C’est également la façon la plus simple d’intégrer React au sein d’un site web existant. Vous pourrez toujours étendre votre outillage si ça vous semble utile !

Boîtes à outils recommandées

L’équipe React recommande en premier lieu ces solutions :

• Si vous apprenez React ou créez une nouvelle application web monopage, alors utilisez Create React App.
• Si vous construisez un site web rendu côté serveur avec Node.js, essayez Next.js.
• Si vous construisez un site web statique orienté contenu, essayez Gatsby.
• Si vous construisez une bibliothèque de composants ou une intégration avec du code déjà existant, essayez des boîtes à outils plus flexibles.

Create React App

Create React App est un environnement confortable pour apprendre React, et constitue la meilleure option pour démarrer une nouvelle application web monopage en React.

Il configure votre environnement de développement de façon à vous permettre d’utiliser les dernières fonctionnalités de JavaScript, propose une expérience développeur agréable et optimise votre application pour la production. Vous aurez besoin de Node >= 8.10 et de npm >= 5.6 sur votre machine. Pour créer un projet, exécutez :

npx create-react-app mon-app
cd mon-app
npm start

Remarque :

npx sur la première ligne n’est pas une faute de frappe — c’est un exécuteur de paquets qui est inclus dans npm 5.2+.

Create React App ne prend pas en charge la logique côté serveur ni les bases de données ; il crée simplement une chaîne de construction pour la partie frontale, de sorte que vous pouvez utiliser le serveur de votre choix. Sous le capot, il utilise Babel et webpack, mais vous n’avez pas besoin de connaître ces outils.

Lorsque vous êtes prêt·e à déployer en production, exécutez npm run build pour créer une version optimisée de votre application dans le répertoire build. Vous pouvez en apprendre davantage sur Create React App dans son README et son guide utilisateur.

Next.js

Next.js est un framework populaire et léger pour les applications statiques rendues côté serveur construites avec React. Il fournit des solutions prêtes à l’emploi pour les styles et le routage, et suppose que vous utilisez Node.js comme environnement serveur.

Apprenez Next.js grâce à son guide officiel.

Gatsby

Gatsby est la meilleure option pour créer des sites web statiques avec React. Il vous permet d’utiliser des composants React, mais génère du HTML et du CSS pré-rendus afin de garantir le temps de chargement le plus rapide.

Apprenez Gatsby grâce à son guide officiel et à une collection de kits de démarrage.

Boîtes à outils plus flexibles

Les boîtes à outils suivantes offrent plus de flexibilité et de choix. Nous les recommandons pour les utilisateurs expérimentés :

• Neutrino combine la puissance de webpack avec la simplicité des préréglages. Il inclut un préréglage pour les applications React et les composants React.
• nwb est particulièrement utile pour publier des composants React sur npm. Il peut également être utilisé pour créer des applications React.
• Nx est une boîte à outils pour le développements de monorepos full-stack, avec une prise en charge intégrée de React, next.js, Express et plus encore.
• Parcel est un bundler d’applications web rapide et sans configuration qui fonctionne avec React.
• Razzle est un framework de rendu côté serveur qui ne requiert aucune configuration, mais offre plus de flexibilité que Next.js.

Créer une boîte à outils à partir de zéro

Une boîte à outils de construction en JavaScript comprend généralement :

• Un gestionnaire de paquets, tel que Yarn ou npm. Il vous permet de tirer parti d’un vaste écosystème de paquets tiers, et de les installer ou les mettre à jour facilement.
• Un bundler, tel que webpack ou Parcel. Il vous permet d’écrire du code modulaire et de le regrouper en petits paquets permettant d’optimiser le temps de chargement.
• Un compilateur tel que Babel. Il vous permet d’écrire du JavaScript moderne qui fonctionnera quand même dans les navigateurs les plus anciens.

Si vous préférez configurer votre propre boîte à outils JavaScript à partir de zéro, jetez un œil à ce guide qui re-crée certaines des fonctionnalités de Create React App.

Pensez à vous assurer que votre outillage personnalisé est correctement configuré pour la production.