Ajouter React à un Projet Existant

Si vous souhaitez apporter de l’interactivité à votre projet existant, vous n’avez pas besoin de le réécrire entièrement en React. Ajoutez simplement React à votre pile technologique existante et affichez des composants React interactifs où vous le souhaitez.

Remarque

Vous devez installer Node.js pour le développement local. Bien que vous puissiez essayer React en ligne ou avec une simple page HTML, dans la réalité, la plupart des outils JavaScript que vous souhaiterez utiliser pour le développement nécessitent Node.js.

Utiliser React pour une sous-route entière de votre site web existant

Supposons que vous ayez une application web existante sur example.com développée avec une autre technologie côté serveur (comme Rails) et que vous souhaitiez implémenter toutes les routes commençant par example.com/some-app/ entièrement avec React.

Voici comment nous vous recommandons de procéder:

Construisez la partie React de votre application en utilisant l’un des Frameworks basés sur React.
Spécifiez /some-app comme le chemin de base dans la configuration de votre framework (voici comment le faire avec: Next.js, Gatsby).
Configurez votre serveur ou un proxy de manière à ce que toutes les requêtes sous /some-app/ soient traitées par votre application React.

Cela garantit que la partie React de votre application peut bénéficier des bonnes pratiques intégrées à ces frameworks.

De nombreux frameworks basés sur React sont des frameworks full-stack qui 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 souhaitez pas exécuter JavaScript côté serveur. Dans ce cas, servez plutôt l’exportation HTML/CSS/JS (next export pour Next.js, par défaut pour Gatsby) à l’emplacement /some-app/.

Utiliser React pour une partie de votre page existante

Supposons que vous avez une page existante construite avec une autre technologie (soit une technologie côté serveur comme Rails, soit une technologie côté client comme Backbone), et que vous souhaitiez afficher des composants React interactifs à un endroit spécifique de cette page. C’est une façon courante d’intégrer React - en fait, c’est ainsi que la plupart des utilisations de React étaient envisagées chez Meta pendant de nombreuses années !

Vous pouvez le faire en deux étapes :

Mettre en place un environnement JavaScript qui vous permet d’utiliser la syntaxe JSX, de diviser votre code en modules avec la syntaxe import / export, et d’utiliser des packages (par exemple, React) provenant du registre des packages npm.
Afficher vos composants React là où vous souhaitez les voir sur la page.

L’approche exacte dépend de la configuration de votre page existante, nous allons donc passer en revue quelques détails.

Étape 1 : Mettre en place un environnement JavaScript modulaire

Un environnement JavaScript modulaire vous permet d’écrire vos composants React dans des fichiers individuels, plutôt que 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 registre npm y compris React lui-même ! La manière de le faire dépend de votre configuration existante :

Si votre application est déjà divisée en fichiers qui utilisent des déclarations import, essayez d’utiliser la configuration que vous avez déjà. Vérifiez si l’écriture de <div /> dans votre code JS provoque une erreur de syntaxe. Si cela provoque une erreur de syntaxe, vous devrez peut-être transformer votre code JavaScript avec Babel, et activer le préréglage Babel React pour utiliser JSX.
Si votre application n’a pas de configuration existante pour la compilation des modules JavaScript, mettez-la en place avec Vite. La communauté Vite propose de nombreuses intégrations avec des frameworks backend, tels que Rails, Django et Laravel. Si votre framework backend ne figure pas dans la liste, suivez ce guide pour intégrer manuellement les builds Vite à votre backend.

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

Terminal

npm install react react-dom

Ensuite, ajoutez ces lignes de code en haut de votre fichier JavaScript principal (il pourrait s’appeler index.js ou main.js):

Fork

import { createRoot } from 'react-dom/client';

// Effacez le contenu HTML existant
document.body.innerHTML = '<div id="app"></div>';

// Affichez plutôt votre composant React
const root = createRoot(document.getElementById('app'));
root.render(<h1>Hello, world</h1>);

Si tout le contenu de votre page a été remplacé par un “Hello, world!”, tout fonctionne ! Continuez à lire.

Remarque

Intégrer un environnement JavaScript modulaire dans un projet existant pour la première fois peut sembler intimidant, mais cela en vaut la peine ! Si vous êtes bloqué, essayez nos ressources communautaires ou discutez sur Vite Chat.

Étape 2 : Afficher les composants React n’importe où sur la page.

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

import { createRoot } from 'react-dom/client';

// Effacez le contenu HTML existant
document.body.innerHTML = '<div id="app"></div>';

// Affichez plutôt votre composant React
const root = createRoot(document.getElementById('app'));
root.render(<h1>Hello, world</h1>);

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

Delete this code.

Instead, you probably want to render your React components in specific places in your HTML. Open your HTML page (or the server templates that generate it) and add a unique id attribute to any tag, for example:

<!-- ... somewhere in your html ... -->
<nav id="navigation"></nav>
<!-- ... more html ... -->

This lets you find that HTML element with document.getElementById and pass it to createRoot so that you can render your own React component inside:

Fork

import { createRoot } from 'react-dom/client';

function NavigationBar() {
  // TODO: Actually implement a navigation bar
  return <h1>Hello from React!</h1>;
}

const domNode = document.getElementById('navigation');
const root = createRoot(domNode);
root.render(<NavigationBar />);

Notice how the original HTML content from index.html is preserved, but your own NavigationBar React component now appears inside the <nav id="navigation"> from your HTML. Read the createRoot usage documentation to learn more about rendering React components inside an existing HTML page.

When you adopt React in an existing project, it’s common to start with small interactive components (like buttons), and then gradually keep “moving upwards” until eventually your entire page is built with React. If you ever reach that point, we recommend migrating to a React framework right after to get the most out of React.

Using React Native in an existing native mobile app

React Native can also be integrated into existing native apps incrementally. If you have an existing native app for Android (Java or Kotlin) or iOS (Objective-C or Swift), follow this guide to add a React Native screen to it.

PrécédentStart a New React Project SuivantEditor Setup