Postavljanje React projekta pomoću Create React App

React je jedna od najpopularnijih JavaScript knjižnica za razvoj front-end aplikacija. To je knjižnica otvorenog koda koju je izvorno razvio Facebook. React je brzo postao popularan za stvaranje brzih aplikacija s JSX – paradigmom programiranja koja kombinira JavaScript sa sintaksom sličnom HTML-u.

Prethodno je postavljanje React projekta bio složen proces. Zahtijevalo je ručno konfiguriranje sljedećih komponenti:

• Sustav za izgradnju
• Transpiler koda (pretvara moderne sintakse u kod čitljiv pregledniku)
• Osnovna struktura direktorija za projekt

Srećom, ti su dani davno prošli, zahvaljujući Create React App. To je prekrasan alat koji automatizira sve ove korake. Create React App brine se za transpilaciju koda, analizu koda (linting), testiranje i sustave izgradnje. Osim toga, dolazi s poslužiteljem koji podržava vruće ponovno učitavanje (hot reloading), što znači osvježavanje web stranica kako se unose promjene. Naravno, sve se to radi unutar organizirane strukture direktorija.

Ukratko, nema potrebe prolaziti kroz ručni rad konfiguriranja sustava za izgradnju kao što je Webpack, ili transpilera poput Babel. Uz manje stvari o kojima morate brinuti, slobodni ste se u potpunosti usredotočiti na front-end razvoj. Create React App omogućuje vam da započnete s Reactom uz minimalnu pripremu.

U ovom vodiču, prikazat ćemo kako koristiti Create React App i pokrenuti osnovnu React aplikaciju. Ona može poslužiti kao temelj za bilo koji budući projekt aplikacije.

Preduvjeti

Za izvođenje koraka prikazanih u ovom vodiču, morat ćete prethodno konfigurirati sljedeći softver.

• • Ispravno konfiguriran Ubuntu poslužitelj. Možete pratiti korake konfiguriranja Ubuntu poslužitelja na CloudSigma platformi.
  • Najnovija verzija Node.js instalirana. Ovdje je korak-po-korak vodič o instaliranju Node.js-a na Ubuntu.

Korak 1: Stvorite namjenski direktorij npm projekta

Za Node.js pakete, npm je zadani upravitelj paketa. Koristit ćemo npm za stvaranje namjenskog direktorija projekta. On će ugostiti važne datoteke poput package.json koje pohranjuju sve metapodatke o projektu i dodatne Node.js module ovisnosti. JSON je standardni format dijeljenja podataka koji se temelji na JavaScript objektima. Pogledajte ovaj vodič ako želite saznati više o JSON-u.

Prvo stvorite namjenski direktorij:

Zatim ćemo reći npm da pokrene razvojno okruženje unutar datoteke. To će stvoriti package.json datoteku potrebnu za projekt. Promijenite trenutni direktorij:

Pokrenite naredbu npm initnaredbu:

Imajte na umu da ako želite da ovaj direktorij bude dio git repozitorija, preporučuje se da ga prvo postavite. Skripta za inicijalizaciju automatski će ga otkriti i konfigurirati sve u skladu s tim. Kada završite, u direktoriju bi trebala biti package.json datoteka. Provjerite je pomoću uređivača teksta:

Korak 2: Stvorite React projekt pomoću Create React App

U ovom koraku pozvat ćemo Create React App kako bismo uspostavili naš uzorak React projekta. Ova skripta će kopirati sve potrebno u novi direktorij zajedno sa svim ovisnostima. Upravitelj paketa npm također dolazi s alatom npx. Koristi se za pokretanje izvršnih paketa. Koristit ćemo ga za pokretanje skripte Create React App bez stvarnog preuzimanja projekta.

Izvršenje će pokrenuti create-react-app u navedenom direktoriju. Također će pokrenuti npm install naredbe za instalaciju ovisnosti. Radi lakšeg korištenja, koristit ćemo naziv cloudsigma-react-react-tutorial. Pokrenite sljedeću naredbu:

Na kraju procesa vidjet ćete sljedeću obavijest. To je poruka o uspjehu ako je instalacija prošla uspješno. Također javlja lokaciju na kojoj je projekt kreiran.

Korak 3: Primijenite React-Scripts

Sada ćemo imati kratak pregled raznih react-skripti koje su instalirane tijekom instalacije.

• • Pokrenut ćemo test skriptu za izvršavanje testnog koda.
  • Skripta build stvorit će minificiranu verziju našeg projekta (za produkcijsko okruženje).
  • Naposljetku, skripta eject nudi potpunu kontrolu nad prilagodbom.

Prvo provjerite sadržaj direktorija React projekta:

Ovdje je opis svake datoteke:

• • node_modules/: Ovaj direktorij sadrži sve vanjske JavaScript biblioteke koje će aplikacija koristiti. Rijetko je potrebno ovdje bilo što mijenjati.
  • public/: Sadrži neke osnovne HTML, JSON i slikovne datoteke. Služi kao korijen projekta.
  • src/: Ovaj direktorij sadrži React JavaScript kodove za naš projekt. Ovdje ćemo provesti većinu vremena. Detaljnije ćemo istražiti ovaj direktorij u sljedećem dijelu vodiča.
  • .gitignore: To je datoteka koja opisuje koje će direktorije git ignorirati, na primjer, node_modules direktorij. Općenito, bolje je isključiti direktorije koji sadrže velike datoteke ili log datoteke koje nije potrebno uključiti u kontrolu verzija. U ovom slučaju, također će uključivati neke direktorije specifične za React.
  • README.md: To je markdown datoteka koja sadrži mnogo korisnih informacija o Create React App. Na primjer, uključuje sažetak naredbi i poveznice za naprednu konfiguraciju. Za sada nemamo posla s njom. Međutim, kako projekt napreduje, dodavat ćete više dokumentacije o projektu.

Datoteke package.json i package-lock.json koristi npm. Prilikom pokretanja početne npx naredbe, stvoren je osnovni projekt. Kada su instalirane dodatne ovisnosti, stvorena je package-lock.json. npm koristi package-lock.json kako bi osigurao da paketi odgovaraju točnim verzijama. Na taj način, ako netko drugi instalira vaš projekt, također dobiva identične ovisnosti. Budući da se stvara i upravlja automatski, rijetko ga trebate dirati.

Posljednja datoteka o kojoj moramo govoriti je package.json. Sadrži metapodatke o projektu. Na primjer, metapodaci mogu uključivati naziv projekta, broj verzije i ovisnosti. Također uključuje skripte koje možete koristiti za pokretanje projekta. Provjerite sadržaj package.json datoteke:

To je JSON datoteka s raznim objektima. Pogledajte objekt scripts. Sadrži četiri različite skripte:

• • start
  • build
  • test
  • eject

Ove skripte su navedene prema važnosti. Skripta start pokreće lokalni razvojni poslužitelj. Zatim ćemo detaljnije objasniti kako možete koristiti ostatak skripti.

• • The Build Script

Za pokretanje npm skripte, struktura naredbe je sljedeća:

Za pokretanje build skripte, koristite sljedeću naredbu:

Pokrenut će proces kompilacije koda u upotrebljivi paket. Kada završi, provjerite izlazni direktorij:

Primijetite da je dostupan novi direktorij build/. Sadrži minificiranu i optimiziranu verziju ostalih datoteka. Preporučuje se staviti ga u .gitignore datoteku jer ga uvijek možemo generirati pomoću build skripte.

• • The Test Script

Skripta test jedna je od onih skripti koje ne zahtijevaju parametar run kako bi ih npm pokrelo. Međutim, i dalje će raditi sasvim u redu s njim. Kada se pokrene, ova će skripta pokrenuti pokretač testova pod nazivom Jest. Tester traži bilo koju projektnu datoteku s ekstenzijama .spec.js ili test.js i pokreće te datoteke.

Sljedeća npm naredba pokrenut će test skriptu:

Postoji nekoliko stvari koje treba uočiti u izlazu. Sjećate se da pokretač testova traži samo datoteke s određenim ekstenzijama? U ovom slučaju postoji samo jedan testni skup (samo jedna datoteka s .test.js ekstenziju). Sadrži samo jedan test. Jest može automatski otkriti testove u hijerarhiji koda, tako da možete slobodno ugnijezditi testove u direktorij.

Osim toga, Jest ne pokreće test samo jednom i zatim završava. On nastavlja pokretati test u terminalu. Ako se unesu bilo kakve promjene u izvorni kod, ponovno će pokrenuti testove. Jest također omogućuje ograničavanje testova koji se pokreću. Na primjer, pritiskom na 0 možete reći Jestu da testira samo one datoteke koje su promijenjene. Kako testni paketi rastu, ova opcija štedi puno vremena. Za izlazak iz Jest pokretača testova, pritisnite q.

• • Eject skripta

Skripta eject kopira sve ovisnosti i konfiguracijske datoteke u projekt, nudeći vam potpunu kontrolu nad kodom. Međutim, time uklanjate projekt iz integriranog lanca alata Create React App. Jednom kada se pokrene, nema načina da se to poništi.

Prednost Create React App-a je u tome što preuzima teret brojnih konfiguracija. Izgradnja bilo koje moderne JavaScript aplikacije zahtijeva mnogo alata koji rade zajedno. Create React App upravlja svim konfiguracijama umjesto vas, pa izbacivanje projekta znači da nakon toga sve morate raditi ručno.

Jedan primjetan nedostatak Create React App-a je taj što, budući da sam upravlja svim konfiguracijama, ne nudi potpunu prilagodbu projekta. Za većinu projekata to nije problem. Međutim, ako želite preuzeti potpunu kontrolu nad projektom, morat ćete izbaciti kod. Nakon izbacivanja, nećete se moći ažurirati na nove verzije Create React App-a. Morat ćete ručno upravljati svim poboljšanjima.

Korak 4: Pokretanje poslužitelja

Sada ćemo pokrenuti lokalni poslužitelj i pokrenuti projekt u web pregledniku. Za pokretanje poslužitelja imamo još jednu skriptu pri ruci. Izvršavanje iste ne zahtijeva npm run naredbu. Kada se pokrene, skripta pokreće lokalni poslužitelj, pokreće kod projekta, pokreće nadzornik (watcher) i osluškuje promjene u kodu. Promjene se izravno prikazuju u pregledniku. Sljedeća naredba će pokrenuti poslužitelj:

Izlaz će prikazati URL za posjet projektu u pregledniku. Također će prikazati razne informacije o pokrenutom projektu. Otvorite URL u pregledniku:

Kao što izlaz pokazuje, Create React App koristi port 3000 za posluživanje projekta. Ako je port već bio u upotrebi, Create React App će koristiti sljedeći dostupan port. Ako imate konfiguriran vatrozid, on mora dopustiti promet prema portu 3000 (ili portu koji Create React App javi). Možete saznati više o upravljanju UFW vatrozidom ovdje.

Za izlazak iz poslužitelja, pritisnite Ctrl+C u prozoru terminala. To će prekinuti pokrenuti proces (instancu poslužitelja).

Korak 5: Modifikacija početne stranice

Zatim ćemo naučiti kako modificirati kodove pohranjene u public/ direktoriju. On sadrži osnovnu HTML stranicu i služi kao korijen projekta. Iako ga možda nećete morati dalje uređivati u budućnosti, on služi kao osnova projekta.

Prvo pokrenite poslužitelj s npm, a zatim prijeđite u public/ direktorij:

Direktorij će sadržavati datoteke poput favicon.ico, logo192.png, logo512.png, itd. To su ikone koje bi korisnik koji posjećuje web stranicu vidio na svojoj kartici, pregledniku ili telefonu. Preglednik će automatski odabrati onu odgovarajuće veličine. S vremenom ćete ih zamijeniti ikonama prikladnima za vaš projekt. Za sada ćemo ih ostaviti kako jesu.

Datoteka manifest.json sadrži strukturirani skup metadata. Opisuje projekt, navodi dostupne ikone i još mnogo toga.

Datoteka robots.txt sadrži informacije za web pretraživače. Web pretraživači “puzaju” po svjetskoj mreži (World Wide Web), indeksirajući stranice za tražilice. Nema potrebe za izmjenom datoteke osim ako nemate poseban razlog za to. Na primjer, možda želite učiniti određene URL-ove do specifičnog sadržaja teže dostupnima. Dodajte lokaciju u robots.txti tražilice je neće indeksirati.

Datoteka index.html je korijen naše aplikacije. Kad god pristupate aplikaciji, ovo je datoteka koja se poslužuje. To je datoteka koju vidite na zaslonu. Pogledajmo je nakratko. Otvorite je u uređivaču teksta:

To je prilično kratka datoteka. Primijetite da nema slika ni riječi u <body>. React gradi te sadržaje pomoću vlastitog pogona i ubacuje ih pomoću JavaScripta. Međutim, React mora znati gdje ubaciti kod. Datoteka index.html služi toj svrsi.

Promijenimo <title> u Moja React aplikacija:

Zatim spremite datoteku i zatvorite uređivač. Sada provjerite web-stranicu u pregledniku:

Kao što vidite, naslov kartice promijenjen je u Moja React aplikacija. Ako se nije automatski promijenio, ponovno učitajte stranicu pritiskom na F5 ili Ctrl+R.

Vratimo se u uređivač teksta. Svi React projekti must start od korijenskog elementa. Može ih biti više od jednog na jednoj stranici. Međutim, barem jedan je obavezan. On govori Reactu gdje da stavi sve generirane HTML kodove. U našem index.html, pronađite lokaciju elementa <div id="root">. To je <div> koji će React koristiti za buduće promjene. Pokušajte promijeniti id vrijednost s root na base:

 

 

Nakon toga ponovno učitajte stranicu u pregledniku. Neće prikazati nikakav sadržaj. Kao što Web Developer Tools u Firefoxu prikazuje, javlja se pogreška:

Vratite se u uređivač teksta i promijenite vrijednost id natrag na root:

Korak 6: Oznaka naslova i promjene stiliziranja

Do sada smo pokrenuli lokalni poslužitelj i napravili male promjene u korijenskoj HTML datoteci. Sada ćemo raditi s React komponentama koje se nalaze u src/ direktoriju. Unijet ćemo promjene u CSS i JavaScript kod. Promjene će se automatski primijeniti pomoću vrućeg ponovnog učitavanja.

Ako je poslužitelj zaustavljen, pokrenite ga pomoću npm. Zatim pogledajte sadržaj direktorija src/ :

Ovdje se nalazi više JavaScript i CSS datoteka. Proći ćemo kroz njih jednu po jednu.

• ServiceWorker.js

To je važna datoteka ako želite izraditi progresivne web-aplikacije. Ovaj service worker nudi razne funkcionalnosti poput push obavijesti, izvanmrežnog predmemoriranja itd. Za sada ćemo ga ostaviti kakav jest.

• SetupTests.js and App.test.js

Kao što naziv ovih datoteka sugerira, one se koriste za testiranje datoteka. Kad god bismo pokrenuli test skriptu pomoću npm, ona bi pokrenula ove datoteke. Datoteka setupTests.js sadrži nekoliko prilagođenih expect metoda.

Pogledajmo App.test.js. Otvorite je u uređivaču teksta:

Sadrži osnovni test koji traži da fraza learn react bude prisutna u dokumentu. Ako imate otvorenu karticu preglednika, možete vidjeti tu frazu na stranici. Za razliku od ostalih jediničnih testiranja, React testovi su drugačiji. Budući da komponente mogu uključivati vizualne informacije poput označavanja (i logike za manipulaciju podacima), tradicionalno jedinično testiranje ne funkcionira jednostavno. U tom smislu, React testiranje se bolje opisuje kao oblik funkcionalnog testiranja ili testiranja integracije.

• CSS datoteke

Dostupne su različite datoteke za stiliziranje: App.css, index.css, i logo.svg. Možete slijediti više metoda za stiliziranje u Reactu. Najlakši način je pisanje običnog CSS-a jer nije potrebna dodatna konfiguracija.

Dopušteno vam je izravno uvesti CSS u komponentu. To omogućuje dijeljenje CSS datoteka tako da se primjenjuju samo na pojedinačnu komponentu. Zapravo ne odvajate CSS od JavaScripta. Umjesto toga, grupirate sve relevantne komponente (CSS, JavaScript, slike i označavanje) zajedno.

Otvorite App.css pomoću uređivača teksta:

To je standardna CSS datoteka bez posebnih CSS pretprocesora. Možete ih dodati kasnije ako želite. Create React App nastoji biti neutralan dok nudi solidno iskustvo odmah nakon instalacije.

Napravimo promjenu i pogledajmo je na djelu. Promijenite vrijednost pozadinske-boje u plavu:

Provjerite promjenu u pregledniku:

• • Index.js

Sada je vrijeme za promjene u React JavaScript kodu. Otvorite index.js pomoću uređivača teksta:

Na vrhu se uvozi React, ReactDOM, index.css, App, i serviceWorker. Uvozom React, povlačimo kod potreban za pretvaranje JSX-a u JavaScript. ReactDOM je kod koji povezuje naš React kod s osnovnim elementom ( index.html, na primjer). Pogledajte sljedeći redak:

To nalaže Reactu da pronađe id s oznakom root i tamo umetne React kodove. <App/> je korijenski element i sve se grana od tamo.

Primijetite da smo također uvezli CSS datoteke (poput index.css) ali zapravo nismo ništa učinili s njima. Uvozom zapravo govorimo Webpack putem React skripti da uključi CSS kodove u konačni kompajlirani paket. U suprotnom se CSS stilovi neće prikazati.

• App.js

Zatim ćemo pogledati App.js. Otvorite ga u uređivaču teksta:

 

Pogledajmo kako promjena njegovog sadržaja utječe na naš projekt. Promijenite sadržaj <p>oznake:

Zatim spremite datoteku i provjerite promjene u pregledniku:

Evo ga! Napravili ste svoje prve izmjene React komponente!

Treba primijetiti još jednu stvar. Pogledajte element <img>:

Primijetite da se logo prosljeđuje unutar vitičastih zagrada. Kad god prosljeđujete atribute (koji nisu nizovi znakova ili brojevi), oni moraju biti proslijeđeni unutar vitičastih zagrada. Tada će ih React tretirati kao JavaScript objekte umjesto kao nizove znakova.

U ovom slučaju, aplikacija zapravo ne uvozi sliku. Umjesto toga, to je referenca na sliku. Kada Webpack izgradi projekt, postavlja sliku na odgovarajuće mjesto. To možemo provjeriti u pregledniku. Otvorite Alate za web programere u Firefoxu:

Webpack želi dodijeliti jedinstvene putanje datoteka za sve slike. So, čak i ako su slike uvezene s istim nazivom, imat će različite putanje.

Korak 7: Izgradnja projekta

U ovom koraku naučit ćemo kako kompajlirati projekt u paket spreman za implementaciju. Pokrenite terminal i pokrenite skriptu build projekta:

Kompajler će stvoriti namjenski direktorij build/gdje će smjestiti izlaz. Da biste vidjeli što proces kompajliranja radi, otvorite datoteku index.html iz build/direktorija:

Kao što vidite, sav kod je kompajliran i minificiran u najmanje moguće upotrebljivo stanje. Čitljivost nije važna jer to nije dio koda namijenjen javnosti. Minificirani kodovi zauzimaju manje prostora dok zadržavaju sve svoje funkcionalnosti. Za razliku od jezika u kojima su razmaci vrlo važni (Python, na primjer), web jezici (HTML, CSS i JavaScript) ne zahtijevaju pravilan razmak da bi ih preglednik mogao interpretirati.

Završne misli

U ovom smo vodiču uspješno prikazali kako stvoriti React aplikaciju. Također smo pokazali neke osnovne konfiguracije pomoću JavaScript alata za izgradnju bez složenih tehničkih detalja. To je ključna vrijednost koju nudi Create React App. Ne morate znati sve da biste započeli s Reactom. Dopušteno vam je da ne učite komplicirane korake izgradnje dok se fokusirate isključivo na React kod.

Ovdje smo također pokazali kako pokrenuti, testirati i izgraditi React projekt. Ove su naredbe ključne za projekte svih veličina.

Sretno programiranje!