Front-end arendus React baasil

See põhjalik front-end arenduse kursus Reacti baasil õpetab osalejatele kaasaegseid veebitehnoloogiaid, sealhulgas HTML5, CSS3, JavaScripti, TypeScripti ja Reacti raamistikku.

Koolituse eesmärgid:

• Omandada praktilised oskused frontend-disainerina.
• Saada praktilised teadmised frontend-arendaja spetsiaalsete tööriistade kohta.
• Omandada teadmised HTML5, CSS3/SASS-i veebilehtede kujundamisest.
• Õppida programmeerima JavaScripti ja kasutama React raamistikku.
• Õppida integreerima Bootstrap 5 veebilehele ja kasutama Bootstrap 5 võimalusi veebilehe kujundamisel.
• Õppida programmeerima TypeScripti ja rakendama neid oskusi Reactis.
• Omandada oskus luua interaktiivseid veebilehti Reactiga.
• Õppida tarbima API-teenuseid Reactis.

Sihtgrupp:
Koolitus sobib ideaalselt neile, kes soovivad alustada karjääri front-end arendajana või täiendada oma oskusi veebilehtede loomisel ja disainimisel. Minigruppides toimuv õpe võimaldab personaalset lähenemist ja praktilist kogemust, sealhulgas interaktiivsete veebilehtede loomist ja API-teenuste integreerimist. Kursuse lõpus oskavad osalejad iseseisvalt kujundada ja programmeerida kaasaegseid veebirakendusi, kasutades Bootstrap 5 ja SASS-i võimalusi.

Õppe alustamise tingimused: Kursuse alustamiseks on vajalik esmane arvuti kasutamise oskus.

Maht: 120 akadeemilist tundi, millest 60 on auditoorse ja praktilise töö tunnid. Lisaks on vaja vähemalt 60 tundi iseseisvat praktilist tööd.

Koolituse sisu:

• GIT-i põhiteadmised (2 ak.tundi)
  • GIT-projekti initsialiseerimine.
  • Projekti loomine platvormidel gitlab.com ja github.com.
  • Konfliktide lahendamise stsenaariumid arenduses.
  • Harude loomine ja ühendamine.
  • Projekti avaldamine gitlab.com või github.com keskserveris.
• Teadmiste kontroll (1 akadeemiline tund):
  • Õpilane registreerub iseseisvalt gitlab.com või github.com keskkonnas.
  • Loob isikliku projekti lokaalselt ja keskserveris.
  • Kasutab GIT-i käske projekti avaldamiseks.
  • Lõpetab projekti avaldamise, koostades README-faili ja edastab selle õpetajale kloonimiseks.
• HTML-i põhiteadmised (2 ak.tundi)
  • Sildid: loendid, tabelid, vormid.
  • Stiilid: klassid, ID-d (siltide sidumine CSS-iga).
• CSS-i põhiteadmised (2 ak.tundi)
  • Stiilikeele süntaks.
  • Ühe ja mitme HTML-elemendi manipuleerimine.
  • Objektide vormindamine: värvid, fondid, veerised, läbipaistvus, varjud, geomeetrilised kujundid.
  • Lehekülje skeleti loomine ja objektide struktuur (päis, sektsioon, külgpaan, jalus).
  • Adaptiivne kujundus (responsive design) erinevatele seadmetele (mobiil, tahvel, monitor).
• Praktilised tunnid adaptiivse kujunduse kohta (4 ak.tundi)
  • Ülesanne 1 (õpetajaga): lehekülje kujundamine pildi järgi.
  • Ülesanne 2 (õpetajaga): lehekülje skeleti loomine (menüü, disainielemendid jne).
• Teadmiste kontroll (3 ak.tundi):
  • Õpilane saab pildi kujul maketi.
  • Kasutab HTML5 ja CSS3 teadmisi maketi kujundamiseks. Õpetaja hindab maketi vastavust ja praktilistel tundidel õpitud oskuste kasutamist.
• JavaScripti põhiteadmised (6 ak.tundi)
• Muutujad (var, let), tüübid, tüübiteisendused.
  • Funktsioonid ja nende kasutamine.
  • Massiivid, objektid (JSON-formaat).
  • Tsüklid (for, foreach), objektide tsüklid.
  • Sündmused ja nende sidumine HTML-elementidega.
• Praktilised tunnid JavaScriptiga (4 ak.tundi)
  • Ülesanne 1 (õpetajaga): analoogkella loomine (HTML, CSS, JavaScript).
  • Ülesanne 2 (õpetajaga): maandumislehe loomine, mälu ja seanssidega töötamine.
• Teadmiste kontroll (3 akadeemilist tundi):
  • Õpilane saab rakenduse kirjelduse, mida tuleb luua JavaScripti abil.
  • Kasutab funktsioonide, klasside, sündmuste sidumise ja HTML-siltide manipuleerimise teadmisi.
  • Õpetaja hindab rakenduse korrektsust ja praktilistel tundidel õpitud osade olemasolu.
• Bootstrap 5 võimalused ja süntaks (2 akadeemilist tundi)
  • Bootstrap 5 paigaldamine HTML-lehele (ka NodeJS ja NPM kaudu).
  • Veebilehe plokkide kujundamine Grid Systemi abil.
  • Flexbox ja plokkide positsioneerimine.
  • Komponendid.
• Praktilised tunnid Bootstrap 5-ga (3 ak.tundi)
  • Ülesanne 1 (õpetajaga): pildigalerii või tootekataloogi loomine.
  • Ülesanne 2 (õpetajaga): komponentide programmeerimine JavaScripti ja jQuery abil.
  • Ülesanne 3 (õpetajaga): modaalakna loomine.
  • Ülesanne 4 (õpetajaga): lehekülje kujundamine Bootstrap 5 abil.
• Teadmiste kontroll (3 akadeemilist tundi):
  • Õpilane saab pildi kujul maketi.
  • Kasutab Bootstrap 5 ja jQuery teadmisi maketi kujundamiseks.
  • Õpetaja hindab maketi vastavust ja praktilistel tundidel õpitud oskuste kasutamist.
• TypeScript kui React’i alus (3 ak.tundi)
  • TypeScripti kiirstart ja ökosüsteem.
  • Tüübisüsteem: deklareerimise ulatus, põhitäübid, andmestruktuurid, liidesed.
  • Üldistused (Generics), tingimuslikud tüübid (Conditional Types), vastendatud tüübid (Mapped Types).
  • Funktsioonid ja klassid: tüübistamise eripärad, funktsioonide ülekoormamine.
  • OOP TypeScriptis: juurdepääsu modifikaatorid, abstraktsed klassid, miksiinid.
  • Dekoraatorid ja annotatsioonid.
• Praktilised tunnid TypeScriptiga (2 ak.tundi)
• Ülesanne 1 (õpetajaga): oma dekoraatorite ja annotatsioonide kirjutamine (logimine, vigade käsitlemine, tüübikontroll, valideerimine).
• SASS kui React’i alus (2 ak.tundi)
  • Miks kasutada SASS/SCSS-i CSS-i asemel?
  • SASS-i eeltöötleja.
  • Süntaks: eeldused, muutujad, pesastatud reeglid, ampersand.
  • Miksiinid.
  • Aritmeetilised operatsioonid ja võrdlusoperaatorid.
  • Juhtimisvoo operaatorid: if(), @if, @for, @each, @while.
  • Funktsioonid ja infrastruktuur.
• Teadmiste kontroll (3 ak.tundi):
  • Õpilane saab rakenduse kirjelduse, mida tuleb luua TypeScripti ja SASS-i abil.
  • Kasutab funktsioonide, klasside, sündmuste sidumise ja HTML-siltide manipuleerimise teadmisi.
  • Õpetaja hindab rakenduse korrektsust ja praktilistel tundidel õpitud osade olemasolu.
• React: põhioskused ja edasijõudnud tase (12 ak.tundi)
  • Komponendid, stiilid, mallid.
  • Andmete ja sündmuste sidumine, stringi interpolatsioon.
  • Direktiivid: ngIf, ngFor, ngStyle, ngClass.
  • Piped (pipes).
  • Sõltuvuste süstimine, teenused, marsruutimine, moodulid.
  • Reaktiivsed vormid ja mallipõhised vormid.
  • HTTP-päringud.
• Teadmiste kontroll (3 ak.tundi):
  • Õpilane saab rakenduse kirjelduse ja maketi pildi kujul, mida tuleb luua Reactiga.
  • Kasutab funktsioonide, klasside, sündmuste sidumise, HTML-siltide ja SASS-stiilide manipuleerimise teadmisi.
  • Õpetaja hindab rakenduse korrektsust ja praktilistel tundidel õpitud osade olemasolu.

Kursuse lõpuks õpilane:

• Oskab luua veebilehe disaini, kasutades frontend-arenduse võtteid.
• Oskab kujundada veebilehte HTML5, CSS3/SASS-i abil.
• Oskab kasutada Bootstrap 5 raamistikku.
• Tunneb frontend-arendaja spetsiaalseid tööriistu.
• Oskab programmeerida JavaScripti ja kasutada React raamistikku.
• Oskab programmeerida TypeScripti ja rakendada seda Reactis.
• Oskab luua interaktiivseid veebilehti Reactiga.
• Oskab tarbida API-teenuseid Reactis.

Õpilase teadmiste hindamine. Pärast teoreetilise ja praktilise osa läbimist peab õpilane sooritama teadmiste kontroll. Teadmiste kontroll koosneb järgmistest tegevustest:

• Õpilasele antakse pilt, millel on kujutatud disainielement, mall, malli osa või muu frontend-arendusega seotud ülesanne.
• Õpilane peab täpselt reprodutseerima pildil nähtu, kasutades HTML5, CSS3, JavaScripti või Reactit. Võib kasutada praktilistel tundidel omandatud teadmisi ja iseseisva töö käigus saadud oskusi.
• Teadmiste kontroll tehakse iseseisvalt klassiruumis õpetaja juuresolekul.
• Teadmiste kontroll ajal on lubatud kasutada internetti ja mobiiltelefoni teabe ning dokumentatsiooni otsimiseks.

Hindamisskaala:

• Materjali omandamiseks peab õpilane saavutama vähemalt minimaalse läbimispunkti, mis on 60%.
• Hinnatakse kahte oskust:
  • Oskus rakendada teadmisi koodi kirjutamisel ja JavaScripti ning Reactiga rakenduste programmeerimisel.
  • Minimaalne läbimispunkt näitab, et õpilane on materjali omandanud. Selle saavutamiseks peab õpilane kontrolltöös kasutama vähemalt 60% praktilistel tundidel õpitud võtteid ja oskusi. Hindamine toimub õpetaja poolt kohapeal.

Kasutatavad meetodid: interaktiivsed loengud, rühmatööd, õppematerjalid, õppevideod.

Koolitaja:
Vladimir Kjahri
Tallinna Tehnikaülikool – magistrikraad – eriala: IT , lisaeriala: infotöötlus Infotehnoloogia projektide juhendamine, programmeerimine. Tallinna Pedagoogikaülikool – bakalaureusekraad. IT-spetsialist, programmeerija, tarkvaraarendaja.