React je programsko ogrodje za programiranje primarno front-end spletnih aplikacij. Za delo v Reactu pa je potrebno širše znanje spletnih in sorodnih tehnologij, čemur so namenje spodnje naloge in povezave za dodatno učenje.
Spodaj je kratek opis osnovnih pojmov in nekaj virov za dodatno učenje (določene video lekcije so plačljive, te lahko preskočiš in jih bomo postopoma poskušali zamenjati za brezplačne).
Poleg spodnjih povezav poskusi na spletu poiskati še druge boljše vire in jih predlagaj, da jih dodamo na seznam. Morda smo tudi izpustili kakšno pomembno temo. Vsebina tega dokumenta je namenjena začetnikom, tako da so komentarji začetnikov zelo zaželeni.
Na svojem računalniku namesti orodja za razvoj spletnih aplikacij. Sledi tudi navodilom na spodnjih povezavah za dodatne potrebne korake ob namestitvi.
Glej tudi konec tega dokumenta, poglavje "Orodja"
- Namestitev okolja Node - JS runtime okolje
- Yarn - namestitveno orodje
- VS Code - urejevalnik kode (glej navodila v nadaljevanju)
- GitHub Desktop - orodje za delo z izvorno kodo na GitHubu
- *Docker - trenutno preskoči, namesti v nadaljevanju
Dober vir raznih razlag in dokumentacije je tudi Mozilla MDN.
Za programiranje na spletu si poglej osnove spletnih tehnologij:
- HTML (zgradba strani) - kaj je HTML
- CSS (slog in oblikovanje) - kaj je CSS
- Javascript (izvajanje programov na spletu) - glej naslednje poglavje A.1. JavaScript
JavaScript je primarni jezik spleta. Za razumevanje te tehnologije si poglej lekcijo Dana Abramova (avtorja React-a), ki na primeru JavaScripta predstavi osnovne pojme in razmišljanja pri programiranju na splošno.
✅ Uvodna naloga: obdelaj vse lekcije Just-JavaScript. Vzemi si čas, obdelaj jih počasi in temeljito. Lahko jih tudi ponoviš, pomembno je, da se snov utrdi.
📢 Če spletnih tehnologij še ne poznaš dobro, pred nadaljevanjem poglej nalogo Izdelava spletne strani.
🔅 Dodatno lahko obdelaš še video lekcijo Create and Deploy a Basic Static HTML Website.
Za učenje ali osvežitev znanja o React-u si preglej spodnje vsebine:
- React Native Express (vsaj poglavja od 1 do 4)
- Main Concepts of React
- React Hooks
- React Context (Advanced)
Še nekaj vsebin:
✳️ Video: Osnove React-a (npr. gumb je pritisnjen) in podatki v komponenti (npr. asinhroni klic na strežnik za podatke)
🔅 Uporaba TypeScripta v React-u
Pomemben del spletnih aplikacij je prikaz in osveževanje podatkov, zato je potrebno razumeti, kako se podatki na spletu prenašajo.
Napogostejši način komunikacije v spletnih aplikacijah sta REST ali GraphQL. Z vidika podatkov je poleg komunikacije pomembno tudi, kako te podatke, ko jih enkrat imamo, v aplikaciji obdržimo in do njih dostopamo. Obstaja kar nekaj knjižnjic, ki rešujejo ti dve vprašanji.
- Za pridobivanje podatkov uporabljamo GraphQL način in knjižnico Tanstack Query.
- Za pošiljanje obrazcev uporabljam REST način in knjižnico Axios.
React Query je GraphQL knjižnica, ki olajša izvajanje podatkovnih poizvedb. Pomaga nam pri izdelavi klica, obdelavi napak, shranjevanju pridobljenih podatkov ipd...
- Video predstavitve s strani avtorja knjižnice
- React, GraphQL, TypeScript Tutorial - daljša video lekcija
Axios je orodje za izvajanje REST klicev - kot rečeno, trenutno uporabljamo REST način samo za klice, ki podatke spreminjajo (POST, PUT, DELETE), med tem ko za klice, ki podatke pridobivajo (GET) uporabljamo GraphQL klic. Razlog za to arhitekturo je v veliki praktični razliki (konfiguraciji klica) pridobivanja oz. pošiljanja podatkov.
Aplikacije se občiajno ne prične izdelovati s praznim listom papirja, ampak se uporabi že pripravljena ogrodja, v katerih so že rešena glavni vidiki delovanja aplikacij.
Pred nadaljevanjem obvezno obdelaj video lekcijo "Osnove React-a" zgoraj.
✳️ Primer spletnega ogrodja je Next.js. Poglej si seznam video lekcij in začni pri najlažjih.
Stanje aplikacije oz. State Machine je matematični opis poteka delovanja aplikacije, ki predpisuje, da je aplikacija v vsakem trenutku lahko v samo eni od v naprej dofiniranih faz. Vprašanje stanja aplikacije se pojavi pri čisto vsaki aplikaciji, zato je obvladovanje tega vprašanja za kakovost programske rešitve zelo pomembno.
Primer faz: "gumb je pritisnjen", "poteka prenos podatkov", "odprto je pop-up okno", "izvaja se neka računska analiza v ozadju" ...
Nadzor nad stanjem programerji pogosto rešujejo povsem nezavedno in intuitivno, brez posebnih orodij, vendar pri takem načinu hitro pride do nelogičnih situacij in napačnega delovanja aplikacije.
Primer napake: vzporedno se sprožita dva prenosa podatkov, uporabnik prekliče napačnega izmed niju. Primer definicije: "pričel se je prenos podatkov" -> prenos podatkov lahko bodisi uspe, bodisi spodleti, bodisi ga prekine uporabnik; druge operacije aplikacije so v tem času prepovedane.
Za React aplikacije je na voljo zelo dobra knjžnica XState s prav tako dobro dokumentacijo in vizualnim orodjem (Statecharts).
Za nadljnje raziskovanje t.i. State Machine koncepta si preberi Uvod v XState.
Namen naloge je dobiti vtis, kako React deluje in kako poteka proces izdelave spletne aplikacije od začetka do objave.
Glavni koraki naloge:
- v že pripravljenem delovnem okolju v oblaku preizkušaj pisanje React kode
- nastavi delovno okolje na svojem računalniku in ponovi rezultat iz prve točko v svojem lokalnem okolju
- poveži svoje lokalno okolje z oblačno storitvijo verziorniranja kode in vso kodo svojega projekta shrani na GitHub, končni izdelek pa objavi na javnem URL naslovu
- Spletno aplikacijo sestavljajo gradniki (v React-u jim rečemo komponente). Uporabi knjižnico Semantic UI, kjer so ti gradniki že pripravljeni za takojšnjo uporabo.
- To knjižnico bomo uporabili zaradi dobre dokumenatcije, ker poleg navodil vsebuje tudi vadnico za vsako komponento posebej, kjer ni potrebno ničesar inštalirati in že lahko preiskušaš React kodo v živo. Vsak primer kode v dokumentaciji ima v svojem okvirčku zgoraj desno gumb »Try it« - ki odpre izvorno kodo komponente in ga uporabi za raziskovanje delovanja Reacta in te knjižnice. Spreminjaj kodo in spremljaj, kaj se dogaja s kopmponento.
- V dokumentaciji si še posebej pozorno poglej gradnike za Form. Poglej tudi tudi elemente: Input, Dropdown, Label.
- Ustvari si svoj profil na strani Codesandbox in naredi svoj primer Semantic-UI aplikacije. Najlažje bo, da skopiraš primer neke Form komponente iz dokumentacije (klikneš gumb Codesandbox poleg komponente, na strani Codesandbox pa nato iz menija izbereš shrani, da aplikacijo shrani v tvoj profil).
- Na svojem primeru Codesandbox aplikacije uporabi čim več različnih elementov iz dokumentacije in komponentam nastavi različna začetna stanja (nastavi value, required, disabled, checked, color, size ...).
- Poskusi tudi implementirati gumb »Submit«, da recimo v poseben okvirček v aplikaciji izpiše vrednosti iz forme, kot lahko vidiš na tem primeru.
✅ Rezultat: pošlji povezavo do končanega Codesandbox projekta.
Vsaka React komponenta je v nekem notranjem stanju; npr. gumb je lahko pritisnjen, chekbox je lahko obkljukan, dropdown je lahko odprt ipd.
Kompleksnejše komponente imajo lahko širši nabor notranjih stanj, preproste komponente pa imajo lahko tudi samo eno stanje, ki se ne spreminja.
Stanje komponente lahko tudi preberemo, kadar to potrebujemo (recimo, ko pošljemo nek obrazec na strežnik), komponenti pa lahko to stanje seveda tudi spremenimo oz. nastavimo.
Spremembo stanja lahko opravimo kadar koli v življenjskem ciklu komponente: (1) ko se ta izriše na zaslon (začetno stanje), ali (2) ko je že živa na zaslonu (recimo da zaklenemo obrazec, med tem, ko se pošilja na strežnik).
V grobem obstajata dva vidika, kje je zapisano to stanje komponente...
- stanje komponente je izvorno shranjeno v komponenti sami
- stanje komponente je izvorno shranjeno izven komponente
...in kdo ga sme spreminjati:
- lahko ga spreminja komponenta sama (mutacija)
- lahko se spremeni "od zunaj" (iz starševske koponente)
Sprememba stanja "od zunaj" sproži, da se komponenta uniči in se izriše na novo z novim stanjem. To je osnovna filozofija Reacta, zaradi te značilnosti mu tudi rečemo, da je reaktiven - reagira na spremembe stanja. Zelo znan primer take reakcije je "Like" gumb. Ko pritisneš na "Like", se ikona praznega srčka uniči in na njeno mesto se izriše nova ikona polnega rdečega srčka. Ta proces ponovnega izrisa se zgodi tako hitro, da izginotja ikone niti ne opaziš in zato izgleda, da se je ikona pobarvala, dejansko pa je na njenem mestu sedaj druga ikona.
Mutacija komponente je poseben primer spremembe stanja, ko spremembo povzroči komponenta sama. To pomeni, da se v času življenja komponente, znotraj njene logike delovanja proži koda, ki povzroča samouničenje komponente in njen ponoven izris.
Naloga: Na primeru obrazcev (Form) preizkusi vmešavanje v komponento od zunaj.
- Poskušaj razumeti razliko med Controlled in Uncontrolled komponento, kot je to v dokumentaciji razloženo pri komponenti za Dropdown.
✅ Rezultat: Pripravi Form projekt v Codesandbox z elementi v Controlled načinu.
Ta korak naloge je sestavljen iz dveh delov:
- Projekt iz Codesandbox prestavi v lokalno delovno okolje.
- Izvorno kodo shrani oz. objavi v repozitoriju v oblaku (GitHub).
- Ustvari si GitHub profil in namesti GitHub Desktop aplikacijo, kot je opisano v navodilih na začetku dokumenta.
- Na GitHub ustvari nov repozitorij za to vajo. Uporabi template za »Node« projekte.
- Z GitHub Desktop programom kloniraj repozitorij na svoj računalnik v neko prazno mapo, kjer bo potekal razvoj aplikacije.
- Odpri ukazno vrstico (v VSCode/Terminal, ali
cmd...) in s create-react-app skripto pripravi začetno React okolje. (pazi samo, da, kjer je v navodilihnpmuporabljaš rajeyarn, glej navodila zgoraj za inštalacijo orodja yarn). - V svoj projekt dodaj knjižnico Semantic UI, kot je to razloženo v Dokumentaciji. Upoštevaj tisti del navodil, ki uporabljajo
yarn, torejyarn add .... - Z GitHub Desktop naredi svoj prvi
git commit, če slučajno še nisi (vsak komit opremi z ustreznim komentarjem, npr: "dodana knjižnica semantic-ui"). - Poženi projekt z
yarn startin odprilocalhost:3000 - Prični s kopiranjem koščkov kode iz Codesandbox v lokalni projekt. Popravljaj formo v živo v editorju (VS Code), dokler rezultat na
localhostni enak, kot ga imaš v svojem Codesandbox-u (izgled verjetno ne bo čisto enak, funkcionalnost pa mora biti enaka). - Spremembe kode sproti in pogosto objavljaj na GitHub-u.
✅ Rezultat: Sporoči naslov svojega javnega repozitorija na GitHubu.
Spletno stran/aplikacijo je najpreprosteje objaviti v obliki statičnih datotek, to je: datotek, ki na strežniku ne izvajajo nobenih operacij, ampak se zgolj prenesejo iz strežnika v brskalnik. Vsa morebitna koda aplikacije se potem izvaja na klientu.
Dandanes obstaja veliko ponudnikov brezplačnega statičnega gostovanja spletnih strani, kjer lahko svojo spletno stran objaviš in do nje dostopaš preko javno veljavnega URL naslova. En takih ponudnikov je GitHub s svojo storitvijo GitHub Pages.
- Pogoj za objavo svoje spletne strani na GitHub Pages je, da je projekt pripravljen kot statična HTML spletna stran. Za navodila glej [https://pages.github.com/].
- Preden svoj projekt (iz prejšnjih točk) pretvoriš v statično spletno stran (to bomo naredili v naslednji nalogi), naredi neko novo in čim bolj preprosto datotekko
index.html(npr. klasični "Hello World"). - To datoteko dodaj v svoj obstoječi repozitorij na GitHub-u po pravilih, ki veljajo za GitHub Pages in objavi.
- Preveri ali je testna HTML datoteka dostopna na javnem naslovu.
✅ Rezultat: Sporoči naslov svoje GitHub Pages spletne strani
Nadgradnja projekta na framework Next.js:
Spletna aplikacija je zelo širok pojem in zahteva širok spekter znanj in dopušča veliko različnih načinov izvedbe.
Da si olajšamo delo, za razvoj aplikacij pogosto uporabljamo ogrodja oz. frameworke, ki veliko tega dela opravijo za nas in nas usmerijo (omejijo) na neko preizkušeno in utrjeno pot.
Eno takih ogrodij je NextJS, ki omogoča mnogo funkcionalnosti, med drugim tudi izvoz React projekta v statično spletno stran.
- Po navodilih iz uradne dokumentacije dodaj Next.js v svoj projekt. Če ti je lažje začeti s praznim listom papirja, lahko postopek tudi obrneš in najprej začneš s svežim NextJS projektom in Semantic UI komponente dodaš v drugem koraku.
- Izvozi aplikacijo kot statično spletno stran.
- Prepiši svojo testno spletno stran (iz prejšnje naloge) na GitHub-u s to NextJS različico.
✅ Rezultat: Sporoči naslov spletne strani, narejene z NextJS, ki deluje na GitHub Pages.
Spodaj je naštetih nekaj orodij, ki se danes uporabljajo pri razvoju spletnih aplikacij.
- Node je JavaScript okolje, ki lahko samostojno živi znotraj operacijskega sistema, podobno, kot spletna stran živi znotraj brskalnika. Delo v Node okolju poteka v terminalu (ukazni vrstici). Ta terminal je najlažje uporabljati znotraj urejevalnikih kode (kot je npr. VS Code), kjer je taka terminalska lupina običajno že vgrajena v sam urejevalnik kode.
- Yarn - orodje za upravljanje Node okolja - Node aplikacije se običajno pripravijo kot inštalacijski paketi in objavijo v javni svetovni knjižnici (najbolj popularna je NPM), od koder jih potem lahko kdor koli namesti v svoj projekt. Za namestitev teh paketov in pripravo začetnega okolja aplikacije pa je potrebno posebno orodje - t.i. managerji. Yarn je en izmed takih managerjev.
- Git triki in nasveti - GIT je sistem verzioniranja kode oz. način, da lahko več oseb dela na istem projektu in brez večjih težav delajo na istih vrsticah kode. Pri delu z GIT sledimo principu: shranjuj pogosto in neprestano sinhroniziraj kodo z ostalimi. Za delo z git uporabljamo oblačno storitev GitHub (kjer si ustvari svoj profil, če ga še nimaš), ki poleg shranjevanja kode omogoča še vrsto drugih orodih: beleženje napak, zadolžitev in opravil, organiziranje dela po nalogah in projektih, ipd. Poleg GitHub-a obstajajo tudi druge podobne storitve: GitLab, Bitbucket ...
- Git - online knjiga - lekcije ki podrobneje in nazorno s slikami razložijo, kako Git deluje (lahko jih obiščeš tudi kasneje, ko naletiš na določeno vprašanje glede Git-a)
- Docker - tutorial na primeru Node.js aplikacije - Docker se uporablja kot okolje za inštalacijo in zaganjanje narejenih aplikacij. Docker omogoča, da lahko aplikacijo zaženemo neodvisno od tega, kako imamo pripravljen oz. inštlairan računalnik, na katerem aplikacija teče (aplikacija je izolirana od operacijskega sistema). V času razvoja Docer uporabljamo za testiranje vmesnih verzij aplikacij in simuliranje celotnega oblaka storitev, ki jih razvijamo. Sistem Docker-ja je dokaj kompleksen, za začetek je dovolj poznavanje osnovnih pojmov.
Za urejanje kode uporabljamo urejevalnik VS Code, ki vsebuje tudi ukazno vrstico (terminal), cel kup razširitev za lažje delo s projektom, kodo, GitHubom ... Z razliko od Visual Studia ali Eclipse to ni razvojno okolje, ampak samo urejevalnik kode.
Namestitev: code.visualstudio.com in nasveti za začetek uporabe.
Poglej si tudi bližnjice na tipkovnici za hitrejše delo s programom. Najbolj pogosta ja ctrl+p oz. cmd+p, ki prikliče ukazno vrstico. Znotraj nje pa potem napiši :40 za skok na 40. vrstico, ali > za začeket nekega ukaza, ali pa ime-datoteke za hitro odpiranje datotek.
Namesti nekaj dodatkov (samo kot predlog):
dbaeumer.vscode-eslint
arcanis.vscode-zipfs
esbenp.prettier-vscode
humao.rest-client
joelday.docthis
dsznajder.es7-react-js-snippets
vittorioromeo.expand-selection-to-scope
github.vscode-pull-request-github
eamodio.gitlens
xabikos.javascriptsnippets
christian-kohler.npm-intellisense
2gua.rainbow-brackets
shan.code-settings-sync (bekap nastavitev ali če delaš na več računalnikih)
wayou.vscode-todo-highlight
Ko pišemo kodo, uporabljamo samodjeno oblikovanje (formatiranje) s pluginom prettier. V nastavitvah vpiši v iskalnik prettier semi in odstrani kljukico. Formatter se sproži samodejno (ob copy/paste, shrani ...) ali ročno z Alt-Shift-F.