Innsetning á React í tiltæku verkefni

Þú þarft ekki að endurskrifa tiltækt verkefni til að auka gagnvirknina. Þú getur bætt React við núverandi tæknistafla og birt React íhluti hvar sem er.

Athugið

Þú verður að innsetja Node.js fyrir staðbundna þróun. Þrátt fyrir að þú getir prófað React á Netinu eða með einfaldri HTML síðu þá munu flest tólin sem þú þarft í þróunarumhverfinu þurfa á Node.js að halda.

Notkun á React fyrir undirsíðu á núverandi síðu

Gefum okkur að þú sért með tiltæka vefþjónustu á example.com sem var skrifuð með bakendaþjónustu eins og Rails, og þú viljir útfæra allar beiningar sem byrja á example.com/eitthvað-forrit með React.

Þá mælum við með þessari nálgun:

Smíðaðu React hlutann með einhverju React rammakerfi.
Tilgreindu /eitthvað-forrit sem grunnslóð í stillingum rammans sem þú valdir (sjá hér: Next.js eða Gatsby).
Stilltu vefþjóninn eða vefselið á þann veg að allar beiðnir sem hefjist á /eitthvað-forrit/ séu birtar í React forritinu þínu.

Þetta tryggir að React hlutinn í vefsíðunni þinni fylgi þróunarstöðlunum sem eru innbyggðir í þessum römmum.

Sum React rammakerfi eru heilstafla (e. full-stack) og gera þér kleift að skrifa bakendakóða líka. Hvort sem það er eitthvað sem þú vilt nýta þer eða ekki þá geturðu fylgt sömu nálgunum. Til dæmis er hægt að birta kyrrlegt HTML, CSS, og JS (next export úttak í Next.js, sjálfgefið í Gatsby) á síðunni /eitthvað-forrit.

Notkun React á hluta vefsíðu

Gefum okkur að þú sért með vefsíðu sem er skrifuð í annarri tækni (annaðvort bakendatækni eins og Rails eða framendatækni eins og Backbone), og að þú viljir birta gagnvirka React íhluti einhvers staðar á síðunni. Þetta er tiltölulega algeng nálgun til að nota React—í raun var það á tímabili nákvæmlega þannig sem Meta notaði React!

Þú getur gert þetta í tveimur skrefum:

Útbúðu JavaScript umhverfi sem gerir þér kleift að nota JSX málskipan, deila kóðanum þínum í einingar með import og export málskipan, og notaðu forritasöfn (til dæmis, React) frá npm pakkaskránni.
Birtu React íhlutina þína þar sem þú vilt hafa þá á síðunni.

Nákvæm útfærsla á þessu veltur á núverandi uppsetningu hjá þér, svo við skulum fara aðeins nánar út í smáatriðin.

Fyrsta skref: Skiptu JavaScript umhverfinu þínu í einingar

Með því að skipta JavaScript kóða í einingar er hægt að nota margar skrár í stað þess að skrifa allan kóðann í eina skrá. Það gerir þér líka kleift að nota öll forritasöfnin sem eru aðgengileg á npm pakkaskránni—þar á meðal React sjálft! Nálgunin veltur á núverandi uppsetningu:

Ef vefurinn þinn er nú þegar skiptur í mismunandi skrár sem nota import setningar reyndu þá að halda áfram að nota sama kerfi. Athugaðu hvort það virki að skrifa <div /> án þess að það komi málskipanvilla. Ef þetta veldur villu þá kann að vera að þú þurfir að umbreyta JavaScript kóðanum með Babel, og virkja Babel React forstillinguna til að nota JSX.
Ef vefurinn þinn er ekki með neitt kerfi til að þýða JavaScript einingar þá skaltu prófa að nota Vite til þess. Vite samfélagið viðheldur margs konar samtengingum við bakendaramma, m.a. Rails, Django, og Laravel. Ef bakendaramminn þinn er ekki útlistaður þá skaltu fylgja þessum leiðbeiningum til að tengja Vite við bakendann þinn handvirkt.

Til að kanna hvort kerfið þitt virki geturðu keyrt eftirfarandi skipun í aðalmöppu verkefnisins:

Terminal

npm install react react-dom

Bættu svo þessum kóða efst í aðal JavaScript skránni (hún ætti að heita index.js eða kannski main.js):

Fork

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

// Fjarlægjum núverandi efni.
document.body.innerHTML = '<div id="app"></div>';

// Birtum React íhlut þess í stað.
const root = createRoot(document.getElementById('app'));
root.render(<h1>Halló, heimur!</h1>);

Ef efnið á síðunni hvarf og „Halló, heimur!“ kom þess í stað þá virkaði breytingin og þú getur haldið áfram að lesa þessar leiðbeiningar.

Athugið

Fyrst um sinn getur verið hálfógnvekjandi að reyna að útfæra einingamiðað JavaScript umhverfi, en það er þess virði! Prófaðu að skoða efnið frá React samfélaginu eða Vite Chat ef þér finnst þú ekki ná árangri.

Annað skref: Birtu React íhluti hvar sem er á síðunni

Í skrefinu á undan settum við þennan kóða efst í aðalskránni:

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

// Fjarlægjum núverandi efni.
document.body.innerHTML = '<div id="app"></div>';

// Birtum React íhlut þess í stað.
const root = createRoot(document.getElementById('app'));
root.render(<h1>Halló, heimur!</h1>);

En að sjálfsögðu viljum við ekki henda öllu efninu af síðunni!

Eyddu þessum kóða.

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: Þess í stað viltu sennilega birta React íhluti á ákveðnum stöðum. Opnaðu HTML síðuna (eða sniðmátið sem bakendinn útbýr) og bættu við einstöku id eigindi við hvaða merki sem er á síðunni, til dæmis:

<!-- ... einhvers staðar í skránni ... -->
<nav id="valmynd"></nav>
<!-- ... meira HTML ... -->

Með þessu móti geturðu fundið eininguna í HTML skránni með document.getElementById og fært createRoot hana til að birta React íhlut inni í henni:

Fork

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

function Valmynd() {
  // Síðar: útfærum raunverulegu valmyndina!
  return <h1>Halló frá React!</h1>;
}

const domHnútur = document.getElementById('valmynd');
const rót = createRoot(domHnútur);
rót.render(<Valmynd />);

Taktu eftir því að upprunalega HTML efnið í index.html er enn þar, en React íhluturinn Valmynd er nú innan í <nav id="valmynd"> í HTML skránni. Lestu skjalbúnaðinn fyrir createRoot til að kynna þér nánar hvernig hægt er að birta React íhluti inni í HTML síðu.

Það er algengt að byrja á að útfæra smærri gagnvirka íhluti eins og takka og hægt og rólega „færa sig ofar“ þar til öll síðan er útfærð í React. Ef þú nálgast það stig þá mælum við með því að flytja þig yfir í React ramma til að nýta React sem best.

Notkun á React Native í tiltæku forriti á heimavangi

Það er einnig hægt að byrja að nota React Native hægt og rólega. Ef þú ert með forrit fyrir Android (í Java eða Kotlin) eða iOS (í Objective-C eða Swift), fylgdu þá þessum leiðbeiningum til að bæta við virkni í React Native.

PreviousByrjaðu á nýju React verkefni NextUppsetning á ritli