Aggiungere React ad un Progetto Esistente

Se vuoi aggiungere della interattività al tuo progetto esistente, non serve che tu lo riscriva in React. Aggiungi React al tuo stack esistente e renderizza i componenti interattivi di React ovunque.

Nota

È necessario installare Node.js per lo sviluppo locale. Sebbene tu possa provare React online o con una semplice pagina HTML, realisticamente la maggior parte degli strumenti JavaScript che vorrai utilizzare per lo sviluppo richiedono Node.js.

Utilizzare React per un’intera subroute di un sito web esistente

Supponiamo tu abbia una web app esistente a example.com costruita con un’altra tecnologia server (come Rails) e tu voglia implementare tutte le tue routes a partire da example.com/some-app/ completamente con React.

Ecco come ti consigliamo di impostarla:

Crea la parte React della tua app utilizzando uno dei framework basati su React.
Specifica /some-app come percorso di base nella configurazione del tuo framework (ecco come: Next.js, Gatsby).
Configura il tuo server o un proxy in modo che tutte le richieste in /some-app/ siano gestite dalla tua app React.

Ciò garantisce che la parte React della tua app possa trarre vantaggio dalle best practices integrate in tali framework.

Molti framework basati su React sono full-stack e consentono alla tua app React di trarre vantaggio dal server. Tuttavia, puoi utilizzare lo stesso approccio anche se non puoi o non vuoi eseguire JavaScript sul server. In tal caso, pubblica invece l’esportazione HTML/CSS/JS (output di next export per Next.js, output predefinito per Gatsby) in /some-app/.

Utilizzare React per una parte della tua pagina esistente

Supponiamo che tu abbia una pagina esistente costruita con un’altra tecnologia (una server come Rails o una client come Backbone) e desideri renderizzare i componenti React interattivi da qualche parte in quella pagina. Questa è una modalità comune per integrare React—di fatto, l’utilizzo di React in Meta è apparso così per molti anni!

Puoi fare questo in due step:

Configura un ambiente JavaScript che ti permetta di utilizzare la sintassi JSX, suddividi il tuo codice in moduli con la sintassi import / export ed utilizza i pacchetti (per esempio, React) dal registro dei pacchetti npm.
Renderizza i tuoi componenti React dove vuoi visualizzarli sulla pagina.

L’approccio esatto dipende dalla configurazione della tua pagina esistente, esaminiamo quindi alcuni dettagli.

Step 1: Configurare un ambiente JavaScript modulare

Un ambiente JavaScript modulare ti consente di scrivere i tuoi componenti React in file individuali, invece di dover scrivere tutto il tuo codice in un singolo file. Questo ti consente anche di utilizzare tutti i meravigliosi pacchetti pubblicati da altri sviluppatori sul registro npm—incluso lo stesso React! Il modo in cui lo fai dipende dalla tua configurazione esistente:

Se la tua app è già suddivisa in file che utilizzano istruzioni di import, prova ad utilizzare la configurazione di cui già disponi. Controlla se la scrittura di <div /> nel tuo codice JS causa un errore di sintassi. Se questo causa un errore di sintassi, potresti aver bisogno di trasformare il tuo codice JavaScript con Babel ed abilitare il preset Babel React per poter utilizzare la sintassi JSX.
Se la tua app non dispone di una configurazione esistente per la compilazione di moduli JavaScript, configurala con Vite. La community di Vite mantiene molte integrazioni con i framework di backend, tra cui Rails, Django e Laravel. Se il tuo framework di backend non è elencato, segui questa guida per integrare manualmente le build di Vite con il tuo backend.

Per controllare che la tua configurazione sia funzionante, lancia questo comando nella cartella del tuo progetto:

Terminal

npm install react react-dom

Poi aggiungi queste linee di codice in cima al tuo file JavaScript principale (potrebbe essere chiamato index.js o main.js):

Fork

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

// Pulisci il contenuto HTML esistente
document.body.innerHTML = '<div id="app"></div>';

// Sostituiscilo renderizzando il tuo componente React
const root = createRoot(document.getElementById('app'));
root.render(<h1>Hello, world</h1>);

Se l’intero contenuto della tua pagina è stato sostituito da un “Hello, world!”, tutto ha funzionato! Continua a leggere.

Nota

L’integrazione di un ambiente JavaScript modulare in un progetto esistente per la prima volta può sembrare intimidatorio, ma ne vale la pena! Se rimani bloccato, prova le nostre risorse della community o la Chat Vite.

Step 2: Renderizzare i componenti React in qualsiasi punto della pagina

Nello step precedente, hai inserito questo codice all’inizio del tuo file principale:

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

// Pulisci il contenuto HTML esistente
document.body.innerHTML = '<div id="app"></div>';

// Sostituiscilo renderizzando il tuo componente React
const root = createRoot(document.getElementById('app'));
root.render(<h1>Hello, world</h1>);

Ovviamente, in realtà non vuoi cancellare il contenuto HTML esistente!

Cancella questo codice.

Invece, probabilmente vorrai renderizzare i tuoi componenti React in punti specifici del tuo codice HTML. Apri la tua pagina HTML (oppure i template server che la generano) ed aggiungi un attributo id univoco ad un qualsiasi tag, per esempio:

<!-- ... da qualche parte nel tuo html ... -->
<nav id="navigation"></nav>
<!-- ... altro html ... -->

Questo ti permette di trovare quell’elemento HTML tramite document.getElementById e di passarlo al metodo createRoot così da poter renderizzare il tuo componente React al suo interno:

Fork

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

function NavigationBar() {
  // TODO: Implementa una vera barra di navigazione
  return <h1>Hello from React!</h1>;
}

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

Nota come il contenuto HTML originale di index.html sia stato preservato, ma il tuo componente React NavigationBar ora appare all’interno del <nav id="navigation"> del tuo HTML. Leggi la documentazione sull’uso di createRoot per saperne di più sul rendering di componenti React all’interno di una pagina HTML esistente.

Quando adotti React in un progetto esistente, è comune iniziare con piccoli componenti interattivi (come i pulsanti), e poi gradualmente continuare a “salire” fino a quando alla fine l’intera pagina è costruita con React. Se raggiungi mai quel punto, ti consigliamo di migrare verso un framework React subito dopo per ottenere il massimo da React.

Utilizzare React Native in un’app mobile nativa esistente

React Native può anche essere integrato in app native esistenti in modo incrementale. Se hai un’app nativa esistente per Android (Java o Kotlin) o iOS (Objective-C o Swift), segui questa guida per aggiungere una schermata React Native ad essa.

PreviousAvviare un Nuovo Progetto React NextSetup dell'editor