- Kompanija: ICT Cortex
- Broj modula: 37
Šta ćeš naučiti na kursu
- Naučićete da prvite brze, moćne, korsniku prilagođene aplikacije.
- Obezbijedite odlično korisničko iskustvo tako što ćete sa lakoćom iskoristiti snagu Java Script-a.
- Naučićete sve o React komponentama i React udicama (React Components i React Hooks).
- Bićete u mogućnosti da aplicirate za visoko plaćene poslove ili radite kao frilenser u jednom od najtraženijih sektora u oblasti razvoja veb aplikacija.
Uslovi za upis na kurs
- JavaScript + HTML + CSS osnove su neophodne
- Nije potrebno da budete Java Script ekspert da biste uspješno završili kurs.
- Znanje ES6+ Java Script-a je prednost, ali nije obavezno
- Nije obavezno prethodno iskustva rada u React-u ili nekom drugom JS frameworku.
Opis kursa
Ovaj kurs je u potpunosti usklađen sa poslednjom verzijom React-a!
Potpuno je ažuriran i sve lekcije su ponovo snimljene kako bi naučili poslednju verziju React-a, sa svim glavnim, modernim funkcionalnostima koje treba da znate.
React.js je najpopularnija Java Script biblioteka koju možete koristiti i učiti ovih dana da napravite moderne veb aplikacije.
Ovaj kurs Vas uči React-u od temelja, korak po korak, obuhvatajući sve ključne osnove, istražujući brojne primjere i upoznajući napredne koncepte takođe.
Dobićete svu teoriju, gomilu primera i demonstracija, zadataka i vježbi i gomilu važnog znanja koje većina drugih resursa preskače – na kraju krajeva, postoji razlog zašto je ovaj kurs tako ogroman!
A u slučaju da čak ni ne znate zašto biste željeli da naučite React, a ovdje ste samo zbog nekog oglasa ili „algoritma“ – bez brige: ReactJS je ključna tehnologija za veb programera i na ovom kursu ću takođe objasni ZAŠTO je toliko važna!
Dobrodošli u React – Kompletan vodič.
Ovaj kurs će vas naučiti React.js na praktičan način, koristeći sve najnovije obrasce i najbolje prakse koje su vam potrebne. Naučićete sve ključne osnove, kao i napredne koncepte i srodne teme koje će vas pretvoriti u React.js programera.
Ovo je obiman kurs jer zaista pokriva SVE što treba da znate i naučite da postanete React.js programer!
Bez obzira da li ne znate ništa o React-u ili već imate neko osnovno predznanje (nije obavezno, ali i nije problem), iz ovog kursa ćete dobiti gomilu korisnih informacija i znanja!
Cilj ovog kursa je da osiguramo da se osjećate samopouzdano radeći sa React-om, tako da možete da se prijavite za React poslove, da ga koristite u sopstvenim projektima ili jednostavno poboljšate svoj portfolio kao programer – šta god da je vaš cilj: Ovaj kurs vas vodi tamo !
Ovaj kurs je prvobitno kreiran 2017. godine i od tada se ažurira – ponovljen je iz temelja 2021. I naravno, posvećeni smo održavanju ovog kursa ažurnim – tako da se možete osloniti na ovaj kurs da naučite React na najbolji mogući način!
Sadržaj kursa:
- Temeljni uvod u React.js (Šta je i zašto biste ga koristili?)
- Sve ključne osnove: Kako React radi, kreiranje komponenti sa Reactom i izgradnja koisničkih interfejsa sa Reactom
- Komponente, svojstva i dinamičko povezivanje podataka
- Rad sa korisničkim događajima i stanjima u kreiranju interaktivnih aplikacija
- Razumijevanje kako React funkcioniše “iza scene”
- Detaljna objašnjenja kako se radi sa listama i uslovnim sadržajem
- React udice (hooks)
- Rad sa ugrađenim udicama i prilagođenim udicama
- Kako otkloniti greške u React aplikaciji
- Stilizovanje React aplikacije sa stilizovanim komponentama i CSS modulima
- Rad sa Fragmentima i Portalima
- Suočavanje sa neželjenim efektima
- Komponente zasnovane na klasama i funkcionalne komponente
- Slanje Http zahteva i rukovanje prelaznim stanjima + odgovori
- Rukovanje formama i korisničkim unosom (uključujući validaciju)
- Redux i Redux Toolkit
- Rute sa React Router-om
- Detaljan uvod u Next.js
- Postavljanje React aplikacija
- Implementacija autentifikacije
- Kombinovanje React-a sa TypeScript-om
- Dodavanje animacija
- Gomila primjera i demo projekata kako biste primijenili naučeno u stvarnim projektima
- I još mnogo toga – pogledajte detaljan kuriklum na stranici!
Ovo je stvarno kompletan vodič – obećavamo!
I najbolje od svega?
Nije vam potrebno predznanje React-a!
Sve što Vam je potrebno je osnovno poznavanje Java Script-a i razvoja veb aplikacija.
Kome je ovaj kurs namjenjen?
- Studentima koji žele da nauče kako da prave interaktivne i brze veb aplikacije.
- Svakome ko je zainteresovan da nauči izuzetno popularnu tehnologiju koju koriste vodeće tehnološke kompanije kao što je Netflix.
- Studentima koji žele da svoje vještine veb razvoja podignu na viši nivo i nauče veoma popularnu tehnologiju.
Plan i program
- Dobrdošli u kurs
- Šta je React.js?
- Zašto React umjesto klasičnog Java Script-a?
- Izgradnja jednostraničnih aplikacija sa React-om
- Istraživanje React-ovih alternativa (Angular i Vue)
- O kursu i nacrt kursa
- Dvije putanje slušanja kursa
- Izvlačenje maksimuma iz ovog kursa
- Podešavanje tekstualnog editora
- Uvod u modul
- Razumijevanje let i const
- Arrow funkcije
- Izvoz i uvoz funkcija
- Razumijevanje klasa
- Klase, svojstva i metodi
- Spred i rest operatori
- Destrukturiranje
- Referentni i primitivni tipovi obnavljanje
- Rezime modula
- Uvod u modul
- Šta su komponente i zašto se koriste u React-u?
- Kod u React-u je napisan na deklarativan način
- Kreiranje novog React projekta
- Analiza standardnog React projekta
- Uvod u JSX
- Kako React radi?
- Izgradnja prve prilagođene komponente
- Pisanje kompleksnijeg JSX koda
- Dodavanje osnovnih CSS stilova
- Prikazivanje dinamičkih podataka i rad sa izrazima u JSX-u
- Prosleđivanje podataka preko propertija
- Dodavanje “normalne” Java Script logike komponenetama
- Podjela komponente u više komponenata
- Koncept kompozicije (children props)
- Rezime
- Bolji uvid u JSX
- Organizovanje fajlova komponenti
- Alternativna sintaksa funkcije
- Uvod u modul
- Rad sa događajima (event-ima)
- Kako se izvršavaju funkcionalne komponente
- Rad sa stanjima (state)
- Bolji udiv u useState hook
- Dodavanje inputa u formu
- Reagovanje na korisničke inpute
- Rad sa više stanja (states)
- Korišćenje jednog stanja (I šta je bolje)
- Ažuriranje stanja koje zavisi od prethodnog stanja
- Rad sa slanjem forme
- Dodavanje dvosmjernog vezivanja
- Dijete – roditelj komunikacija između komponenata
- Kontrolisane i nekontrolisane komponente; komponenete sa stanjem i komponente bez stanja
- Uvod u modul
- Prikazivanje listi
- Korišćenje listi sa stanjima
- Razumijevanje ključeva
- Prikazivanje uslovnog sadržaja
- Dodavanje uslovnih return izjava
- Demo aplikacija: dodavanje korpe
- Dodavanje dinamičkih stilova
- Rezime modula i dalji koraci
- Uvod u modul
- Podešavanje dinamičnih umetnutih stilova
- Podešavanje CSS klasa dinamički
- Predstavljanje stilizovanih komponenti
- Stilizovane komponente i dinamička svojstva
- Stilizovane komponente i medijski upiti
- Korišćenje CSS modula
- Dinamički stilovi sa CSS modulima
- Uvod u modul
- Razumijevanje React poruke greške
- Analiziranje toka koda i upozorenja
- Rad sa tačkama prekida
- Korišćenje React razvojnih alata
- Uvod u modul
- Dodavanje komponente Korisnik
- Dodavanje komponenete Kartica koja se može ponovo koristiti
- Dodavanje komponenete Dugme koja se može ponovo koristiti
- Upravljanje stanjem korisničkog unosa
- Dodavanje logike validacije i resetovanja
- Dodavanje komponente liste korisnika
- Upravljanje listom korisnika preko stanja
- Dodavanje komponente Modalna greška
- Upravljanje stanjem greške
- Uvod u modul
- JSX ograničenja i zaobilazna rješenja
- Kreiranje Omotač komponente
- React Fragmenti
- Uvod u React Portale
- Rad sa refs
- Kontrolisane i nekontrolisane komponente
- Uvod u modul
- Uvod u useEffect
- Korišćenje useEffect() udice
- useEffect & Dependencies
- Korišćenje useEffect funkcije za čišćenje
- useEffect rezime
- Uvod u useReducer i reducere generalno
- Korišćenje useReducer() udice
- useReducer & useEffect
- useReducer vs useState
- Uvod u React Context (Context API)
- Korišćenje React Context API
- Pravljenje dinamičkog Contexta
- Kreiranje i korišćenje Custom Context Provider Componente
- React Context ograničenja
- Učenje pravila udica
- Uvod u modul
- Početna podešavanja
- Dodavanje Zaglavlje komponente
- Dodavanje Kopa Dugme komponente
- Dodavanje Jela komponente
- Dodavanje pojedinačnog jela i prikazivanje
- Dodavanje forme
- Rad na komponenti Kolica za kupovinu
- Dodavanje Modal prozora preko React portala
- Upravljanje stanjem kolica i modal
- Dodavanje Cart Context-a
- Korišćenje Context-a
- Dodavanje Cart Reducer-a
- Rad sa refs
- Prikaz artikala iz korpe
- Rad na kompleksnijoj logici reducera
- Mogućnost uklanjanja artikala
- Korišćenje useEffect udice
- Uvod u modul
- Kako React zaista radi
- Ažuriranje komponenti u akciji
- Bliži pogled na ponovnu evaluaciju dječije komponente
- Sprječavanje nepotrebnih ponovnih procjena pomoću React.memo()
- Sprječavanje ponovnog kreiranja funkcije pomoću useCallback()
- useCallback() and its Dependencies
- Prvi rezime
- Bliži pogled na stanje i komponente
- Razumijevanje pojmova State Scheduling & Batching
- Optimizacija pomoću useMemo()
- Uvod u modul
- Šta su komponente zasnovane na klasi i zašto se koriste
- Dodavanje prve komponente zasnovane na klasi
- Rad sa stanjima i događajima
- Životni ciklus komponente
- Metodi životnog ciklusa u akciji
- Komponente zasnovane na klasi i Context
- Komponente zasnovane na klasi i funcionalne komponente – rezime
- Predstavljamo granice grešaka
- Uvod u modul
- Kako da se (ne) konektujete na bazu podataka
- Početna aplikacije & Backend
- Slanje GET zahtjeva
- Korišćenje async / await
- Upravljanje Loading & Data stanjima
- Upravljanje Http greškama
- Korišćenje useEffect() za zahtjeve
- Priprema projekta za naredne korake
- Slanje POST zahtjeva
- Rezime
- Uvod u modul
- Šta su prilagodljive React udice
- Kreiranje prilagodljivih React udice funckija
- Korišćenje prilagodljivih React udica
- Podešavamke prilagodljivih React udica
- Primjer iz prakse
- Kreiranje prilagodljivih Http udica
- Korišćenje prilagodljivih Http udica
- Podešavanje prilagodljivih Http udica
- Korišćenje prilagodljivih udica u više komponenti
- Uvod u modul
- Početna podešavanja
- Šta je tako kompleksno u vezi formi?
- Rad sa slanjem forme i dobijanje vrijednosti za unos korisnika
- Dodavanje osnovne validacije
- Pružanje povratnih informacija o validaciji
- Rukovanje sa “da li je dirnut” stanjem
- React To Lost Focus
- Refactoring & Deriving State
- Upravljanje cjelokupnom validacijom forme
- Vrijeme za vježbu: Forme
- Dodavanje prilagodljive input udice
- Ponovno korišćenje prilagođene kuke
- Izazov za tebe!
- Primjena udice i znanja na novu formu
- Rezime
- Bonus: Korišćenje useReducer()
- Uvod u modul
- Pomjeranje podataka o jelima u Backend
- Preuzimanje podataka o jelima preko Http
- Upravljanje stanjem za učitavanje
- Upravljanje greškama
- Dodavanje forme za naplatu
- Čitanje vrijednosti iz forme
- Dodavanje validacije
- Podnošenje i slanje podataka iz korpe
- Dodavanje boljih povratnih informacija korisnika
- Rezime
- Uvod u modul
- Još jedan pogled na stanje u React aplikacijama
- Redux vs React Context
- Kako Redux radi
- Istraživanje ključnih Redux koncepata
- Više Redux osnova
- Priprema novog projekta
- Kreiranje Redux Store za React
- Providing the Store
- Korišćenje Redux podataka u React komponentama
- Pozivanje akcija unutar komponenti
- Redux sa Class-based komponentama
- Dodavanje Payloads akcijama
- Rad sa višestrukim stanjima
- Kako da ispravno radite sa Redux stanjima
- Redux izazovi i Redux komplet alata
- Dodavanje isječaka stanja
- Povezivanje Redux Toolkit stanja
- Migracija svega u Redux Toolkit
- Rad sa višestrukim rezovima
- Čitanje i otpremanje iz novog dela
- Podjela koda
- Rezime
- Uvod u modul
- Redux i asinhroni kod
- Obnavljanje / Vježba: Dio 1/2
- Obnavljanje / Vježba: Dio 2/2
- Redux i asinhroni kod
- Frontend Code vs Backend Code
- Gdje ubaciti logiku
- Korišćenje useEffect sa Redux-om
- Problem sa useEffect()
- Upravljanje Http stanjima i povratnim informacijama sa Redux-om
- Korišćenje Action Creator Thunk-a
- Započnimo sa učitavanjem podataka
- Završnica logike učitavanja podataka
- Istraživanje Redux DevTools-a
- Rezime
- Uvod u modul
- Šta su rute i čemu služe?
- Instaliranje React Router-a
- Definisanje i korišćenje ruta
- Rad sa linkovima
- Korišćenje navigacijskih linkova
- Dodavanje dinamičkih ruta sa parametrima
- Ekstrakcija parametara rute
- Korišćenje “Switch” i “exact” za konfiguraciju ruta
- Rad sa ugniježdenim rutama
- Presumjeravanje korisnika
- Vrijeme za vježbu: Naprijed do novog projekta
- Vježbanje preusmjeravanja korisnika i ekstrakcija parametara
- Vježbanje ugniježdenih ruta
- Dodavanje Layout Wrapper komponente
- Dodavanje “lažnih podataka” ii više sadržaja
- Prikazivanje podataka na stranici detalji
- Dodavanje “Nije pronađeno” stranice
- Implementacija programirane navigacije
- Prevencija eventualnih neželjenih tranzicija ruta sa “Prompt” komponentom
- Rad sa parametrima upita
- Budite kreativni sa ugnežđenim rutama
- Pisanje fleksibilnijeg koda za rute
- Slanje i dobijanje podataka preko Http
- Dodavanje “Komentari” karakteristika
- Nadogradnja na React Router verzija 6
- Bolje preuzimanje podataka sa React Router 6.4
- Uvod u modul
- Koraci implementacije
- Dodavanje odloženog učitavanja
- Kreiranje koda za produkciju
- Prvi koraci za postavljanje aplikacije (otpremanje datoteka)
- Istraživanje problema rutiranja i završetak implementacije
- Uvod u modul
- Šta, kako i zašto?
- Više o tokenima autentifikacije
- Početna podešavanja
- Dodavanje registracione forme za korisnika
- Prikazivanje povratnih informacija korisniku
- Dodavanje forme za prijavu korisnika
- Upravljanje stanjem autentifikacije sa Contextom
- Korišćenje tokena za zahtjeve za zaštićene resurse
- Preusmjeravanje korisnika
- Dodavanje dugmeta za odjavu korisnika
- Zaštita front-end stranica
- Status autentifikacije korisnika
- Dodavanje automatske odjave
- Završni koraci
- Uvod u modul
- Šta je NextJS?
- Ključne karakteristike 1: Ugrađeno prikazivanje na strani servera (poboljšani SEO!)
- Ključne karakteristike 2: Pojednostavljeno rutiranje sa rutiranjem zasnovano na datotekama
- Ključne karakteristike 3: Pravljenje fullstack aplikacije
- Kreiranje novog Next.js projekta i aplikacije
- Analiza kreiranog projekta
- Dodavanje prvih stranica
- Dodavanje ugniježdenih putanja i stranica
- Kreiranje dinamičnih stranica (sa parametrima)
- Izvlačenje dinamičkih vrijednosti parametara
- Povezivanje (linkovanje) stranica
- Naprijed na veći projekat!
- Priprema stranica za projekat
- Prikazivanje liste sastanaka
- Dodavanje novog obrasca za sastanke
- App js file i Layout Wrapper
- Korišćenje programirane navigacije
- Dodavanje prilagodljivih komponenti i CSS modula
- Kako funkcioniše pred prikazivanje i sa kojim problemima se suočavamo
- Preuzimanje podataka za statične stranice
- Više o generisanju statičkog sajta (SSG)
- Istraživanje prikazivanja na strani servera (SSR) sa “getServerSideProps”
- Rad sa parametrima za SSG učitavanje podataka
- Priprema putanja sa “getStaticPaths” i rad sa rezervnim stranicama
- Uvod u API rute
- Rad sa MongoDB bazom
- Slanje Http zahtjeva API rutama
- Dobijanje podataka iz baze
- Dobijanje podataka o detaljima sastanka i priprema stranica
- Dodavanje “glavnih” metapodataka
- Implementacija Next.js projekta
- Korišćenje rezervnih stranica i ponovna implementacija
- Rezime
- Uvod u modul
- Priprema demo projekta
- Korišćenje CSS trnazicija
- Korišćenje CSS animacija
- Ograničenja CSS tranzicija i animacija
- Korišćenje ReactTransitionGroup
- Korišćenje tranzicione komponente
- Obmotavanje tranzicione komponente
- Periodi animacije
- Događaji tranzicije
- CSSTransition komponenta
- Prilagođavanje CSS imena klasa
- Animiranje listi
- Alternativni animacijski paketi
- Zaključak
- Uvod u modul
- React 18 i ova sekcija
- Početak projekta i zašto biste zamijenili Redux
- Alternativa: Korišćenje Context API-ja
- Toggling Favorites sa Context API
- Context API rezime (i zašto ga ne koristiti umjesto Redux-a)
- Započinjemo sa prilagodljivim kukama za skladištenje podataka
- Završavanje prilagodljivih udica za skladištenje podataka
- Kreiranje Concrete Store
- Korišćenje Custom Store
- Custom Hook Store rezime
- Optimizovanje Custom Hook Store
- Bonus: Upravljanje višestrukim stanjima sa Custom Store Hook
- Rezime
- Uvod u modul
- Šta i zašto?
- Razumijevanje različitih vrsta testova
- Šta i kako testirati
- Razumijevanje tehničkih podešavanja i uključenih alatki
- Pokretanje prvog testa
- Pisanje prvog testa
- Grupisanje testova zajedno sa test paketima
- Testiranje interakcije korisnika i stanja
- Testiranje povezanih komponenti
- Testiranje asinhronog koda
- Rad sa mokovima
- Rezime i dalji resursi
- Uvod u modul
- Šta i zašto?
- Instaliranje i korišćenje TypeScript
- Istraživanje Base Types
- Rad sa tipovima nizovi i objekti
- Razumijevanje Type interfejsa
- Korišćene Type unija
- Razumijevanje Type pseudonima
- Funkcije
- Detaljnije o Generics-ima
- Kreiranje React + TypeScript projekta
- Rad sa komponentama i TypeScript-om
- Rad sa svojstvima i TypeScript-om
- Dodavanje modela za podatke
- Vrijeme je za vježbu!
- Podnošenje obrasca u TypeScript projektima
- Rad sa refs & useRef
- Rad sa “Function Props”
- Podešavanje stanja TypeScript
- Dodavanje stilova
- Vrijeme za vježbu: Uklanjenaje ToDo
- Context API i TypeScript
- Rezime
- Bonus: Istražite tsconfig.json
- Uvod u modul
- Šta su React udice?
- Startovanje projekta
- React 18 i ova sekcuha
- Započinjemo sa useState()
- Više o useState() i ažuriranje stanja
- Destrukturiranje niza
- Višestruka stanja
- Pravila udica
- Prosleđivanje podataka iz stanja komponentama
- Vrijeme za vježbu: Osnove udica
- Slanje Http zahtjeva
- useEffect() i učitavanje podataka
- Razumijevanje useEffect() Dependencies
- Više o useEffect()
- Šta je useCallback()?
- Rad sa Refs i useRef()
- Čišćenje sa useEffect()
- Brisanje sastojaka
- Učitavanje greški i State Batching
- Više o State Batching & State Updates
- Razumijevanje useReducer()
- Korišćenje useReducer() za Http State
- Rad sa useContext()
- Optimizacija performansi sa useMemo()
- Započnimo sa prilagodljivim udicama
- Dijeljenje podataka između prilagodljivih udica i komponenti
- Korišćenje prilagodljivih udica
- Rezime
- Uvod u modul
- Šta je React?
- Zašto React?
- Kreiranje SPAs (aplikacija sa jednom stranicom)
- Alternative Reactu
- Kreiranje React projekta
- Podešavanje kod editora
- React 18
- Istraživanje kreiranog projekta
- Kako radi React i razumijevanje komponenti
- Više o komponentama i stilizovanje sa CSS klasama
- Kreiranje i ponovno korišćenje drugih komponenti
- Rad sa svojstvima i dinamičkim sadržajem
- Rukovanje događajima
- Dodavanje komponenti
- Uvod u stanje
- Rad sa događajima svojstva
- Korišćenje odgovarajuće verzije React Routera
- Dodavanje ruta
- Dodavanje linkova i navigacije
- Stilizovanje sa CSS modulima
- Prikazivanje liste podataka
- Dodavanje komponenti
- Kreiranje Wrapper komponenti sa props.children
- Dodavanje forme
- Dobijanje podataka od korisnika i podnošenje obrasca
- Priprema aplikacije za Http
- Slanje POST zahtjeva
- Programirana navigacija
- Započnimo sa učitavanjem podataka
- Korišćenje useEffect() udice
- Uvod u React Context
- Logika Context-a i različiti načini za ažuriranje stanja
- Korišćenje Context-a u komponentama
- Rezime
- Šta sad? Naredni koraci koje možete preuzeti!
- Istraživanje React ekosistema
- Završne riječi
- Rezime
by Logate and Bild Studio
