Kuidas teisendada ükskõik millist veebilehte React veebileheks

Järgnev on harjutus, mis teisendab mis tahes HTML-i veebisaidi ReactJS-i komponendil põhinevaks veebisaidiks / rakenduseks. Kui ehitate uhiuut ühelehelist rakendust ja vajate lähtepunkti, on see artikkel teie jaoks.

Ehkki ainult HTML-i, CSS-i ja Javascripti tundva veebisaidi loomine on rahuldav, tasub mainida, et järgmised ettevõtted on otsustanud üle minna Reacti veebisaidile:

  • Airbnb
  • Dropbox
  • Bleacheri aruanne
  • Facebook (milline üllatus!)
  • Netflix

ja mitmed teised nende sugupuude ettevõtted ... See on väga oluline suundumus, millele tähelepanu pöörata, kuna enamus tööpakkumisi pealkirjaga „Veebiarendajat vajatakse” soovib, et te teaksite, kuidas luua kiire üheleheline veebisait või rakendus, nagu ülalpool mainitud .

See artikkel näitab teile, kuidas selleni jõuda. Selle ülesande täitmiseks kasutame ColorLibi malle. Kohustustest loobumine: autoriõigusega seotud põhjustel on need mallid mõeldud ainult harjutamiseks ega ole mõeldud teie uueks veebisaidiks, välja arvatud juhul, kui olete nõus hoidma jaluse krediiti nagu mainitud, kui klõpsate nupul „Laadi alla”, või kui olete nõus malli eest otse maksma .

  1. Laadige alla järgmine loominguline mall, kuna see on tavaline veebisait, mille teisendame reaalajaks
  2. Looge uus React rakendus, mis käitab oma terminalis või konsoolis järgmisi käske:
nxx loo-reageeri-rakendus minu-reageeri
cd my-reaktapp
npm algus

MÄRKUS. Teil peab olema sõlme versioon suurem kui 6.0 ja NPM-i versioon vähemalt 5.2.

Asendage minu reageerija valitud rakenduse nimega. Kui olete ülaltoodud käsu käivitanud, peaks teie server käitama ja käivitama keerleva React logo ja taustaga veebilehe. Kõik teie ressursid asuvad kaustas my -reatapp / public.

3. Teisaldage kõik kaustad (css /, fonts /, img /, js /) oma loominguliselt mallilt oma React projekti avalikku kausta. Peate need viited lisama oma React rakenduse avalikku / index.html faili.

Pärast ressursside loominguliselt mallilt rakendusele teisaldamist avame mõlemad nende vastavad index.html-failid. Kopeerige faili malli index.html stiili- ja fontviited rakenduse omadele.

Ärge unustage kopeerida ka viited faili alt.

Lõpptulemus peaks välja nägema järgmine:

Kui olete selle sammu lõpule viinud, on kogu mallide funktsionaalsus üle viidud teie uude ReactJS-i rakendusse. Kogu teie veebileht manustatakse ülaltoodud sõlme

. Nüüd lõbusa osa jaoks.

4. Nüüd on aeg teisendada paigutus komponendiks. Avage fail /src/App.js oma rakenduses, kus asub teie peamine komponent. Selles failis näete funktsiooni App () ja tagastamisavaldust, mis sisaldab ÜHE sõlmega HTML-i koos React logoga, mis kuvati serveri käivitamisel.

See, mida me järgmisena teeme, on täiesti vabatahtlik, kuid midagi, mida eelistaksin, on selle rakenduse funktsiooni teisendamine rakendusklassiks. Kui te ei saa sellest aru, vaadake funktsioonid ja klassid üle dokumentatsioonis. Pikk lugu lühike, meie:

  • Funktsiooni App () muutmine klassi App laiendab rakendust React.Component
  • Andke klassirakendusele üks renderdus () funktsioon
  • Kopeerige funktsiooni App () tagastamise avaldus funktsiooni App Render () klassi

Lõpptulemus peaks välja nägema järgmine:

Selle tulemusel peaks meil olema sama paigutus nagu varem, kui ketrav React logo on endiselt ekraani keskel. Selle komponendi klassiks teisendamise kaudu saame anda rakenduse oleku, mis võib olla kriitiline omadus, kui soovite oma veebisaiti dünaamilisemaks muuta. Samuti lubatakse meile juurdepääs Reaketi elutsüklimeetoditele, mis võimaldavad meil kinnistada loogikat komponentide paigaldamise ja eemaldamise sündmuste vahel.

5. Järgmisena alustame selle komponendi sisu lisamist. Esiteks eemaldage veebilehe tühjendamiseks päisesõlm ja nende lapsed

Kui oleme komponendi tühjendanud, siis pöördume tagasi loomingulises mallis olevasse index.html. Kopeerime kõik elemendis kõik ja kleepime ülaltoodud sõlme

oma React projekti. Siit algab lõbus ja näeme lugematuid vigu. Kuna valisime üsna suure malli (parem praktika jaoks), võtab see pisut kannatlikkust. Vigade kustutamiseks toimige järgmiselt.

  • Veenduge, et te ei kopeerinud silte