Ovaj repozitorij sadrži vježbe za izradu ReactJS stranice koristeći Gatsby.
Sastoji se od dokumentacije i uputa za izradu demo web stranice.
Bitno je napomenuti da se vježbe NEĆE BODOVATI i nisu zamjena za projekt iz HCI kolegija (bodovat će se samo zalaganje).
Na ovom kolegiju potrebno je osmisliti, dizajnirati i izraditi funkcionalnu web stranicu koristeći Gatsby uz ReactJS.
Ovaj repozitorij služi kao pomoć pri tome ne kao zamjena.
Ovaj repozitorij je zamišljen kao kolekcija resursa za samostalno učenje ReactJS-a i razvoja web aplikacija. Repozitorij se sastoji od više brancheva gdje svaki sadrži veliki korak prema gotovoj web stranici. Svaki commit je koračić na tom putu.
Repozitorij se sastoji od 6 project brancheva, 2 intro brancha, jednog ili više bonus brancha (koji će se dodavati po potrebi) i naravno master brancha koji upravo gledate.
- master: sadrži gotov cjeloviti kod stranice, nastao je kao merge svih project brancheva
- project: sadrže dio koda koji vodi prema cjelovitoj stranici
- praktični dio vježbi gdje ćemo pisati kod: hands on pristup
- svaki koncept korišten u vježbama je pokriven teorijom
- svaki branch uvodi novi React koncept i segment stranice
- intro: uvodni dio, neće biti pokriven vježbama, ali ćemo se referirati na njega. Služi kao uvod u ono što ćemo raditi
- bonus:
- Uvod u git
- CSS / SASS (to be added)
Kroz vježbe stvorit ćete svoj repozitorij i pratiti upute branch po branch.
Za projekt ćete imati odvojen repozitorij nevezan s ovim. To će biti vaš samostalan rad.
Primijetit ćete da se svaki branch sastoji od commitova koji imaju ista imena kao i u uputama. Razlog je taj što je sav kod u repozitoriju napisan ručno i dodan kroz commitove. To znači da u bilo kojem trenutku možete provjeriti kod u bilo kojem commitu pomoću git checkout hashCommita. To će vas odvesti u detached head state gdje možete vidjeti točno kako izgleda projekt u tom danom trenutku. To bi trebalo biti korisno za traženje grešaka. Također, možete izvući novi branch iz tog commita i testirati stvari u njemu (u detached head stateu napravite git branch).
Intro branchevi vas uvode u React i JavaScript. Project branchevi sadrže primjenu tih znanja kroz kod. Na kraju dokumenta dan je popis literature korištene u svakom branchu.
Branch sadrži upoznavanje s Ecma Scriptom, Babelom i novim standardima JavaScripta koji se koriste u modernom razvoju web aplikacija. Objašnjeno je što su transpileri i zašto se koriste. Kroz primjere prikazani su novi koncepti i sintaksa koja se koristi u JavaScriptu. Na kraju je dan popis te sintakse i linkovi na vanjske resurse korištene u vježbama:
- let - const [link]
- arrow functions [link]
- export and imports [link]
- Classes [link]
- Spread and Rest [link]
- Array iterators [link]
Ovaj dokument pokriva brzi crash course uvod u React. Izrađuje se jednostavna web stranica koristeći tradicionalni čisti HTML i CSS, a zatim ista stranica koristeći ReactJS. Ispod su linkovi na kod jedne i druge stranice:
Postavljanje Gatsby alata, instalacija potrebnih paketa (git, node), predstavlja prve vježbe koje ćemo raditi.
- Node ekosustav [link]
U prvim vježbama prolazimo kroz CSS styling u Reactu. Radimo prvu komponentu.
Segment koji radimo je ContactBar komponenta:
Sadržaj:
Koncept pokriven u ovim vježbama je array.map().
Segment koji radimo je NavigationHeader komponenta.
Sadržaj:
Koncepti pokriveni u ovim vježbama su lazy loading, layout i moduli. Segment koji radimo je tijelo stranice koje se sastoji od slika i teksta.
Sadržaj:
U ovim vježbama uvodimo dodavanje novih stranica i ono što je bitno: React state. Također, započinjemo korištenje NPM paketa. Nova stranica koja se dodaje je contact forma. Dodaje se i lazy loaded BackgroundImage.
Sadržaj:
U ovim vježbama spajamo se na Instagram koristeći Gatsbyjev graphql API.
Uvodi se pojam CMS i objašnjava se kako radi i zašto se koristi.
Sadržaj:
Ovaj kolegij će baciti puno informacija na vas jako brzo. Preporučujem da paralelno uz praćenje vježbi radite na svom projektu i pokušavate primijeniti nove stvari koje naučite kroz vježbe odmah u projekt. Neće ići lako, ali zato smo tu za pomoć. Kao i uvijek, ako se projekt odgađa do zadnjeg dana bit će jako teško pružiti adekvatan savjet i pomoć. Uz to, učenje će postati otežano zbog nastale panike.
Da bi se to izbjeglo potrebno je početi raditi na projektu što je to prije moguće.
Svaka vježba ima teoretski dio gdje se objašnjava nešto novo što će se koristiti.
Također, prije početka pisanja koda dan je layout, tj. grafički plan komponenti koje će se pisati u vježbi. Ako pročitate taj dio prije početka vježbe, bit će vam puno lakše pratiti što se događa.
U prosjeku, to je oko 3 minute čitanja.
Ovaj repozitorij je tekstualan. Kažu da je slika 1000 riječi, a video je 60 slika u sekundi.
Učenje je lakše kad gledate i slušate nekoga dok radi, nego kad čitate kako se to radi.
Svjesni smo tog nedostatka pa je uključen popis korisnih video materijala na kraju dokumenta.
Autor ovog repozitorija i koda je student koji je prije dvije godine počeo učiti web development. Slobodno mi se obratite kao i bilo kojem drugom studentu.
Konkretan odgovor na konkretno pitanje je najbolji i najbrži način da naučite nešto.
Iskoristite to. Manje ćete guglati.
Kontakt Email:
[email protected]
Ili direktnom porukom na Teams.
Nemojte prestati pitati dok pitanje nije odgovoreno ili vam osoba koju pitate kaže "ne znam". Tad pitajte drugu osobu.
Video resursi:
Gotov dizajn:
Dizajn inspiracija:
https://www.webdesign-inspiration.com/
https://medium.theuxblog.com/design-trends-all-the-best-big-hero-image-136061191451
Gotov kod spreman za korištenje:
Bootsrap za React
https://react-bootstrap.github.io/
Styled Components
https://styled-components.com/
CSS animirani background:
https://csspoint101.com/30-css-animated-background/
Kontakt:
Email: [email protected]
MS Teams: Ivan Kuliš