Eshop v Reactu | React tutorial
ฝัง
- เผยแพร่เมื่อ 7 ก.พ. 2025
- Ve videu si společně projdeme React od úplných základů až po ukázku nasazení hotové aplikace na server. Vytvoříme si vlastní komponenty, načteme data ze server a použijeme hooky.
Omluvte prosím některé nepřesnosti například u vysvětlení propisování stavů a následné překleslení komponent. Do setteru hooku useState je potřeba vždy vkládat nový objekt, díky čemuž React zaregistruje změnu a dojde k překreslení dané komponenty.
Zdrojáky: github.com/pet...
Maestro super, dakujem velmi pekne, pozerám, super tutorial aj rozlisko, no vela bieleho a sedeho screenu, ja na to nedovidim v obyvacke :D
Tak toto je veľmi vydarený tutoriál... Náročný rozsahom, ale po častiach dáva mnoho informácií... Ďakujem.
Ahoj Danieli, díky za zpětnou vazbu.
Moc děkuji za super video, učím se React od základů a tohle mi moc pomohlo.
Ahoj Hanko, díky za zpětnou vazbu. Jsem rád, že video pomohlo. Ať se daří!
Jako úplný začátečník v Reactu Vám velice děkuji. Váš návod je snad první, který dokážu na první dobrou chápat. I když Reactu vůbec nerozumím... např. Node.JS jsem se musel naučit používat a psát aplikace jen v javascriptu úplně sám, protože nikdo neumí tak skvěle vysvětlit problematiku tak jako vy!
Dávám odběr a těším se na další videa od Vás. 🙂
Ahoj, díky! Jsem moc rád, že video pomohlo.
Díky za tut. React jsem pár let nedělal a tohle mi pomohlo se zas do něj nastartovat. Skvěle vysvětleno a je dobrý si občas připomenout i základy.
Ahoj, paráda. Jsem rád, že pomohlo!
Veľmi dobre a jasne vysvetlený tutoriál, vďaka :))
Ahoj, díky za zpětnou vazbu!
Super pripravený a zrozumiteľný výklad.
Ahoj Vlado, moc děkuji!
Parádní návod, děkuji ti za něj
Ahoj, jsem rád, že pomohlo!
Ahoj Petre ,diky za video, je velmi srozumitelne. 👍👍👍Jsem amatersky programator, programuji v reactu cca rok a pul, ucil jsem se podle videii v anglictine a konecne jsem narazil na jedno krasne v cestine ve kterem jsem si vse zopakoval :-), chtel bych se Vas zeptat zda nevite jake jsou obecne minimalni pozadavky firem na pozici junior delevoper v reactu. Napr zda se navic vyzaduje znalost knihoven jako je Redux nebo Query, popripade zda je take vyzadavovana znalost nastaveni serveru, myslim ti napriklad framework express ci jiny backend + znalost SQL ci No SQL databazi.
Ahoj Aleši, jsem rád, že se video líbilo. Není potřeba ovládat všechny technologie, ale chuť učit se nové věci. Každá společnost má jiný stack, takže je nemožné znát úplně všechno, ale je dobré osahat si principy, protože jejich přenositelnost mezi knihovnami a frameworky je celkem jednoduchá. Takže pokud pochopíš principy state-managementu a problémy načítání dat v aplikacích, tak můžeš použít i další knihovny, které tyto problémy řeší.
U juniorů se obecně předpokládá, že mají základy programování. Téměř vždy mají někoho k ruce, kdo pomůže se zaučením. Nedělal bych si u juniora starost, jestli umí Redux nebo Query, ale jestli je ví, jak se dostat do cíle.
Myslím si, že znalost (No)SQL a nějakého backendu se ti určitě vyplatí. Doporučuji vytvořit si vlastní projekt. To tě posune o neskutečný kus dopředu. Díky projektu můžeš na pohovoru ukázat, co už umíš a získáš ihned zpětnou vazbu. A určitě doporučuji jít na pohovor klidně i teď a získáš bližší povědomí na co se zaměřit.
Tohle téma může být celkem obsáhlé, takže jsem to zkusil trochu zkrátit. Snad ti to jako odpověď stačí. Pokud máš ještě něco konkrétního, tak se ptej.
Petr
@@PetrFilipTix dekuji za obsáhlou odpověď
Super tutorial. Jen ty rozmazané blechy na monitoru se fakt nedají přečíst.
Skvělé video. Bude další ohledně Reactu? :)
Ahoj Tomáši, jsem rád, že se video líbilo. Několik videí bych Reactu rád ještě věnoval.
Zdravím, mám otázku ako úplný začiatočník postupujem pomaly ale zasekol som sa hneď na začiatku v 3minúte kedy vlastne ukončuješ tú časť s IP adresou. Vyskočí tam ˆC a vyhodí ťa z toho a nasleduješ príkazom cd .. a potom idea . .
Tak nedokážem funkčne použiť ten príkaz na vyhodenie sa z toho a keď som to aj manuálne skúšal obísť a dať príkaz idea . na Macu vyhodí -bash: idea:command not found .... vieš mi ta poradiť či to cez mac via fungovať rovnako ako cez Windows a teda ako správne použijem príkaz ˆC ?
Ďakujem
Ahoj Gerby, příkaz idea je jen moje zkratka, jak otevřít aktuální adresář v IntelliJ idea. Stačí tedy když si IntelliJ spustíš a otevřeš si ten pracovní adresář.
Co se týče příkazu ˆC, tak se jedná o zastavení běžícího procesu pomocí zkratky CTRL+C. Snad pomohlo ;)
Ahoj, zatím supr tutoriál, bohužel jsem se zasekl na cca 27 minutě. Při napsání useState(InitialState: []) mi to vyhazuje tuhle chybu
Compiled with problems:X
ERROR in ./src/App.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:\Users\Martin\OneDrive\Plocha
eact-eshop
eact-eshop\src\App.js: The type cast expression is expected to be wrapped with parenthesis. (8:47)
6 |
7 |
> 8 | const [cart, setCart] = useState(InitialState: [])
| ^
9 |
10 | const handler = function (product) {
11 | const newCart = [...cart];
at Object._raise (C:\Users\Martin\OneDrive\Plocha
eact-eshop
eact-eshop
ode_modules\@babel\parser\lib\index.js:569:17)
at Object.raiseWithData (C:\Users\Martin\OneDrive\Plocha
eact-eshop
eact-eshop
ode_modules\@babel\parser\lib\index.js:562:17)
at Object.raise (C:\Users\Martin\OneDrive\Plocha
eact-eshop
eact-eshop
ode_modules\@babel\parser\lib\index.js:523:17)
at Object.toReferencedList (C:\Users\Martin\OneDrive\Plocha
eact-eshop
eact-eshop
ode_modules\@babel\parser\lib\index.js:5728:14)
at Object.toReferencedListDeep (C:\Users\Martin\OneDrive\Plocha
eact-eshop
eact-eshop
ode_modules\@babel\parser\lib\index.js:10996:10)
at Object.toReferencedArguments (C:\Users\Martin\OneDrive\Plocha
eact-eshop
eact-eshop
ode_modules\@babel\parser\lib\index.js:11795:10)
at Object.parseCoverCallAndAsyncArrowHead (C:\Users\Martin\OneDrive\Plocha
eact-eshop
eact-eshop
ode_modules\@babel\parser\lib\index.js:11787:12)
at Object.parseSubscript (C:\Users\Martin\OneDrive\Plocha
eact-eshop
eact-eshop
ode_modules\@babel\parser\lib\index.js:11702:19)
at Object.parseSubscript (C:\Users\Martin\OneDrive\Plocha
eact-eshop
eact-eshop
ode_modules\@babel\parser\lib\index.js:6262:18)
at Object.parseSubscripts (C:\Users\Martin\OneDrive\Plocha
eact-eshop
eact-eshop
ode_modules\@babel\parser\lib\index.js:11671:19)
ERROR
src\App.js
Line 8:47: Parsing error: The type cast expression is expected to be wrapped with parenthesis. (8:47)
Zdroják jsem kontroloval asi 5x a vše by mělo být uplně stejné, bohužel mi to stále píše tuto chybu a když jí chci ignorovat tak mi to logicky nic nepíše do konzole ani nepřepisuje košík nic. :/ Projížděl jsem i strejdu Googla, ale moc mi nepomohl, tak jsem si řekl, že se zkusím zeptat tebe jestli náhodou nebudeš vědět co s tím. Ještě jsem to zkusil napsat useState({InitialState: []}), to chyba přestane, ale zase po kliknutí na buy mi to v konzoli vyhodí Uncaught TypeError: cart is not iterable a odkazuje to na const newCart = [...cart];
Opravdu mám vše stejné ve zdrojáku a už si nevím rady :D ještě mě napadlo, zda by to nemohlo být tím, že to dělám ve VSC, ale to netušim :)
Každopádně děkuju mockrát za jakoukoliv odpověď :)
Ahoj Martine,
místo
`const [cart, setCart] = useState(InitialState: [])`
je potřeba dát pouze
`const [cart, setCart] = useState([])`
to `initialState` je nápověda prostředí.
@@PetrFilipTix úžasné, děkuju mnohokrát!! Funguje to :)
Každopádně, jakto, že tobě to funguje i s tim InitialState?
Ještě jednou díky moc! jdu to dodělat.
@@martinkopecny3574 Ten initialState tam vůbec není napsaný. Jedná se pouze o nápověda prostředí, aby bylo jasné, co ten vložený parametr znamená. Je to vlastnost IntelliJ produktu, který se snaží dělat programování snadnější.
@@PetrFilipTix Jéžiš, tak to jde blbec :D každopádně díky za vše :)