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
• Random users say Chuck Norris jokes
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: / webfejleszt
▶ Frontend Facebook Group: / ujratervezesfrontend
▶ JavaScript Hungary Group: / javascripthun
▶ Webfejlesztés Tanulószoba Discord Channel: / discord
#Code #Github #Repo
https://github.com/bzozoo/YOUTUBEVIDE...
Code on CodePen
https://codepen.io/bzozoo/pen/WNXQjGM
Watch video JS App to React JS App online, duration hours minute second in high quality that is uploaded to the channel WebDev StudyRoom 31 January 2022. Share the link to the video on social media so that your subscribers and friends will also watch this video. This video clip has been viewed 85 times and liked it 1 visitors.
