К содержанию

Osnovni React tutorijal

Tutorijal za JavaScript frejmvork React. Za početnike. Puno teorije i zadataka.

Уроки

Uvod u React framework

Instalacija React okvira

Povezivanje dodatka react-devtools

Uvod u komponentni pristup u Reactu

Maket sajta frejmvorka React

Rezultat rada komponente

JSX jezik

Uvod u JSX jezik u React-u

Povratak ugnježdenih JSX tagova funkcijama

Pravila povratka funkcijom pri spuštanju taga u JSX-u

Osobine vraćanja više tagova u JSX-u

Povratak nezatvorene JSX oznake

Povratak praznog taga funkcijom u JSX-u

Ubacivanje vrednosti varijabli i konstanti u JSX

Nijanse pri umetanju vrednosti promenljivih

Ubacivanje nizova u JSX

Umetanje objekata u JSX

Ubacivanje promenljivih i konstanti u atribute tagova u JSX-u

Čuvanje tagova u promenljivim i konstantama JSX-a

Karakteristike čuvanja više tagova u JSX konstantama

Tagovi na različitim redovima u JSX-u

Povratak tagova kroz return u JSX-u

Zatvaranje JSX tagova

Ispravnost izgleda u Reactu

Izvršavanje JavaScript koda

Uslovi

Primena uslova u JSX-u

Prikaz uslovno u React-u

Uslovi za povratak taga u JSX-u

Ternarni operator u JSX-u

Korišćenje operatora && u JSX-u

Invertovanje za skraćene uslove u JSX-u

Funkcije

Korišćenje funkcija u React-u

Pozivanje funkcija unutar tagova u React-u

Dodeljivanje događaja u JSX-u

Parametri u JSX funkciji

Objekat Event u React-u

Event objekat prilikom prosleđivanja parametara

Formiranje tagova

Tagovi u JSX nizovima

Formiranje niza tagova u React petlji

Formiranje tagova iz niza sa podacima u React-u

Jedinstveni ključevi u nizu tagova u React-u

Prikaz niza objekata u React

Jedinstveni ključevi preko id u React-u

Prikaz niza objekata kao HTML tabele u Reactu

Jedinstveni id

Razgovor o jedinstvenim ID-jevima u React-u

Problemi sa novim id-jevima u React-u

Slučajni stringovi za id u React

Generisanje ID-a u Reactu

Funkcija za generisanje id u React-u

Korišćenje funkcije id u React-u

Pogrešna upotreba funkcije id u Reactu

Stanja

Uvod u stejtove u Reactu

Korišćenje stanja u Reactu

Reaktivnost stanja u React-u

Logička vrednost u stanju u React-u

Brojač na stanjima (state) u React-u

Forme

Rad sa inputima u React

Izmena podataka input-a pri njihovom ispisu u React-u

Izmena podataka pomoću funkcije u React-u

Rad sa više unosa u React-u

Obrada podataka forme klikom na dugme u React-u

Rad sa textarea u React-u

Rad sa checkbox u Reactu

Čekboksovi i uslovno renderovanje u React-u

Rad sa select u Reactu

Opcije selektora iz niza u React-u

Vrednosti atributa value u select-u u React-u

Vrednosni atributi select-a iz niza u React-u

Rad sa radio dugmadima u React

Podrazumevane vrednosti u React-u

Povezivanje input polja sa nizom u React-u

Povezivanje input polja sa objekat u React-u

Podaci

Reaktivnost podataka u React-u

Reaktivno dodavanje u niz u React-u

Reaktivne operacije nad nizovima u React

Reaktivno dodavanje u niz objekata u React-u

Reaktivne operacije nad nizovima objekata u React-u

Reaktivni prikaz podataka u React

Komponente

Uvod u React komponente

Korišćenje komponenti u React-u

Više instanci komponente u Reactu

Props komponenti u Reactu

Kreiranje podređenih komponenti u Reactu

Niz za kreiranje child komponenti u React-u

Podređene komponente u petlji React

Prosleđivanje stanja (state) podređenim komponentama u React-u

Prosleđivanje id-a u React komponentu

Promena stanja roditelja u podređenoj komponenti u React-u

Uređivanje stanja roditelja u child komponentu u React-u

Uređivanje stanja u unučetskoj komponenti u React-u

Režimi rada kroz stanja komponenata-potomaka u React

Koncepti

Koncepti React-a pri radu sa komponentama

Podaci komponenti u React-u

Tipovi komponenti u Reactu

Jednosmerni tok podataka u React-u

Podizanje stanja u React-u

Jedan izvor istine u React-u

Stilizacija

Načini stilizovanja React komponenti

Korišćenje globalnog CSS-a za stilizaciju u React-u

Ubacivanje podataka u atribut style iz objekta u React-u

Ubacivanje podataka u atribut style iz odvojene datoteke u React-u

Rad sa CSS stilovima u atributu style u React-u

Ubacivanje podataka u atribut style iz promenljivih u Reactu

Stilizacija pomoću Styled Components u Reactu

Korišćenje props sa Styled Components u Reactu

Korišćenje prosledjenih podataka u uslovnom renderovanju sa Styled Components u Reactu

Napredno stilizovanje komponenti u React-u

Početak učenja stilizacije sa CSS modulima u Reactu

Nastavak proučavanja stilizacije sa CSS modulima React

Comanda composes za klase u CSS modulima u React-u

Komanda composes za fajlove u CSS modules u React-u

Projekti

Projekat Checklist u Reactu

Projekat Beležnica u Reactu