Lisää React olemassa olevaan projektiin
Jos haluat lisätä interaktiivisuutta olemassa olevaan projektiin, sinun ei tarvitse kirjoittaa sitä uudelleen Reactilla. Lisää React olemassa olevaan projektiisi ja renderöi interaktiivisia React-komponentteja missä tahansa.
Reactin käyttäminen olemassa olevan sivuston alireitissä
Sanotaan, että sinulla on olemassa oleva verkkosovellus osoitteessa example.com, joka on rakennettu toisella palvelinteknologialla (kuten Rails), ja haluat toteuttaa kaikki reitit, jotka alkavat example.com/some-app/ täysin Reactilla.
Tässä miten suosittelemme sen asentamista:
- Rakenna React-osuus sovelluksestasi käyttäen yhtä React-pohjaista ohjelmistokehystä.
- Määrittele
/some-appaloituspoluksi ohjelmistokehyksesi konfiguroinnissa (tässä miten: Next.js, Gatsby). - Määrittele verkkopalvelimesi tai välityspalvelimesi siten, jotta kaikki pyynnöt
/some-app/reittiin käsitellään React sovelluksessasi.
Tämä varmistaa, että React -osa sovelluksestasi voi hyötyä parhaista käytännöistä, jotka on sisällytetty näihin kehyksiin.
Moni React -pohjainen ohjelmistokehys ovat full-stackkeja ja antavat React-sovelluksesi hyödyntää palvelinta. Voit kuitenkin käyttää samaa lähestymistapaa, vaikka et voisi tai et haluaisi ajaa JavaScriptiä palvelimella. Tässä tapauksessa tarjoa HTML/CSS/JS -vientiä (next export -lopputulos Next.js:lle, oletusarvo Gatsbylle) /some-app/ sijassa.
Reactin käyttäminen osana olemassa olevaa sivua
Sanotaan, että sinulla on olemassa oleva sivu, joka on rakennettu toisella tekniikalla (joko palvelinteknologialla, kuten Rails, tai asiakasteknologialla, kuten Backbone), ja haluat renderöidä interaktiivisia React-komponentteja jossaain kohtaa sivua. Tämä on yleinen tapa integroida React—itse asiassa se on, miltä suurin osa Reactin käytöstä näytti Metalla monien vuosien ajan!
Voit tehdä tämän kahdessa vaiheessa:
- Asenna JavaScript ympäristö, jonka avulla voit käyttää JSX syntaksia, jakaa koodin useisiin moduuleihin
import/exportsyntaksilla, ja käyttää paketteja (kuten, React) npm pakettirekisteristä. - Renderöi React komponenttisi missä haluat niiden näkyvän sivulla.
Tämä tarkka lähestymistapa riippuu olemassa olevasta sivustasi, joten käydään läpi joitain yksityiskohtia.
1. Vaihe: Asenna modulaarinen JavaScript ympäristö
Modulaarisella JavaScript ympäristöllä voit kirjoittaa React komponenttisi yksittäisiin tiedostoihin, toisin kuin kirjoittamaan kaikki koodisi yhteen tiedostoon. Sen avulla voit käyttää kaikkia ihania paketteja, jotka on julkaistu muiden kehittäjien toimesta npm rekisterissä—mukaan lukien Reactin itse! Miten teet tämän riippuu olemassa olevasta asennuksestasi:
-
Jos sovelluksesi on jo jaettu tiedostoihin, jotka käyttävät
importlausetta, kokeile käyttää asenusta, joka sinulla jo on. Tarkista aiheuttaako<div />:n kirjoittaminen JS koodissasi syntaksivirheen. Jos se aiheuttaa syntaksivirheen, saatat tarvita JavaScript koodin muuntamista Babelilla, ja Babel React preset:n käyttöön ottamista käyttääksesi JSX:ää. -
Jos sovelluksellasi ei ole olemassa olevaa ympäristöä JavaScript-moduulien kääntämistä varten, luo se Vite:n avulla. Vite-yhteisö ylläpitää monia integraatioita backend-kehysratkaisujen kanssa, mukaan lukien Rails, Django ja Laravel. Jos backend-kehysratkaisua ei ole listattu, seuraa tätä opasta integroidaksesi Vite-rakentamisen manuaalisesti backendiisi.
Tarkistaaksesi, toimiiko asennus, suorita tämä komento projektisi kansiossa:
Lisää sitten nämä koodirivit pää-JavaScript-tiedostosi alkuun (se voi olla nimeltään index.js tai main.js):
import { createRoot } from 'react-dom/client'; // Tyhjää olemassa oleva HTML sisältö document.body.innerHTML = '<div id="app"></div>'; // Renderöi sen sijaan React komponentti const root = createRoot(document.getElementById('app')); root.render(<h1>Hello, world</h1>);
Jos koko sivusi sisältö korvattiin “Hello, world!” -tekstillä, kaikki toimi! Jatka lukemista.
2. Vaihe: Renderöi React komponentteja missä tahansa kohdassa sivua
Edellisessä vaiheessa laitoit tämän koodin pää-tiedostosi alkuun:
import { createRoot } from 'react-dom/client';
// Tyhjää olemassa oleva HTML sisältö
document.body.innerHTML = '<div id="app"></div>';
// Renderöi sen sijaan React komponentti
const root = createRoot(document.getElementById('app'));
root.render(<h1>Hello, world</h1>);Tietenkään et halua oikeasti tyhjätä olemassa olevaa HTML sisältöä!
Poista tämä koodi.
Sen sijaan, saatat haluta renderöidä React komponenttisi tietyissä paikoissa HTML:ssäsi. Avaa HTML sivusi (tai palvelimen mallit, jotka tuottavat sen) ja lisää uniikki id attribuutti mihin tahansa tagiin, esimerkiksi:
<!-- ... jossain kohtaa html koodiasi ... -->
<nav id="navigation"></nav>
<!-- ... lisää html koodia ... -->Tämän avulla voit etsiä kyseisen HTML elementin käyttäen document.getElementById ja välittää sen createRoot:lle, jotta voit renderöidä oman React komponenttisi sen sisälle:
import { createRoot } from 'react-dom/client'; function NavigationBar() { // TODO: Oikeasti toteuta navigaatiopalkki return <h1>Hello from React!</h1>; } const domNode = document.getElementById('navigation'); const root = createRoot(domNode); root.render(<NavigationBar />);
Huomaa miten alkuperäinen HTML sisältö index.html:stä säilyy, mutta oma NavigationBar React komponenttisi ilmestyy nyt <nav id="navigation"> sisälle HTML:stäsi. Lue createRoot käyttödokumentaatiosta oppiaksesi lisää React komponenttien renderöinnistä olemassa olevan HTML sivun sisälle.
Kun otat Reactin käyttöön olemassa olevassa projektissa, on yleistä aloittaa pienillä interaktiivisilla komponenteilla (kuten painikkeilla) ja sitten vähitellen “liikkua ylöspäin”, kunnes lopulta koko sivusi on rakennettu Reactilla. Jos koskaan saavutat tämän pisteen, suosittelemme siirtymistä React-ohjelmistokehykseen saadaksesi eniten irti Reactista.
React Nativen käyttäminen olemassa olevassa natiivipuhelinsovelluksessa
React Native voidaan myös integroida olemassa oleviin natiivisovelluksiin asteittain. Jos sinulla on olemassa oleva natiivisovellus Androidille (Java tai Kotlin) tai iOS:lle (Objective-C tai Swift), seuraa tätä opasta lisätäksesi React Native näytön siihen.