We believe in knowledge sharing

U 4 mjeseca, 15 predavanja, i s 29 kolega, naučiti ćeš kako razviti web aplikacije koristeći React tehnologiju.

Materials hero image

Powered by

University of Zagreb

Faculty of Organization and Informatics

Curriculum

Lectures & Materials

1. Introduction

Prvu lekciju iskoristit ćemo za upoznavanje sa svim polaznicima akademije, kao i za predstavljanje Specka te samog koncepta i pravila Speck Akademije. Pokušat ćemo vam dati čim više detalja kako bi čim lakše krenuli na daljnja predavanja. Na kraju predavanja dobivate svoju prvu domaću zadaću, odnosno pripremu za iduće predavanje.

2. HTML & CSS

Na ovom predavanju prolazimo kroz osnovne detalje koje bi svaki frontend developer trebao znati o HTML-u i CSS-u, najčešćim tagovima, strukturiranju sadržaja, Cascades & Specificity te Box modelu. Također ćemo se dotaknuti osnovnih detalja vezanih za pisanje HTML-a sa naglaskom na što bolju SEO optimizaciju.

3. Version Control System

Fokus ovog predavanja bit će na Version Control sustavima te njihovoj svrsi u developmentu. Upoznat ćemo se sa GIT-om, Githubom te Gitflow Workflow-om i zajednički isprobati najvažnije funkcionalnosti koje se primjenjuju u svakodnevnoj praksi.

4. Advanced CSS

Na ovom predavanju napravit ćemo konkretnu primjenu responzivnosti, objasniti kakav je to Mobile first dizajn, a osim toga upoznat ćemo se sa BEM metodologijom prema čijim pravilima pišemo extendable and reusable interface komponente. Također ćemo se posvetiti CSS Grid & Flexbox modulima koji nam omogućavaju vrlo brzo pozicioniranje elemenata bez korištenja Boostrapa ili sličnih librarya.

5. Intro to JavaScript

Ovo predavanje posvećeno je osnovama JavaScripta i usporedbi s drugim programskim jezicima. Saznat ćemo kako funkcionira JS Engine i upoznati se sa osnovnom sintaksom JavaScript-a. Na jednostavnijem primjeru napisat ćete svoju prvu JS funkcionalnost.

6. Advanced JavaScript

Na ovom predavanju ulazimo u konkretnije funkcionalnosti JavaScript-a i sukladno tome bavimo se s objektima, callback funkcijama, Promises i ES6+ primjerima. Ovo predavanje bit će priprema na ono što ćemo najčešće koristiti u React-u. Nakon prezentacije prebacit ćemo se na rješavanje zadatka koji će prikazati primjenu svega naučenog u prezentaciji.

7. Intro to React

Nakon što smo savladali osnove iz prethodnih predavanja, vrijeme je da se posvetimo osnovama React-a. Upoznat ćemo se JSX syntax extenzijom, komponentama te Props. Također ćemo prikazati osnove korištenja React Routera kako bi se mogli uspješno navigirati kroz aplikaciju. U sklopu ovog predavanja prikazat ćemo koja je svrha CSS pre-procesora i na koji način tehniku stiliziranja aplikacije dovesti na još višu razinu.

8. React events, conditionals & lists

Na ovom predavanju nastavljamo s osnovama Reacta i naučit ćemo koristiti events, conditional rendering i liste. Ne temlju ovih znanja uočit ćemo koliko benefita nam donosi razvoj aplikacija pomoću Reacta naspram vlastito strukturirane aplikacije u kojoj ne koristimo framework. Također ćemo se upoznati s novom tehnikom stiliziranja pomoću Styled components biblioteke koja omogućava stiliziranje putem JS-a.

9. React Forms

Ovo predavanje posvećeno je formama u Reactu. Forme su neizostavni dio svakog developera i aplikacije, a kako bi pojednostavili upravljanje s formama, različite biblioteke omogućavaju nam vrlo inteligentno i efikasno korištenje istih. Fokus će biti na Formik i Yup biblioteki.

10. React API

Na ovom predavanju naučit ćemo što je to API i kako ga možemo konzumirati unutar React aplikacije. Također ćemo se upoznati sa nekoliko načina za slanje zahtjeva prema API-u te koje se metode najčešće koriste. Dio predavanja posvetit ćemo async/await ekstenziji Promises-a, a sve naučeno primjenit ćemo unutar naše React aplikacije koja će uspješno komunicirati s API-em.

11. React Context

Fokus ovog predavanja je na efikasnom predavanju podataka kroz component tree pomoću Context API-a bez da podatke šaljemo manualno kroz svaki level komponente. Osim toga ovo predavanje posvetit ćemo razumijevanju i korištenju Cookies i Web storage-a kako bi svi bili upoznati na koji način se podaci mogu spremati u Browseru.

12. React state management

Ovim predavanjem objedinit ćemo sve tehnike upravljanja stateom unutar React aplikacije, vidjeti konkretnu svrhu i prednosti pojedinog načina i upoznati se sa rješenjima za kompleksno upravljanje stateom. S obzirom da je tema jako opširna, upoznat ćemo se sa osnovama Mobx biblioteke te istu primijeniti unutar svoje aplikacije.

13. React deployment

Na ovom predavanju objasnit ćemo što je to deployment, koji su to najčešći environmenti za deployment te koja je njihova svrha. Također ćemo se upoznati sa Vercel platformom za deployment, kreirati automatizirani deployment vlastite aplikacije preko Githuba i Vercela.

14. Next.js

Ovo predavanje ujedno je i naše zadnje predavanje na kojem ćemo vas upoznati sa Next.js frameworkom koji je baziran na Reactu, ali sam po sebi nudi brojne mogućnosti korisne za razvoj SEO optimiziranih aplikacija. Objasnit ćemo razliku između SSR i CSR renderinga, koje su prednosti i nedostaci, a isto tako dati ćemo vam prijedloge za tehnologije s kojima bi bilo dobro nastaviti vlastito učenje nakon ove akademije.

15. Final exam & certification

Zadnje predavanje obavezno provodimo uživo i sastoji se od teorijskog i praktičnog ispita. Ispiti se ispravljaju odmah, a ubrzo nakon što svi završe sukladno svim prikupljenim bodovima oni najsretniji dobivaju certifikate.

FAQs

Additional information

Ovisno o prethodnoj razini znanja iz pojedinih tema, na tjednoj bazi potrebno je uložiti 4-10 sati samostalnog rada. Program je intenzivan, ali uz redovit rad i konstantnu komunikaciju s predavačem moguće je cijelu akademiju proći bez većih poteškoća i s jako puno usvojenog znanja. Program iziskuje redovitost i puno samostalnog rada. Predavanja će se održavati jednom tjedno, u popodnevnom terminu, a točan dan i sat bit će dogovoren s polaznicima na uvodnom predavanju.

Kako je cilj akademije osposobljavanje za prvi posao frontend developera, poznato nam je da osnove kao što su HTML, CSS i GIT nisu usvojene na potrebnoj razini kod polaznika našeg programa. Sukladno tome, na ovoj akademiji uvest ćemo vas i u ove teme kako bi kasnije mogli graditi kvalitetne komponente unutar React aplikacije ili bilo kojeg drugog frameworka.

Zbog brzog napretka novih tehnologija te njihove primjene, posao developera je uključuje i konstantno istraživanje dokumentacije. Kako bi vas pripremili i na taj dio, svaku od tehnologija bit će potrebno teoretski obraditi, odnosno na temelju informacija koje ste čitali u dokumentaciji rješavati ćete kvizove koji donose bodove za prolazak akademije. Osim toga, bez da znate osnove u teoriji, teško je pisati kodove sukladno najboljoj praksi.

Postoje dva certifikata, certifikat o sudjelovanju na akademiji i certifikat izvrsnosti. Certifikat o sudjelovanju dobivaju svi kandidati koji su skupili minimalno 50% ukupnih bodova akademije. Tim certifikatom pokazali ste upornost i želju da naučite nešto novo, što će vam zasigurno pomoći pri traženju posla. Certifikat izvrsnosti dijeli se kandidatima koji su briljirali tijekom akademije i s tim certifikatom, odnosno skupljenim znanjem, duboko vjerujemo kako možete dobiti posao Junior Frontend Developera, bilo kod nas ili drugdje.

Studenti FOI-a dobivaju dodatne ECTS bodove po završetku akademije, dok se studentima drugih učilišta preporučujemo samostalno ishođenje ECTS bodova (u mogućnosti smo izdati opis i opterećenje programa, koji je moguće predati referadi matičnog fakulteta).

Iz svake od generacija akademije neki od polaznika zaposlili su se u Specku, možda ćeš ove godine baš ti biti novi developer/ka unutar Speck tima.

S obzirom na COVID situaciju akademija se većinski provodi remotely, s iznimkom za završni ispit kojeg obavezno provodimo uživo. Kako bi se imali priliku što bolje upoznati, u planu nam je održati još nekoliko predavanja uživo ako će to situacija s pandemijom dozvoliti.

Idealno je da imate prijenosno računalo kako bi ga mogli nositi sa sobom u situacijama kada ćemo biti uživo. Za studente FOI-a koji nemaju prijenosno računalo, za potrebe predavanja uživo računalo će biti osigurano od strane FOI-a, za ostale polaznike pobrinut će se Speck. Sve alate koje koristimo besplatni su i instalirani će biti u trenutku kada su potrebni, kao što su VS Code, GIT, Node.js i Google Chrome.