JS App to React JS App

I will create a #React.JS app from #JavaScript app

In this previous video I created an app, what work with Random User API and Chuck Norris API, so I will convert it from JS to React
https://www.youtube.com/watch?v=2SwkyBmMTI4

00:15 Adding the React.JS ReactDOM libraries
00:29 We no longer need to run the render function at load time anymore
00:41 So, We can just delete it
00:51 We no longer need this eventlistener, on GET NEW button, se we can delete it too
01:10 We will use "useState" and "useEffect" from React
01:39 Creating a function based App component
01:59 We use Babel Javarcipt preprocessor for JSX codes
02:25 ReactDOM renders our App component to root div
03:33 We can call functions from React with " { }" , not with "[ ]"
03:57 We can render the "OK" text now to root div, sop React is working now. We can start to convert work.
04:25 A fast test with React useState hook
05:10 We will copy the template structure from TemplateComponent function to React App function based component
05:55 Preparations, deleting things what we don not need anymore
06:25 We will creat a data variable in an useState React hook, with null inicialized data. We will store here the datas what we will get from API-s
06:55 We use useEffect for call API-s
07:34 We will pass the data setter the old render function what we need to modify
08:20 Modifycation of the function
08:50 Testing Data variable on console
09:00 We have to use "[]" as secondery argument of useEffevt to avoid continous rerender.
09:57 If data is not null anymore, we can render the template string in root div
10:52 A little test. We can to print to the console the value of picture key if data not null.
11:16 We can use data object key values in our template
12:35 GET NEW button does not work still. We have to repair it
12:55 We put the button HTML code to the App component
13:12 We have to set flex-direction of root div to column becouse we want this button in center position
13:42 The button are on its own place but it still not work
14:26 Creating renew function what we will use on GET NEW button
14:45 onClick renew function on our button
14:48 Testing our button and it is working
15:13 We can delete TemplateComponent function, becouse wi do not use it anymore
15:32 We are done. We created React.JS app from JS app

#Webdeveloper #JavaScript #Coding #Tutorial

▶ Webdeveloper learning classroom: https://www.facebook.com/groups/webfejleszt
▶ Frontend Facebook Group: https://www.facebook.com/groups/ujratervezesfrontend
▶ JavaScript Hungary Group: https://www.facebook.com/groups/javascripthun
▶ Webfejlesztés Tanulószoba Discord Channel: https://discord.gg/CtBhaBWs95

#Code #Github #Repo
https://github.com/bzozoo/YOUTUBEVIDEOCODES

Code on CodePen
https://codepen.io/bzozoo/pen/WNXQjGM