Ajouter React à un projet existant

Si vous souhaitez ajouter de l'interactivité à votre projet existant, vous n'êtes pas obligé de le réécrire entièrement en React. Ajoutez React à votre pile technologique actuelle et affichez des composants React interactifs où vous le souhaitez.

Utiliser React pour une sous-route complète de votre site web existant

Imaginons que vous ayez une application web existante surexample.comconstruite avec une autre technologie serveur (comme Rails), et que vous souhaitiez implémenter toutes les routes commençant parexample.com/some-app/entièrement avec React.

Voici comment nous recommandons de le configurer :

1. Construisez la partie React de votre applicationen utilisant l'un desframeworks basés sur React.
2. Spécifiez/some-appcommechemin de basedans la configuration de votre framework (voici comment faire :Next.js,Gatsby).
3. Configurez votre serveur ou un proxyde sorte que toutes les requêtes sous/some-app/soient traitées par votre application React.

Cela garantit que la partie React de votre application peutbénéficier des meilleures pratiquesintégrées dans ces frameworks.

De nombreux frameworks basés sur React sont full-stack et permettent à votre application React de tirer parti du serveur. Cependant, vous pouvez utiliser la même approche même si vous ne pouvez pas ou ne voulez pas exécuter JavaScript sur le serveur. Dans ce cas, servez l'export HTML/CSS/JS (sortie next exportpour Next.js, valeur par défaut pour Gatsby) à l'adresse/some-app/à la place.

Utiliser React pour une partie de votre page existante

Imaginons que vous ayez une page existante construite avec une autre technologie (soit côté serveur comme Rails, soit côté client comme Backbone), et que vous souhaitiez afficher des composants React interactifs quelque part sur cette page. C'est une façon courante d'intégrer React—en fait, c'est ainsi que la plupart des utilisations de React se présentaient chez Meta pendant de nombreuses années !

Vous pouvez le faire en deux étapes :

1. Configurez un environnement JavaScriptqui vous permet d'utiliser lasyntaxe JSX, de diviser votre code en modules avec la syntaxeimport/export, et d'utiliser des packages (par exemple, React) depuis le registre de packagesnpm.
2. Affichez vos composants Reactà l'endroit où vous souhaitez les voir sur la page.

L'approche exacte dépend de la configuration de votre page existante, alors examinons quelques détails.

Étape 1 : Configurer un environnement JavaScript modulaire

Un environnement JavaScript modulaire vous permet d'écrire vos composants React dans des fichiers individuels, au lieu d'écrire tout votre code dans un seul fichier. Il vous permet également d'utiliser tous les merveilleux packages publiés par d'autres développeurs sur le registrenpm—y compris React lui-même ! La façon de procéder dépend de votre configuration existante :

• Si votre application est déjà divisée en fichiers utilisant des instructionsimport,essayez d'utiliser la configuration que vous avez déjà. Vérifiez si écrire<div />dans votre code JS provoque une erreur de syntaxe. Si c'est le cas, vous devrez peut-êtretransformer votre code JavaScript avec Babelet activer lepréréglage React de Babelpour utiliser JSX.
• Si votre application n'a pas de configuration existante pour compiler des modules JavaScript,configurez-la avecVite. La communauté Vite maintientde nombreuses intégrations avec des frameworks backend, y compris Rails, Django et Laravel. Si votre framework backend n'est pas listé,suivez ce guidepour intégrer manuellement les builds Vite avec votre backend.

Pour vérifier si votre configuration fonctionne, exécutez cette commande dans le dossier de votre projet :

npm install react react-dom

Ajoutez ensuite ces lignes de code en haut de votre fichier JavaScript principal (il pourrait s'appelerindex.jsoumain.js) :

Si tout le contenu de votre page a été remplacé par un « Hello, world ! », tout a fonctionné ! Continuez à lire.

Étape 2 : Rendre des composants React n'importe où sur la page

À l'étape précédente, vous avez placé ce code en haut de votre fichier principal :

Bien sûr, vous ne voulez pas réellement effacer le contenu HTML existant !

Supprimez ce code.

Au lieu de cela, vous voulez probablement rendre vos composants React à des endroits spécifiques de votre HTML. Ouvrez votre page HTML (ou les modèles serveur qui la génèrent) et ajoutez un attributidunique à n'importe quelle balise, par exemple :

Cela vous permet de trouver cet élément HTML avecdocument.getElementByIdet de le passer àcreateRootafin de pouvoir y rendre votre propre composant React :

Notez que le contenu HTML original deindex.htmlest préservé, mais que votre propre composant ReactNavigationBarapparaît maintenant à l'intérieur de la balise<nav id="navigation">de votre HTML. Lisez ladocumentation d'utilisation de createRootpour en savoir plus sur le rendu de composants React dans une page HTML existante.

Lorsque vous adoptez React dans un projet existant, il est courant de commencer par de petits composants interactifs (comme des boutons), puis de continuer à « remonter » progressivement jusqu'à ce que l'intégralité de votre page soit construite avec React. Si vous atteignez ce point, nous vous recommandons de migrer versun framework Reactjuste après pour tirer le meilleur parti de React.

Utiliser React Native dans une application mobile native existante

React Nativepeut également être intégré de manière incrémentielle dans des applications natives existantes. Si vous avez une application native existante pour Android (Java ou Kotlin) ou iOS (Objective-C ou Swift),suivez ce guidepour y ajouter un écran React Native.