React Js alapok – 1. rész

https://www.youtube.com/watch?v=5DP1iHPMsXY

forráskód: https://codepen.io/blogbook/pen/qBNxJPZ

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

React Js – 2. rész – Mai dátum kiírása / Show Date

https://www.youtube.com/watch?v=1OrhFAoTn2o

forráskód: https://codepen.io/blogbook/pen/KKMQroV

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

React Js – 3. rész – Függvény komponens / Function Component – CSS hozzáadás : class, style

https://www.youtube.com/watch?v=26Iy5hCW18I

forráskód: https://codepen.io/blogbook/pen/YzWedzg

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
React Js – 4. rész – Osztály komponens / Class Component

https://www.youtube.com/watch?v=YuKLWqOTw7I

forráskód: https://codepen.io/blogbook/pen/MWeQLYz

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

React Js – 4. rész/B – Osztály komponens kiegészítés – Metódus meghívása / Class Component

https://www.youtube.com/watch?v=pUVhKPPnDJA

forráskód: https://codepen.io/blogbook/pen/bGeLOxW

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

React Js – 5. rész – Osztály komponensben Osztály komponens / Class Component in Class Component

https://www.youtube.com/watch?v=Xj1JjnoLAOs

forráskód: https://codepen.io/blogbook/pen/bGeLyQm

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

React Js – 6. rész – Adat továbbítása props segítségével

https://www.youtube.com/watch?v=yNa__KtWx_s

forráskód: https://codepen.io/blogbook/pen/VwjXpZV

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

React Js – 7. rész – Adat továbbítása props segítségével – különböző módon

https://www.youtube.com/watch?v=acZ5wHBfFsY

forráskód: https://codepen.io/blogbook/pen/YzWaZRz

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

React Js – 8. rész – Adat továbbítása props segítségével Osztály komponensnél

https://www.youtube.com/watch?v=6spiRcTxaVM

https://codepen.io/blogbook/pen/mdExXMW

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

React Js – 9. rész – Adat tárolás – State – Eseménykezelés

https://www.youtube.com/watch?v=Kv8OPcsbxg8

https://codepen.io/blogbook/pen/GRqxGQE

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

React Js – 10. rész – Esemény kezelése

https://www.youtube.com/watch?v=-5LB8bdH7Fs

https://codepen.io/blogbook/pen/QWEmxzZ

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

React Js – 11. rész – Első, igazi React program készítése

https://www.youtube.com/watch?v=54BIYsV3dTw

Mi az npm? : https://nodejs.org/en/knowledge/getting-started/npm/what-is-npm/

Node.js telepítés: https://nodejs.org/en/

npm install -g create-react-app

create-react-app react_test_elso

cd react_test_elso

npm start

http://localhost:3000/

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

React Js tanfolyam / course – 12. rész – React App -os weboldal, Bootsrap, Router csomag

https://www.youtube.com/watch?v=Zs6wWxtn2dk

linkek, parancsok:
npm install react-router-dom –save
npm install –save bootstrap

index.js-ben:
import ‘bootstrap/dist/css/bootstrap.css’;

forráskód: https://github.com/minorharpman/freebird_programozo_kepzo_react_tanfolyam_react_test_elso

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

React Js tanfolyam / course – 13. rész – Testtömeg index (BMI) kalkulátor / BMI calculator

https://www.youtube.com/watch?v=zrVLj3xtf4c

parancsok:
create-react-app bmicalculator
cd bmicalculator
npm install –save bootstrap
npm start

index.js-ben:
import ‘bootstrap/dist/css/bootstrap.css’;

forráskód: https://github.com/minorharpman/freebird_programozo_kepzo_react_tanfolyam_bmi_calculator

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
React Js tanfolyam / course – 14. rész – React Js program telepítése szerverre /App deploy

https://www.youtube.com/watch?v=PishKglfeEI

parancsok:
npm run build

package.json:
“homepage”:”https://blogbook.hu/bmicalculator”,

DEMO: https://blogbook.hu/bmicalculator/

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
React Js tanfolyam / course – 15. rész – Posts Projecthez Firebase Cloud Firestore adatbázis létrehozás

https://www.youtube.com/watch?v=Y_HbTXj-ZDA

Firebase Console: https://console.firebase.google.com/

Elnézést kérek, a videókban a NoSQL Firestore kollekciót táblának nevezem.

Cloud Firestore Data model: https://firebase.google.com/docs/firestore/data-model
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
React Js tanfolyam / course – 16. rész – Posts Project Firebase Cloud Firestore kapcsolattal

https://www.youtube.com/watch?v=vHIX74MEKIg

Post Projekt forráskód: https://github.com/minorharpman/react_forum_demo_function_component

Elnézést kérek, a videókban a NoSQL Firestore kollekciót táblának nevezem.

Repo Módosítás:
firabase.js-ben
// időbélyeg hozzáadva
db.serverTimestamp = firebase.firestore.FieldValue.serverTimestamp();
addpost.js -ben
// createdAt: date.toUTCString(),
createdAt: db.serverTimestamp ,

Így a fordított időrendi post lista már működik.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

A Kódbázis oldalon nagyon jó React Js videók vannak.
https://kodbazis.hu/react-kurzus

React Js – Kódbázis “Építsünk appot” Posts videó Gyakorlása

https://www.youtube.com/watch?v=urrChYf7XeQ

Kódbázis oldalon a videó: https://kodbazis.hu/react-kurzus/epitsunk-appot

A videó forráskódja (kicsit alakítva): https://github.com/minorharpman/react_kodbazis_posts

+++++

React Js – Kódbázis “Class komponens” videó – Gyakorlása

https://www.youtube.com/watch?v=gBs1m9ljlFI

Kódbázis oldalon a videó: https://kodbazis.hu/react-kurzus/class-komponens

A videó forráskódja (kicsit alakítva) : https://github.com/minorharpman/react_kodbazis_class_vs_function

++++++

React Js – Kódbázis “A React kontextus Gyakorlása

Kódbázis oldalon a videó: https://kodbazis.hu/react-kurzus/a-react-kontextus

A videó forráskódja (kicsit alakítva) : https://github.com/minorharpman/react_kodbazis_kontextus

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

React Js tanfolyam 17. rész Posts Project Firestore kapcsolattal – Edit funkció (Módosít)

https://www.youtube.com/watch?v=-joN2VDnN8c

forráskód: https://github.com/minorharpman/react_firestore_blog_demo

Olvasnivaló:
Kontrollált komponens: https://hu.reactjs.org/docs/forms.html#controlled-components

React router: https://reactrouter.com/web/guides/quick-start

Parancs:
npm install react-router-dom –save

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
React Js – Kódbázis “Single page app építése” videó – Gyakorlás: Edit, Delete funkció

https://www.youtube.com/watch?v=TXWEG7Lj6lY

Kódbázis oldalon a videó: https://kodbazis.hu/react-kurzus/single-page-app-epitese?url=/

Videóm forráskódja: https://github.com/minorharpman/react_kodbazis_hangszerlista

Chrome plugin: Allow CORS: Access-Control-Allow-Origin: https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

React Js – Kódbázis “Bejelentkezési felület építése Gyakorlása

https://github.com/minorharpman/react_kodbazis_loginform

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

React Js – Kódbázis “Recept App Gyakorlása

https://github.com/minorharpman/react_kodbazis_recept_app

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

URL: https://freebird-react-posts-demo.web.app/

Parancsok:
npm install -g firebase-tools
npm run build
firebase login
firebase init

~~~~~~~~~~~~~~~~~~~~~~~~~
? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices.
( ) Database: Configure Firebase Realtime Database and deploy rules
( ) Firestore: Deploy rules and create indexes for Firestore
( ) Functions: Configure and deploy Cloud Functions
>(*) Hosting: Configure and deploy Firebase Hosting sites
( ) Storage: Deploy Cloud Storage security rules
( ) Emulators: Set up local emulators for Firebase features
( ) Remote Config: Get, deploy, and rollback configurations for Remote Config
~~~~~~~~~~~~~~~~~~~~~~~~~
? What do you want to use as your public directory? build
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? Set up automatic builds and deploys with GitHub? No
? File build/index.html already exists. Overwrite? No
i Skipping write of build/index.html

i Writing configuration info to firebase.json…
i Writing project information to .firebaserc…

+ Firebase initialization complete!

~~~~~~~~~~~~~~~~~~~~~~~~~

firebase deploy

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Post Projekt – Gyermek Post “válasz erre”
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Post Projekt – Admin felhaználók, akik Törölhetnek.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Post Projekt – Átírás Osztály komponensekre
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Tervben:
Laravel – React Js projekt bemutatás (forráskóddal):

https://blogbook.hu/laravel_hangman/public/

WordPress és React Js

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~