Learn & Understand React - Understanding React, JSX & ReactDOM | Sandip Gautam | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Learn & Understand React - Understanding React, JSX & ReactDOM

teacher avatar Sandip Gautam, Full Stack Architect @ Credit Suisse

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

7 Lessons (54m)
    • 1. Intro

      1:58
    • 2. What's React and Why you should learn it?

      6:03
    • 3. HTML, JavaScript & React

      11:46
    • 4. Understanding JSX

      4:02
    • 5. Creating CodePen React Template

      2:57
    • 6. JSX Practice

      16:49
    • 7. Why React is so popular?

      10:07
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

20

Students

--

Projects

About This Class

In this series of videos, we will build a strong understanding of React.

This is first in the series where you will understand -

1. What's React and Why you should learn it.

2. React, ReactDOM and JSX.

3. What's the hype around React and why it's special.

Meet Your Teacher

Teacher Profile Image

Sandip Gautam

Full Stack Architect @ Credit Suisse

Teacher

Sandip Gautam is Avid Learner, Blogger & Musician. He loves to do programming. He likes to upgrade himself with new technologies as they arrive. He is a Full Stack Architect and Web Developer having 15+ years of IT experience & 25+ Years of teaching experience. He has experience of working with big banks like Barclays, Morgan Stanley, Sungard and Credit Suisse.

Join me in the journey of learning...

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Intro: Hey, everyone, Welcome, Polone and understand React understanding REAC, JSX and React Dom. In this class, we're going to study React the most popular U Y framework to create the user interfaces. We're going to start with answering the most important question. What is react and why you should learn react. Then we will move on and compare. React with HTML and JavaScript with very simple hello world. Example. Next, we will learn this time. GSX J six is an extension toe JavaScript language on. It's a de facto language created by React Team. Once we understand, JSX will create a court pain react template, which will act as a plea ground for practicing. Once we have the playground, we will practice, practice, and practice will practice. Our GSX knowledge will create some simple JSX element. And then we will move one and create the compound gsx a limit. And finally, we're going to understand why react is so popular. By creating a simple comparison example between javascript and react, we're going to compare javascript and react by creating a simple digital clock example. So who am I? My name is Sandy. Got, um I'm full stack architect at credit Suisse. I'm a Web developer having 15 plus years of experience on 25 plus years off teaching experience. So what are you reading for? Let's get started on, I'll see you and the next video. 2. What's React and Why you should learn it?: So first things first. What react react is a JavaScript library used for building user interfaces. I know there are two big words for the beginner Here. Was this a library on Second as a user interfaces, so let's understand them. First Library library is accord written by someone else to solve a common problem. Next is the user interfaces user interfaces. Is this piece off interaction between human and a computer or a laptop or mobile? So react is a library. It's a JavaScript library created by some of the smart develop ALS, which solves a common problem at their alert, calm problems. We, which we face in our day to day life. And that common problem for us is creating user interfaces and user interfaces, a space of interaction between human and a computer or a mobile well react. This more react is focused on its focused around one thing. Building user interfaces. That's it. That's the beauty of react. But, you know, we don't create our types of user interfaces in react. We mostly cleared lab on mobile interfaces and react like we can take the example off instagram here B and B Bloomberg and there are so many applications out there, which we're going to talk about in the upcoming videos. Now we know what is react. The next question that is popping in your mind is why I react. Why should a laundry? Yeah. So I'm going to give you five reasons why you should learned react on. After knowing this fire reasons. I'm sure you will enjoy learning. React. So the reason Number one, it's created by Freeze book. Have you heard of Facebook? I mean, some lover, some hated. But if you love it, yes, it's created by fees Book. So you know you are in safe hands because react is a library which has been created by Facebook and Facebook is one of the biggest and popular company in the world. Yap is easy to learn. I mean, who would like to learn a technology which will take years to learn, right? I mean, I really don't want to learner technology, which will take me, like 6 to 8 months, Milan. I mean, why do it with so much time in learning a technology, right. So, yeah, it is easy to learn on. You can get started with making applications and react in a day are a week, depending on how fast you go. Reactors backed by strong community. Can you imagine if stack or floor doesn't exist? Like medical Step back here. If you don't know stack, overflow, stack or flow as a community online, which helps a developer in their day to day programming problems, so could you imagine if core flow doesn't exist? Could you imagine the world without them? I mean, think about it. If your experience developer how many times you have visited Stack overflow for help countless times, right? So if you're stuck somewhere on, do you need help? There's someone to help, because reactors backed by strong community to help and, yes, react is used by big companies. Big brides Facebook, Instagram, Twitter, Netflix, Yahoo meal Whats app. Dropbox Attash in cells Foes Khan Academy, Kordic Enemy, New York Times Reddick Tesler, BBC Get up Paper Uber Pinterest. You'd me slack deserves some of the big names, which I can tell you the use of yak and this list will go on and finally flipped. And the most important reason I can give us money. Yes, you can, on more money by loaning react so if we go online and check on Google Board is react. Developer salary. You can see the 2019 every two reactant years. Developer salary in the U. S. Is 1 $20,000. That is about $57 but are on, you know, on entry level position. It starts around 52,000 per year, while most experience workers and makeup toe to lack. But yet after two good money and this can be one of the good reason to learn. React. So now you know what is react on why you should learn react. It's time to move on and create some of the user interface is right, because react is all about creating user interfaces, and you must be excited to touch the surface off, react and see how. Actually recreate the user interfaces react. So let's mourn ons start creating some of the user interfaces 3. HTML, JavaScript & React: So to keep things easy, I'm going to court everything in the browser I don't want to get into. The details are creating react development, environment and all those things which I'm keeping for future videos. So we're going to used of their browser directly. That will keep things easy for you. So on the Web browser, you can use anywhere browser I prefer. Cool. You just need to search for court pen. Click on the court pen. First link on. We're going to create all vehicle to write all of our programs here inside this application on the process. So here you just need to so on the court pain. Probably. You can log in tow your get up account so that you would be able to save decode your writing on. And obviously I'm going to share all of this lengths with you so you can typically visit those links and follow along. So in the court pain, I'm going to create a new pen on you see, Andi, I'm going to deem it Hello Html because we're going to say hello, world next email first. So we have three different. We have different tabs here, like html CSS Js and the result Hap will see the result here on the right hand side. So I'm going to select html tab find I mean, this will be really easy one. So if you want to say hello world in HTML, you just need toe. I could hear the actual tag Maybe on dried hello foot I usually that we see Valcourt hello world in the output window So I've just straight and simple actual intact with hello work It's really easy. I mean, creating hell were in a CMA. So I'm going to see if this on Let's open a new tab and I'm going to create a new pen here for hello world in javascript. So if you want to say hello world in javascript how we could do it So obviously if you want to say hello well, in Java is completely to use JavaScript tab and I'm going to go into JavaScript tab here on . I'm going to write a really simple court document to document this object in javascript, and I'm going to access the body element and inside that body element, I'm going to write some HTM Oh, and tight html would be similar to what we have written and html cord Hello? Boiled here. Simple. Right. So you can see the output. Hello, World in the output, Wendell. And now the fun part. How to create hello world and react. So I'm going to open a new tab on We're going to use court pen. I'm going to open clear the new pen here on this new pen. Actually, we need to do some second before we get started with react. Because react is not something which is building to the browser it is outside grows it right that she mlc asses and javascript the belonged to browser. But react doesn't belong to browser. So first we need to bring into the act into our core pain environment so that we should be able to create react examples. So we need to click on this. I can click on settings Onda, you see different tabs. Elec html CSS is we need to go to Javascript on. We need to either pre processes here. So just go ahead and select people. Then you're going to school down the picked on. We need to use some external libraries so you can see like we can start for some of the cdn zero. Like what? J query load ash react angular. So we need to add react. So I'm going to search every act on score down a bit. Yeah, we got to react. So I'm going toe I'd react. And also we need reacted. Dom's I'm going to search for reacted dawn. Maybe not here. Here to search for the act. Don't. Sorry they don't. Well, im not spelling it dried, so yeah, I got to react on on way using dissolution. Maybe you can use different version. So right now, while I'm recording this video, I'm using this version. You can go with another version there. Yeah, dome. So you see, I have magic. Two different lives. Reason one is react on. The 2nd 1 is reacting. So maybe I can be moved us because we don't need it. And let me check. Once again, we got react and react. Don't on. Uh we have reprocesses it as babble Soviet. Good. I mean, this is a smallest and the simplest second video between the browser. We don't want to get details up creating reactor development environment for now just to keep it simple. for the beginners selectable one. I'm going to see even close. So creating hello world example and react would be us two step process. So the first step is to create an element, and we're going to leverage our JavaScript knowledge here. So I'm going to go into the GS tap on. We just need to create a new variable. I'm going to call it a limit on this will be the same actual element we have created in HTML and Javascript Example. So I'm going to create Ah, hello, world element like this, I So this is stuff. I mean, this is just I'm creating a constant element, which is like, actual Hello world. The step to would be rendering this element into the dog. So we use something called a react Dom react on his object and which has a meta cord render . And inside this rendered matter, I'm going to pass the element on I need to tell react on where to render this element. So I'm going to target talking land dot Get element by I d on. I'm going to target rock element. So yes, we have created element with a hello world and H one tag on. We have used reactor. If you remember, We have added react on while creating this pen in the dissecting sparred here. So I'm using react, Dom to render an element and very during to that element is a second argument. That is I'm targeting document Dark Kate element by idee route. But you don't see any output here, right? Because we don't have this route element in the document. So I need to go to html on. I need to create that root element. So I'm going to create active with an I D off. Good. Hoped on. There you go. We caught the hello world whole. Put in the art. Good window. Select. Do a quick revision. You're like, what's going on? That maybe like a lot going on for the bigness year. So what I did, I went into the JavaScript tap on, and I have created element. And don't worry about the same tax one. Now I know he must be thinking something about this syntax, and and you must be curious to know, like, what's going on here? Why you're writing the such gmo inside jealous God. But don't worry. I mean, we're going to discuss about it. First, let's understand the process, the two step process off, creating an element and react on rendering that element in the dog. So I've created an element called actual with hello work text and I have used react on object and it got a matter called Arrendel and I'm rendering the element where am rendering the element inside the document toward cattleman by I d route. So that route element I have created inside HTML. So whatever you're rendering here like this actually is getting rendered inside this route element. So if we do a quick comparison between HTML javascript and react if I go back to my html example you see, it's been easy in html, right? I mean, I just need to clear the actual element on this getting rendered do the dumb. When I render with the JavaScript route, I have ah created the similar HTML element as a string on, and I have rendered it in tow. The party and things are but complex and react I would say I mean, I have created element than I have used something called React under trended toe rendered that element. I mean, what are the advantages I'm getting out of react. I mean, we can't do this comparison In a simple hello world example, you will soon start to see the our of react as we move on with more complex examples. 4. Understanding JSX: no. Let's dive deeper into our two step process off, creating an element and rendering the element into the dom in react. So, as I said, you must be thinking, What is the same tax I'm in? Why you're writing html and a sign that that steamer to the element. Aggie. Right? So it's neither html not a string. It's card G s sex. And it's a syntax extension to JavaScript and react a recommend to use GSX as a de facto language to clear user interfaces and what Jesus produces his coil and element and react. So if I go back toe html, you know this is the language of HTML. The such one is the language of botched email to create the element time while the rendering part is handled by the browser. If I come back to react, GSX is a de facto language for REAC is the same tax were going toe used to create all of our user interfaces, and the second step is a rendering that particular element into the into the reactor dom. So in case of that shema, we have just created the HTM element element banged up. Does it takes care of rendering that particular element into the dark. So in case of react, we took a step back and introduced one more time When mortem in big Green called react. Um, on react, Dom took the responsibility off, rendering the element into the dark. So here is a high level comparison off how things are happening in HTML chalice, carpet and react to some individuals in case off html, we just created a limitation we have rented directly to Tom in JavaScript. We have created an element and we have rendered into the interest Dom. And in case of react, we have created an element we have used. Reacted, Tom. So we have given the responsibility of rendering into the dom to reactor down first and behind the scene reactor as a rendered that hello world element into the top. Now you must be thinking why we need react dumb. But having this react, Dom has several advantages which we will discuss as we progress in our journey of react. And if you're curious, I really need to tinkle water. I'm going to give you one analogy here. I mean, take the example of buying a product like so instead of buying directly from the cellar. Think like you're buying it from Amazon. I Amazon is taking care off all of the services for you like delivery replacement refunds, ex cetera. I mean, you can directly you can buy the product directly from the cellar, but you need to understand the seller for us, right? And Amazon is a popular name in the e commerce industry. So instead of directly buying from the cellar, if you buy from the Amazon, you have your own advantages, right? So think like this. Amazon is like a reactor. So instead of directly going into the Dom, I'm in the cellar part. We're taking help up, react on which is like Amazon do by the product. So this is one of the analogy I can give to understand on a high level, and we're going to discuss but more about it in the upcoming section 5. Creating CodePen React Template: So I'm going to go back to my browser, and this time first step would be I'm going to create a template and I'm going to tell you how to create a template for the reactor project in court plan. So first will create template, and we're going to use that template for creating our separate small react applications. So we'll go to court pen. So if you go to this option here, you know, we have an option called pen from a template, and I haven't created any templates yet. So let's go ahead and create a template first so you can see you have no template. So let's go make one on If you remember the sect things we have. So I'm going to name it first, the, uh, template Andi going to go the settings we need to go to J as and select empty passes that as people and I'm going to add to react and react Dom Cool. So I'm going to save in close, Andi, I'm going to put some and I'm going to put some html also for rendering into the doll someone to clear the death. Give it the idea off on There is one more step that we need to do to make this particular file as a template to go back to settings. Yeah, I need to go to template time here on. We just need to stay target on this option. Click on seven Close, and I think of your ready with our template. So let's go back to dashboard on Check with template. This there or not, I'm going to go to Penn from Template. And there you go. We caught our react tablet ready, and we can use this template for creating all our small react applications. 6. JSX Practice: Now we know the two step process off, creating an element in react on rendering that element into the top. Using the react dawn object in this section, we are going to take our GSX skills to the next level. So now we have created a very simple hello world application in react or I'm going to rename that Hello, er application toe greater application from now. So we want to go beyond right. We want to make our next instagram. Maybe our Airbnb on Twitter on may be your own product on application and we took a small step towards making it, even if a small greater are a hello world element. Looks like small in size. But all applications do start small, right? Do you remember the definition of GSX? It's an extension to Jolla scope. I mean, it's an extension to JavaScript sang backs, to be precise. If I see you can use javascript inside GSX, it might start sounding like a music to you because then you get all the power off the most popular language off develop JavaScript And the good news is yes, you could do that. We can use variables and even functions inside inside, Jess. Six. So we're going to extend our hello world program, and I'm going to call it a cripple program Greeter program from now on. But if you see our hello world program is saying hello to the void, what if you know, I want to say hello to someone specific, like hello to John our hello to Julie. Right? And we can do that using the power of JavaScript inside GSX on this time I'm going to could court pain on. I'm going to clear the new project using the option court from Template. And I have already told you how to clear to template. You can go ahead and watch tack particular video. So we're going to create the template from react template. And I'm going to name the spam pen as she sx real people expression. And we already have the root element. But we don't have anything. The JavaScript. So I'm going to go back to my hello react program, and I'm going to copy this cold from here to here. Let's remove this JSX from here. So you see, like in this program, were saying hello to the void. What if I want to say hello to someone specific, right? Maybe I have something card A name reliable here in Javascript, where I have name as John Smith, and I want to see hello. Hello to John Smith. How can we do that? Find? You know, As I said, GSX is extension to JavaScript so we can write jealous grip inside GSX. And how can we do so how to do that? And it's really a cakewalk. We just need to remove this world because I don't want to say hello, world. I want to say hello to John Unity used as saying backs card curly brackets, I we just need to pass the name variable here. And there you go, messing Hello to John Smith. Simply right. So I have created a jealous variable core name with a value of John Smith. And I have used this curly bracket Syntax Andi, I have put in the name variable inside this curly bracket. So whenever you want Oh, right. Any javascript accord you need to put indo this Kali bracket and there should be a valid JavaScript syntax unit right here, so I can give you some more javascript example inside this curly bracket. So, as I said, you know, you can write any value JavaScript syntax here, so maybe you can do some calculation also. So I'm going to write some two plus two. Like how we do additional, Jascha so you can see hello four and have put I can even call javascript functions year. So there is a mat object in JavaScript in I can call Mad Dog Random 100 Saying hello to random number. You see the power of JavaScript we can use inside GSX. So I'm going to do my program and be able to say hello to name only. So we'll go back to the state of areas We were saying Hello, the John Smith. And you know, we're not limited to using just name very well here. I mean, we're not limited to use three variables here like a have use name variable here. You can even call functions inside these curly bracket. So let's see how we can call ah, function inside curly brackets. So I'm going to create a new pen for that just to keep things simple and separate. So I'm going to see this pen on Good to clear the U Penn charm, the template and just for the simplicity. I'm going to copy this cord Shahm here to here and let's tied call of function inside the curly brackets. So first, let's name the pen here, and I'm going to name this and as she has X function expressions, because we're going to write function inside our GSX. So I'm going to create a user object here which is going toe have two different properties . So I have a user object, that first name and last name hand. I'm going to create a function called for Mac name. There are good past issues that object, which is going toe return. Use their dog last name Andi. Use a dark last name. So I have user object with first name and last in properties have cleared the function for Mac name, where I'm passing the user object and it's returning using your first name, plus use a dark last name with the space a bit up concatenation, which is happening here. No, let's call this function inside our GSX expression. I mean, it's like Harvey calling a name here instead of name. I can call for mad name that use it. Andi anything I could edit. Here, let me see. Encore difference were Mac Name is not defined. Cool. So I think I have to type. Oh, yes, I dispelled it. So I got the type of your I have corrected it. Former came in that we go, we gotto Hello, John Smith as output. So you stood up so you can see we can call functions inside our curly brackets. Here function is also violent JavaScript in tax. So you can either use variables, you can use functions and they're like a lot of different things we can do using the beauty of GSX here. So you see the power up GSX, right? So let me see the spent on and let's more one. So if you see this element them and I've created just a single actual element here. But in GSX we can have hierarchal d d as well. I mean, we can have element, which has Children. So let's create our nest next example and understand how we can create hierarchical data up in the element in react chugging. I'm going to clear the new core pen. New pen. I mean to say in the court and, uh seen. We've been cleared from the template. I'm going to name a Children. It she has sex for the sake of simplicity. I'm going to copy this example from here and the institute noting movies J six. So you can see I just have this actual element here. Maybe I want to create some higher trade data. How can we clear the hierarchical data? NJ six start. We're going to look into this part, so I'm going to use this in their own brackets because I'm going to have a high Recoleta. So you just need to use this around backwards on then you start writing your HTML inside its I'm going to have a death. I would development here on inside that deaf I'm going to create to actually elements Forest Tuchman is going toe. Have a string chord, John, I'm going toe Copy this. Actually P stick on going to write another string will be Say good to see you. Yes, on. There you go. You can see Hello, John. Good to see you here. Have created element intact Element Can have any valid HTM Elikann salmon. Anything you can put in any big, long as Tamil you can put in here. But this is not html. We know this is GSX our extension to Java scrip. When you observe all of this HTML elements we have written inside JavaScript code there actually get converting to JavaScript cold by a compiler card. Babel on the converted. Jealous Could court actually runs inside the process because, you know 1000 because you know it problems it understands html CSS on JavaScript. These are the three things which browser knows on this is GSX. GSX cannot render. I mean, browser cannot earn building gsx. So behind the scenes, actually, what's going on here? All of these elements are getting converted and do javascript cord. So actually, what is getting stored inside? This element is javascript and finally died. JavaScript is getting rendered through this element in the road attack. And I'm going to prove Mom, I I'm going to tell you how that happened. So let me for us to save this pen, and we're going to see the simple example First toe. Maybe I can code water. Hello. React example on. I'm going to show you like how this actual element out of this GSX syntax is getting converted. Are getting transpired combined. I can use all of this words there look similar and do a job. So to do that I'm going to copy this string this GSX string on You just need a good people time people in the bouncer. Or maybe I type people tons by Andi Click on this, people JIA, start aipo side and click on Try it out. Andi, you see the left inside the reactor selected and stage to a selector. So I'm going toe paste my GSX element here. You see, this GSX element is actually converted into react Art create element function Quote So react is that react object and it got a function called create element. I bet I can pass these different arguments so all of this Jessica Element are actually getting done. What do you do, John? A school record. So this is very simple example. I mean, if I go to my Children example Children with ts X and if I copied this GSX on the studio, You see, this is a bit big JavaScript court, you know? I mean, what is happening behind seen react is creating all of this element is cleared ing the Steve element in Javascript, then inside that they were dis creating this. It is creating the force. Tuchman tagged and the 2nd 1 die. So it is calling all of those of the act element calls. So for the dead inside, like there there is a call for careered element The first touch one There is a call for greed, element second, actual attack. And if you compare both of this and which one looks easy to you, it's it's easy to pick you and I mean this impacts is very user friendly. This is jealous. Krypton were to write all of these cleared element calls for creating all of the and shame a little birds, right? This is simple. This clean. This looks beautiful and this is really easy to learn. That's why the smart developers at Facebook they have created this extension to JavaScript card gsx. Now you started seeing the beauty of GSX, right? And what would you prefer if I ask you gsx r jealous cup? I think you have the answer 7. Why React is so popular?: why they're so hyper react and my reactive special. Now you know, but up GSX, you know, bit off creating elements and GSX and render them into the dumb. You must be thinking we can do the same thing using JavaScript right on and any other framework out there in the market. I just wanted to give you a tip of the ice in this section. In this lesson, not in this video on we can discuss more about it in upcoming lessons of reduced. So what's special about REAC? So we're going to make our dump a bit unlimited yet. So if you know a second terrible function in JavaScript, you know where we can call function indefinitely after a certain interval of time. So let's start with back. So again, I'm going to create and you court Ben from the Templar Onda look straight, some jealous cooked. So I'm going to write a function card tick on inside my pick function. I'm going to log, see ticking each second aunt. I'm going to call this function using in buried function off, JavaScript called said Interval. I would call my pick, function everyone sick, and let's see the console So you see, second drivel is calling the tech function at 31 2nd on it is logging. Taking each second. You see the output in the council. It's logging this, taking it second after every second past. Now I'm going to take this pick function to the next level. Some called the copy and paste the element court that clear just to save us some time so you can see have cleared in an element with their own back. It's because I am having the hierarchical earlier that year. So I have a depth inside active I have created, actually which is saying hello, world Really simple. And I have watched two element on it is saying it peas and then I have a JavaScript expressions when packs inside that you know I'm creating a new date object. Now this is javascript. I'm creating a new dude object on. I'm calling a function called to local time string of that particular create object. So what? What it is going to do? It is going toe. So what is going to happen here? You know, the stick function is getting called after every one second. So this is going to create this element of it with the dude object. After every second on, Alexis used this tech function on Lee, and it sort of surrendering the element outside here. I'm going to render the element inside dick function. Just make court big, beautiful and I'm going toe removed. The consul's you see down put so my element So the stick function is reading called after each second. It's creating an element, but it is creating this edge to tar with new date object after every second on it is taking this element on rendering into the dom. Actually, you know what is happening here. This hello world is getting rendered on this deed. Object is getting rendered with recent time after every second. So basically, I've just created a digital flock here. I mean, nothing special, but you must be wondering what's so special about it. I mean, you just rendering the element inside differ inside a big function after every second, and I'm going to show you some magic here, so I'm going to open the door afterwards, so I'm going to could go here and for the more tours open developer tools. I'll show you something special, which is happening behind the scenes. So we're going to inspect this element. I'm in the right. Click and inspect. Just look at this. Even we are rendering the entire development you see here this development which has a hello world and this edge to which campaigns the this etched over which contains the new data object after every seconds. Can you see the changes where the changes is happening here? It is not rendering the entire development. Even I'm creating the and I development. But it's not rendering the entire development. It's just a rendering. The part which is changing this is something beautiful happening behind the scenes. This is what react arm is doing behind the thing. And I can prove my point toe a javascript example. So let's create the similar example and JavaScript on we can do all right comparison. So I'm quickly going to create similar example in javascript. So I'm going to open a new tab, follow the same steps, right? I'm just creating a new pen. Yet I think hydro nude Babel are, I mean, the react template on just to see if time I'm going to go into Gs tab and I'm going toe beast, some cord. So you see em? This example is very much similar. I just created pick function here, and this is plain javascript. I'm not using any react here. You can see have clear to the root element where I am targeting document Don't get element by the rules. So we have the We have the road element in that stable. So I think we need to clear the road dilemma dynasty And also like me creative element and h t m o with Andy off. Okay, so we have a road element. I can go back to JavaScript so I ever take function where I'm targeting the root element. Onda, I'm saying I'm using Rude Element or encourage Tamil and Amberin bearing the same element part of the HTML string. Why do we have used a nada gsx example? So this is some leveraged family we have. So I'm using the same HTML but as a string I'm and I'm rendering into the root element. And the stick function is getting card. After each second you see it and output the same, right? You see, the hello world on the clock is ticking after every second, but the most important point I wanted to show you is hiding in the developer tools. So I'm going to open the developer tools here on Let's inspect this element. You see, the entire root element is getting refreshed. You got the point. Now I come back to my react example, you see only the part which is changing. So we know the date part is only changing, and react is rendering on Lee the date part. But when I come back to my job script, for example, we know that date part is the only part which is changing. But you see, here JavaScript is rendering the entire route element into freedom. Do you see the power of react? I mean, what power react has? I know, I know we can do the same in JavaScript also, but this special thing is already handled by react, and it's a react. Um, and React has something called Virtual Dom which react careers before rendering it toe the rial browser dog so react behind the scene identifies the elements which has changed on a renders on lee the cheesed part into the dog and not the entire element. This is the power of react. And I know we can do this and that. And I know we can do this in JavaScript, but I mean, doctoral burial complex. I mean, this is very small example where we're just rendering the deal. But imagine when we create bigger applications like Instagram our fees book on Airbnb. Do you think we can achieve that? Using JavaScript. Justin Gordon on. I'll see you in the next section.