Az előző bejegyzésben bemutatott videóban készítettem egy Random User API-al és Chunck Norris viccek API-al működő webalkalmazást. Ebben a videóban ezt fogom átalakítani React.JS alapú applikációvá.
Látni fogod, hogyha alapból template string szemlélettel építesz fel egy alkalmazást, azt milyen könnyű átírni React-be
Random User-ek random Chuck Norris vicceket mondanak
Ebben a Youtube videómban egy újabb webalkalmazást készítek el, amiben a Random User API-t egyesítem a Random Chuck Norris API-al, így random userek fognak mondani random Chuck Norris vicceket egy szövegbuborékban
BookBlock.Js kiegészítés
Egy kicsit beújítottam ezt a cuccot, amivel amolyan könyv szerűen lehet lapozgatni a képeket, mert zavart, hogy nincs benne olyan funkció Vanilla js esetén, hogy az első és az utolsó lapra lehessen ugrani. jQuery-t pedig nem akartam használni csak emiatt. Amúgy nem csak képeket, hanem komplett diveket is lehet vele lapozni.
GIT: https://github.com/bzozoo/BookBlock
DEMO: https://codepen.io/bzozoo/pen/qBxqyqp
VIDEO: https://www.youtube.com/watch?v=wiNtEos8tVU
Backend és frontend
A kód, amelyet elküldünk a felhasználónak és a böngészője értelmezi a kódot, az a frontend. Aminek a kódját nem küldjük el, hanem a szerveren értelmezzük azt és csak az értelmezés után kapott kimenetet küldjük el a felhasználónak, az a backend kód
Készítettem egy szimpla backendet és egy ehhez kapcsolódó szimpla frontendet, a backend és a frontend különbségeinek megértésére.
Feltettem a Github-ra: https://github.com/bzozoo/SIMPLE-FRONTEND
A Node.JS alapú szimpla backend 3 adatot szolgáltat JSON formátumban. Egy üdvözlő üzenetet, egy szerver dátumot és egy random számot:
https://zrivv1.sse.codesandbox.io/
A frontend pedig ezt kéri le Fetch API-al. A Github pages-en is lehet futtatni: https://bzozoo.github.io/SIMPLE-FRONTEND/
My REACT
My React.
Elkészítettem egy számlálót, ami a React useState-hez hasonló alapokon módosítja a state-t és rerendereli a komponenst.