loader image
react js

React – Kompletan vodič (uključujući Hooks, React Router i Redux)

Šta ćeš naučiti na kursu

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.

Prikaži više

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
PREDAVAČ
Edukativna online platforma
Edukativna online platforma

Još kurseva od ICT Cortex

Kurs info

Datum početka: 20.03.2024.
Datum završetka: 01.06.2024.
Cijena kursa: Besplatno
Sertifikovan: Ne
Naziv: React - Kompletan vodič

Karijerni put: Front-End React programer

  • Osnove web razvoja – HTML, CSS, JS – React usmjerenje
  • React – Kompletan vodič (uključujući Hooks, React Router i Redux)
  • front-end-programiranje
    React - Kompletan vodič
    ICT Cortex

    Help desk

    HR Platforma

    Registar članica