Naan Mudhalavan Frontend Development Session - 7

30:32 Hello, good morning all. Welcome to the front end development uh with React and powered by MongoDB. So I hope I'm audible and my voice is clear. So we'll wait for another five more minutes and then we'll start our session. we'll begin with our session. Till then ask your uh friends to join the session. Okay. Till then stay tuned.

36:50 Good morning all once again welcome to the front end development with React powered by MongoDB. So now without delay without any delay we'll be going to start our today's session. So let me just tell you about in the last few day I mean in the last sessions we have discussed about the JavaScript and we have discussed along with the advanc JavaScript topics like asynchronous programming call backs promises a sync aait call back h like the advanced topics medium topics and basic topics of in the JavaScript we have discussed each and everything we have discussed in the JavaScript. Now in

37:35 today's session, we'll be going to start with something called React. Okay. So before going to start with React, I'll just tell you the why we have to use React. What exactly is React? What are the benefits of using React along with the JavaScript? So as we have already discussed uh to build the front end of any application, we use the technologies like HTML, CSS and JavaScript. Now to build the structure of a web page we use the HTML to add the styling we use CSS right to add the styling we use CSS and to add the functionality we use the JavaScript. So I hope everyone clear these three points right for building the HTML for

38:20 building the structure we use HTML for styling we use CSS and for adding functionality we use the JavaScript. Now this React is something like library. Okay, React is something like library which helps us to build the front end application. Okay, which helps us to build the front end application. Now let's suppose it is like something like a predefined pre-built thing to build the thing. Now we have taken the example of home, right? So HTML is structure, CSS is like painting and JavaScript is like adding the electricity and all. Now this react is like a template. So this is the pre-build house. Okay, React is nothing but like pre-build house where we'll be

39:06 having each and everything. Now we have to just take and utilize this. I mean we have to just take this and utilize the things from the React. Now let's coming to the point like React is nothing but it is a library. Okay. It is a

39:57 Okay, React is a JavaScript library for building the front- end applications. Okay, React is a JavaScript library which helps us to build the front-end application. Now react has a top three most feature like we have mind like so if we have already HTML, CSS, JavaScript then why we have to learn React and why we have to build the applications using React means React is a library. Okay. And React has a React is a faster as compared to the JavaScript. to build a web page or to build a web application using plain JavaScript, HTML and CSS, we will be hardly going to get one day, right?

40:43 We'll be in hardly one day we can write the code and we can build the application. But if you want to build a application with the help of React, we can build the same application within 2 hours instead of taking the whole day for writing the code for the web application. Now with the help of this react we can able to write the complete applications code within a two hours because of in react we have already a predefined things like we can just export I mean we can just import and we can use this components uh we can can use the uh def we can use the functions we can use the components we

41:29 can use the whatever the things are there we can directly use inside the react. Okay. Now react has a top three features. Now let me share my screen. Just give me a moment.

42:18 I hope my screen is visible now, right? My hope I hope my screen is visible now. Now here let me just write down first like what is react is a JavaScript library

43:05 for building front- end applications. For building front end applications with the help of React. We can build applications very faster. Okay.

43:53 And React is a faster React is a faster as compared to other libraries compared to JavaScript and other libraries. Kick React is a JavaScript library for building front-end applications. With the help of React, we can build applications very faster and React is a faster as compared to JavaScript and other libraries. Now let's see what are the features of a React. Okay, first

44:40 feature features of React. something like single page application uses component-based architecture. component based architecture. Third thing like React uses virtual DOM or

45:27 React is it is a it's a declarative. Okay, these are the top three features of React application. Okay, these are the top three features of React application. Now with the help of React uh with the help of the ReactJS or React, we can able to build the single page applications and it uses the component based architecture and it's like a declarative. Now let's understand what is single page application. Before understanding single page application, we have to understand what is mean by multi-page applications. So normally whenever we create the applications or

46:13 whenever we talk about the applications, we'll be having two types of applications. One is like single page application, another one is like multi-page application. Okay, we having two types of web applications. One is like multi-page application, another one is like single page application. So now multi-page application means okay multi-page application means whenever we try to render anything in the multi-page application the complete page gets disturbed okay the complete page gets disturbed but in single page application whenever we try to render anything whenever we try to click on anything it won't rerender the page again and again okay in multi-page application whenever

46:58 we click on a button it will render render the whole page but in a single page application when we click on a button it won't render the whole page instead of that it will just render that particular component. Now let me show you the example okay let me show you the example for this Now for uh to relate with the real time example I'm just taking the flipart application. Okay. I hope everyone aware about the flip card. It is a one thing like e-commerce application.

47:44 So as uh this is my web application. Okay. This is my one web application. Now here you can see we have the logo, search bar, login button, cart, become a seller button, groceries, we have one banner, we have one corrosol, we have carts here, right? So now just look on my cursor here. So whenever I click on this grocery when we click on this any button or any component here you can see when I click on this mobiles here you can see the

48:31 page is getting render. Okay I mean the page is getting reloaded. So when I click on this flip cart, okay, when I click on this flip card or when I click on the uh one more thing like flight bookings, now just look here. Okay, when I click on the flight bookings, just look on the uh reload reload option, reload icon here. Okay, so when I click on the flight booking, now here you can see the button is getting reloaded. I mean we the complete reload icon is getting reloaded because of this is a one multi-page application actually the multi-page applications are little bit slower as compared to the single page application because of whenever we try to render anything okay whenever we try to click on any button so it will

49:18 disturb I mean it will reload the complete page as of now here I'm just trying to get the flight bookings but it is uh disturbing each and everything inside the Flipkart application. Okay, this is about the multi-page application. Now if we come to the uh single page applications, we have options. I mean we have examples like YouTube, email, each and everything. Okay, now let me just uh open the YouTube itself. Okay, let me search for YouTube. Now this is my YouTube. Okay, now here you can see on the left hand side we have the buttons, components and all. Now here you can see when I click on the watch later or when I click on anything the page won't get rendered here. Okay. So

50:05 now here you can see first I'll click on the liked videos you can just uh look onto the uh reload icon here. Okay. You can just look onto the reload icon when I click on any button here. So I'm clicking on the like button. Now here you can see it is not getting reloaded. Okay. When I click on the playlist here, you can see it is not getting reloaded. When I click on the watch later, it is not getting reloaded. When I click on the subscriptions, it is not getting reloaded. When I click on the charts or when I click on the home, so whatever the uh button click I'll give. So it will render that particular component. Means when I'm whenever I'm clicking on history only the history is getting reloaded instead of the complete page

50:51 only history is getting reloaded in the single page application. So that's why single page applications are little bit faster as compared to the multi-page application. Okay understood? Let me tell you once again we'll be having two types of applications. One is multi-page application. Another one is single page application. So multi-page application will render on each whenever we click on a button so it will render the whole page and whenever in single page application whenever we click on any button it will render only that particular component. So these are the two live examples for the multi-page application and single page application. For multi-page application you can relate with the flip card. So whenever I click on anything in the flip card the complete page is

51:37 getting reloaded. Let me show you once again. So I'll click on mobiles. So you just uh look on the this reload icon here you can see when I click on this the button I mean icon is getting reloaded. But in the multi single page application when I click on the home here you can just see on the icon the icon is not getting reloaded means the uh page is not getting reloaded. I mean the complete p whole page is not getting reloaded. It will reload. It will render only the particular thing. Okay, understood. So this is about the single page and multi-page application. Now React uses the single page application. Now mean with the help of the React we can able to build the single page application. So that's why

52:24 React is a good and React is a for building the applications. And now second thing like React uses the component based architecture. Now what is mean by component? Component is nothing but it's like a small function. In JavaScript we have studied functions, right? In JavaScript we have studied functions, right? Function is what? It's nothing but like it's a piece of code or it's like it's like a a block of lines of code whatever we can say it's like a simple task what whenever we need we can just call that function or task. Now in the same way in react also we can relate this component to function. Okay we can relate this component to function. So

53:10 earlier okay earlier whenever we create a web page with the help of the JavaScript HTML CSS we write the code I mean we write the each and every line of the code one by one but in react instead of writing the code uh down by one by one so we'll be going to divide each and everything inside into the functions okay functions mean nothing but components in the react we are going to divide the each code in the components. Now let's suppose now this grocery is one function, mobile is one function, fashion, uh electronics, home and furniture, appliances, flight bookings, beauty, toys and more, two wheelers these are the functions. Now in react

53:57 instead of saying to the functions we'll say like component. Okay, this is like mobile's component. This is like grocery component. This is like fashion component. This is like electronics component. Home and furniture component, appliances component, flight booking component, beauty, toy, toys and more component, two-wheer component like that we'll just divide the each and everything into the components. So uh whenever we divide the our code into the components it is very easy to understand and it is very easy to maintain. So that's why we use the components inside the react application. Okay understood. And the third feature is like it's a declarative. Okay. React is like a

54:43 declarative. Now we have two types of words like one is like imperative another one is declarative. Okay. One is like imperative. Another one is like declarative. Now imperative means in that we have to say each and everything. Okay. And in declarative we can uh we can just say the simple things. What what what now if we take with the real time example. So if you want to build a home or if you want want to build a residential building. So we'll just take uh one civil engineer. Right? So one civil engineer in the imperative. Okay. In the imperative to build a house they are going to we going to hire a one civil engineer or one contractor. Now for that particular

55:29 civil engineer or contractor or builder we say each and everything. So like that we need the two uh so in the 13 uh 1350 uh square ft we need the three bedrooms, one kitchen, three bathrooms like we specify along specifications we'll be going to tell like that. So I need the this much many big bedroom. I need the 10 by 10 ft in the bedroom kitchen like that. Each and everything we are specifying in the imperative. But in declarative we hire a civil engineer. Okay. We'll just we'll just give the land and we'll just give the money. So we'll just say like that I need the three BHK house. So it's up to it's up up to the engineer how he built. Okay. What are the material he used up to him.

56:16 Okay. Understood. In the imperative we hire a civil engineer. We tell each and everything and we him to like that use this particular brand cement use this particular brand paint whatever the specifications we in detail we specify but in the declarative instead of specifying each and everything in a deeper way we'll just say like that I need the 3BHK house this is the money this is the uh so and so I'll just tell like this is the land this is the money just build the house and give me. Okay, this is the definition for the imperative and declarative. Okay, understood. Now, in the same way, React is also like declarative. Now, in React, if you want to build any functionality, if you want

57:02 to uh design any functionality, we no need to tell each and everything. We can just select that I need the particular thing like I want to add the date and time on my button. I'll just going to install I mean I'll just going to download uh I'll just going to uh use the npm packages and all. Okay, this is about the react features. Let me just recap. React has a top three features like single page application. React uses component based architecture and it's like a declar I hope everyone understood the uh I hope everyone understood the features and what is mean by react. Okay. Now if we talk about the React history, React was built in 2011 or 13 by a employee from

57:48 the Facebook. Okay, React is built by one employee from the Facebook. He was working for the Facebook. But he realized like that why couldn't I built a library for building the React applications. Now with the help of this React application, we can easily build the small scale applications on the go. Okay, we can able to build a small scale applications on the go without any disturbance, without any time lacking. We can just build the application. This is the simple history of the React. Now, uh in React the current version, we are using the React version 21. Okay, in the React we are using the React version 21 that is the V21. Okay, V21. Now to run

58:33 the react okay to run the react I mean to create the application of the react we have to use something called NodeJS okay we'll discuss about this NodeJS in detail in the next semester but I'll just give give you the overview so actually NodeJS is nothing but uh it's like a environment for running the JavaScript applications okay uh we know that React is also JavaScript okay React is also a JavaScript but it's like a something different okay It's like something different. Now to run the React code, we have to install the I mean we have to install the NodeJS software. Okay, we have to install the NodeJS software. Now let me just go and search for the NodeJS software here.

59:19 NodeJS download. NodeJS download. All of you please search for the NodeJS download here. If you open your Chrome, all of you open your Chrome. So you will get the first link like download and install NodeJS. Okay, you will get the first link like download and install NodeJS. So first click on this download and install. So all of you

1:00:06 please click on this uh download and click uh download and install NodeJS. So once it shows this particular thing. So here if you just scroll down okay if you just scroll down here you'll be having the buttons for the windows. Uh mostly the people are students are using Windows. So if you are using Windows just select the Windows. Okay, select the windows. Keep the architecture as same. By default, this application will capture your architecture of your A system. So, just click on the Windows installer. Okay, click on this Windows installer. So now it will start downloading. Okay, it will start downloading. It's like only 30 up to 30 MB. Okay, it's like up

1:00:53 to 30 MB. And for node, we are using the version 22. Okay, for node we are using the version 22. Once it is downloaded, okay, once it is downloaded, just click on this. Okay, so still it is downloading. So once it is downloaded, I will show you the next process. And if anyone using some other uh operating systems like Mac OS, Linux or AX just select the Mac OS. Click on Mac OS installer. If anyone is using Linux, select the Okay. So if anyone using the Windows or Mac, I mean sorry Linux just select the Linux

1:01:39 and install the zip folder for them. Okay. Now once your NodeJS is downloaded, okay, once it is downloaded, once the MSI package of the NodeJS is downloaded, just click on this button. I mean just click on this download. So now it will ask like that welcome to the NodeJS setup wizard. Okay, welcome to the NodeJS setup wizard. So after a few seconds it will say like that. Click on next. Okay. So all of you please just uh follow the process like click on next, next, next. Now here you have to check. Okay. Click on next, next, next, next. Install. Okay. Install. So click on this button. Okay. Click on this button. So

1:02:26 click on next next next. Uh check the box and click on next next. Okay. So it will uh download the NodeJS. Okay. Now here you can see in my system it is starting downloaded. So after a few seconds it will ask like that do you want to allow this app to make changes to your device? Yes. So I want the changes to I want to be changed uh some changes in my laptop with the NodeJS. So I request all of you to please follow up the process and download the NodeJS. So if the NodeJS is installed or if the NodeJS is downloaded in your machine then only you can able to create the React applications. Okay. Without the NodeJS, okay, without the NodeJS, you

1:03:13 cannot run the React application in your system or machine. Till then if it is it is downloading let me just go through with the react documentation. So let me here search for react docs

1:04:04 react docs. So now here you will be having the https col//react.dev. So click on first thing like react. Now this is the something like react documentation from where you can able to uh learn I mean you can able to get to know about the react more deeper how react works what is the react and all. Okay. So if you want to learn React just click on the learn React. Now here you have the quick start. So welcome to the React documentation. This page will give an introduction to 80% of the React concepts that you will use on a daily basis. Okay. So you will

1:04:51 learn how to create a and nest component, how to add markup and style, how to display data, how to render conditions and list, how to respond to events and update the screen, how to share the data between components like you will be going to learn each and everything. So if anyone interested, I recommend you to please just go through with the react blocks. Okay. And now if you need one more documentation here you'll be having the one more documentation here. So this is also the react docs itself. So both are official. So actually this is the old documents. Okay. So the react organization is the old documents I mean the legacy. If you want to go go with

1:05:37 the new so you have to click on the react.dev I mean the first link that we have opened earlier. Okay. Now we have the one more thing called MDN docs. So these are also the something like official they will post I mean uh they will post the articles about the react it is the something like organization for react which follows and which gives the update daily updates on the react. Okay. So you understood? So you from the react.dev uh react.dev you can just uh access the react documentation. Now let's come to the uh install

1:06:23 installation here. Now here you can see completed the NodeJS setup wizard. Click the finish button to exit the setup wizard. Okay. Let me just click on finish here. So now here you can see the Okay. Now here you can see the react I mean NodeJS has been installed. Now to cross verify NodeJS is installed or not. I request all of you to please open the command prompt I mean the terminal global terminal. So after downloading and installing the react all of you please open the command prompt and search for the search for command prompt and run the command called node space- v. Okay let me uh

1:07:16 node space- v if it is giving like v22 means you have installed the nodejs successfully. Okay, you have installed the NodeJS successfully. Understood? I request all of you to please after downloading and installing the uh NodeJS run this command inside the your command prompt. Okay, if it is not giving the version means uh you didn't install the NodeJS properly. Okay, it is not giving the version means it you have did not install the NodeJS properly. So once again all of you

1:08:03 please follow the process and install the NodeJS. Okay, understood everyone? Yep. So yeah after getting the version we'll start creating the React app. Okay, we'll start creating the React app. Before that, let me tell you once again like React is nothing but it's like a JavaScript library for building the front- end application and React has the features like single page application, React uses the component based architecture and it's like a declarative. Now here we'll be having one more doubt like so you are telling React is faster faster faster. Why React is faster? So actually React uses something called virtual DOM. Okay, React uses the virtual DOM. Now let me

1:08:49 write here why React is faster. React uses virtual DOM. Okay. React uses virtual DOM. Now what is this virtual DOM? Virtual DOM is a copy of a real DOM. Is it of a

1:09:36 real DOM? Okay. Why React is faster means React uses virtual DOM. And what is mean by virtual DOM? Uh it's a copy of a real DOM. Now let's understand what is exactly DOM. Okay. So now let's understand what exactly is DOM. DOM is nothing but and DOM stands for document object model. Okay. DOM stands for document object model. document object model. Okay. Uh is a copy of a real DOM

1:10:23 and document object model. Now let me show you practically. So actually DOM stands for document object model. Okay. BM stands for document object model. Now actually whenever you render a HTML page, okay, whenever you render a HTML page, one something called DOM treel like structure will be formed. Okay, something like DOM structure will be formed whenever you create a I mean whenever you render a HTML page. Now actually DOM is something like interface between HTML and JavaScript. Okay, DOM is nothing DOM is like a interface between HTML and JavaScript.

1:11:09 Now, HTML is something like a uh structured I mean the structuring language I mean the uh scripting a structuring language and now this JavaScript is something like programming language or scripting language means this is different this is different now to establish the connection between the HTML and JavaScript we use the DOM okay we use the DOM now with the help of the DOM we can able to manipulate the things in the HTML. Okay, we can able to manipulate the things inside the HTML. Now, let me just show you the about the DOM. Okay, now here you can see DOM can refer to several things but in the context of programming and web development, it

1:11:57 mostly it most commonly refers to the document object model. The DOM is a programming interface for HTML and XML documents that represents the structure of a document as a tree of nodes allowing programs to access and manipulate the documents content structure and style. So let me show you how the DOM tree looks like. Hey.

1:12:50 Okay. So we have uh so whenever we render or whenever we load a HTML page on the browser something like a a something uh like this will be going to form. Now this will be having the each and everything like whatever the boiler plate code of the HTML file you have this thing will be going to uh form in a tree manner. Okay this will be going to form in a tree manner. So that's why we call this as a DOM tree. Okay, that's why we call this as a DOM tree. So now here we will be having the document root element. So on the uh so for the HTML root element we'll be having two children uh two childs. So one is like head another one is the body. So inside the head we'll be going to write the

1:13:36 title elements uh like extra I mean the attributes whatever the meta data is there we'll be going to write inside the head tag. Okay. And now whatever the actual content is there we are going to write inside the body tag. Okay. Whatever the actual content is there we are going to write inside the body tag like uh anchor tags heading tags, paragraph tags, whatever it is there we are going to write inside the HTML elements. Now first root element is the parent. Okay. Root element is the parent. Now for this root element head and body are children. Okay. Head and body are children for the HTML root element. Okay. Now this title

1:14:22 title is the children of the head. Okay. Title is the children of head. And now the title is the grandchildren for the okay grandchild for the HTML root element. Okay. This title is the grandchild for the HTML root element. Now if we come to the next thing. So body is the child of a root element and now this H1 is the grandchild of the root element. Okay, H1 is the grandchild of the root element and the H1 is the body. H1 is the child of a body. Like that we can relate the relationships. Now if we have one more button inside the uh one more heading tag inside the heading tag at the time this H1 will

1:15:07 become the parent. one more whatever the H1 or H2 you include it will become the child for the H1 tag. Now as of now this H1 and anchor tags are the siblings. Okay, this H1 tag and anchor tag are the siblings each other. Okay, these are the siblings each other. Now uh so actually my main point is like whenever you page on the browser this type of a tree will be formed. Okay, this type of a tree will be formed. Now actually in programming terms we call this as a real DOM. Okay, we call this as a real DOM. So I hope everyone understood what is DOM and what is exactly real DOM. Okay,

1:15:55 this is about this is what real DOM. Now actually if you just go to the MDN docs here you can able to understand more better. So the document object model connects web pages to scripts or programming languages by presenting representing the structure of a document such as the HTML representing a web page in memory. Usually it refers to uh JavaScript even though modeling HTML, SVG or XML documents as objects are not part of the core JavaScript language. The DOM represents a document with a logical tree. Each branch of the tree ends in the in a node and each node contains object. DOM methods allows programmatic access to the tree. with

1:16:42 them. You can change the documents structure, style or content. Nodes can also have event handlers attached to them. Once an event is triggered, the event handlers get executed. Okay, this is more about the DOM. Real DOM means whenever you load the anything, so it will going to render the DOM mean it will going to create the tree. Now in normally okay normally okay normally in real DOM so whenever you click on this H1 okay whenever you click on this H1 the body is also getting disturbed HTML root element is also disturbed. Okay

1:17:28 in real DOM whenever you make any changes okay in real DOM whenever you make any changes the complete tree gets disturbed. Okay, the complete tree gets disturbed. But in virtual DOM, so it will update only the particular thing. Okay, it will update only the particular thing instead of updating the whole tree. Okay, instead of updating the whole tree, it will update only the H1 element inside the virtual DOM. Now actually the virtual DOM is a copy of a real DOM. So whenever uh now let's suppose so we have earlier we have taken the example of Flipkart, right? So let's suppose this is the uh like normal uh it is using the real down. So

1:18:14 whenever I click on the mobile the complete tree is getting disturbed I mean the complete page is getting reloaded but in the Gmail or but in the YouTube so whenever I click on anything like history or shots only that particular things thing is getting disturbed I mean it is going to reload. So now let me take uh show you the image of the virtual DOM and real dom. So here you can just uh read the definition. So the real DOM represents the actual structure of a HTML document in a browser. While the virtual DOM is a lightweight in-memory representation of the DOM, the virtual DOM allows for more

1:18:59 efficient updates to the UI by identifying the minimal set of changes needed to update the real DOM, reducing the performance overhead. Okay. So if we go to the images now, here you can see This is the virtual DOM and this is the real DOM. Now let's suppose okay now let's suppose so in the real DOM or in the browser DOM. So when you click on this button the complete page is going to update it there. Okay the complete page is going to update it there. But in the virtual DOM now let's suppose you have click on the button. Now this

1:19:45 virtual DOM okay this virtual DOM will tally with it will tally with the old DOM. So like that uh so there are previously there are 10 buttons. Uh for the 10 buttons there was no changes. Now it will check like that only the button number one has been changed. So that virtual DOM will be going to update only the particular button one only. Okay. Button one only. So here you can see like that state change compute difference rerender. Okay. So it will check like that which component I mean which state has been changed. So only it will after seeing the state changed it will compute like that uh which do I mean which uh particular state or which particular component has been changed. Now after uh seeing like that this only

1:20:31 the having the button one changed now it will compute after that it will render rerender only the button one only. But in the real DOM it won't check uh I mean it will won't check for the state change it will won't uh compute the difference but directly it will rerender in the browser DOM okay it will rerender in the browser DOM so this is why virtual DOM is a faster as compared to the real DOM now if you want to relate with the layman example so I'll take one mango tree example okay I'll take one mango tree example so uh so if we went to the uh mango tree. If you went near to the mango tree, so to uh take the mangoes, we'll be having

1:21:16 the two options, right? We'll be having two options. First option like taking the stone and throwing out to the mango. So, we'll get the mango, right? So, going to the uh going near to the mango tree, take the stone, just throw the throw the stone to the mango and now mango will fall down. So this is the one thing and one more thing like that. So we'll be going to directly take that uh we'll be going to plug the mango means we go near to that mango and we plug the mango we plug the mango. Now here we can see the difference like whenever we take a stone and throw on the mango the branches of the tree or the stems of

1:22:02 the other stems of the tree will be get disturbed right get disturbed inside whenever we take and throw the stone on the mango tree but whenever we directly go and pluck a mango so other stems other branches won't get disturbed right so whenever we directly go and pluck that a pluck a particular mango other branches uh the stems will not get disturbed right so this is the example I mean layman example you can relate with the virtual dom so taking the stone and throwing on the mango tree is nothing but like a dom real dom and directly going and plucking the a single mango is nothing but like a virtual DOM so I hope everyone understood right so I hope everyone understood this is why react is

1:22:48 faster Okay, this is why React is faster. React uses virtual DOM. It is a copy of a real DOM and document DOM is nothing but like document object model. It's acts it acts like a it acts like a what we say interface between HTML and the JavaScript. Okay, I hope everyone understood whatever we have discussed till now. Okay, I hope everyone understood whatever we have discussed till now. Now I request all of you to please take 5 minutes of break. So after that we'll continue with our session. Okay. I request all of you to please take 5 minutes of break and all of you please be here on back. By exactly 12 we start the session. Okay. Now it's like

1:23:34 11:53. By exactly 12 p.m. we start the session. So all of you please go to break and please be here at exactly 12 so that we can start the session without any delay.

1:34:00 Okay, welcome back all. I hope everyone came from the break. Now we'll begin with our uh session. Okay. So in the pre-break we have discussed about the what is react whatever the things are there and why react is faster what whatever it is there we have discussed. Now we'll be going to uh create the React app and I hope everyone installed the NodeJS application as well right so I hope everyone installed the NodeJS NodeJS in your systems and it it is giving the NodeJS version as well. Now after installing the NodeJS now we are going to create the React app. Okay. Now we are going to create the React app.

1:34:47 So, let me just close uh let me just share my screen here. Give me a moment. Oops.

1:36:09 Yep. Now I hope my screen is visible. So now let's all of you please search for React Wheat. Okay. React wheat. So here you can see what is React. Wheat is a modern fast build tool and development server that significantly enhances the development experience for web projects including those built with react. While it was initially conveys uh with view.js in mind, its benefits extend seamlessly to other frameworks like react. Now actually uh vit is something like a build tool for creating a react app. Okay. Uh re uh sorry whe is

1:36:56 a tool I mean it is a build tool for building a react application. All of you search for react wheat. All of you search for reactw whee you will be going to get the first link. Just click on that first link here. So wait French word for the quick uh so quick react app we can say. So is a build tool that aims to provide a faster and learner development experience for modern web projects. It consists of two major parts like the dev server that provides rich features enhancements over native ES modules. For example, extremely fast hot module replacement. Okay. So if you just scroll down, okay, if you just scroll down, you'll be having the scaffolding your first V

1:37:43 project. Okay. So now here to create the react app we'll be going to choose the this command that is npm create. Okay. We are going to use the first command that is npm v. Now before that we have already I have already said many times. So before going to create a project we have to maintain a proper folder structure. Right? So let me just go to the desktop here. So this is the folder nm that I have created in the last to last class. Inside this I have the one index.js and one index.html file. Now inside this okay inside my existing folder I'll be

1:38:29 going to create a new folder with my first app. Okay. I'll give the name as a my first app. Okay, my first app. So now I request all of you to please go to your specified directory and create a folder with the name of my first app. Okay, create a folder with the name of my first app.

1:39:17 So yeah after after creating a folder. So here you can see this is the empty folder. I have just created a folder. There is nothing inside my folder. Now open this folder in the VS code. Okay. Open this folder inside the VS code with the help of the command prompt uh code. So code space dot enter. So now this command will open my this particular folder inside the VS code. Okay.

1:40:15 So it is uh taking a time to reload. So wait for 2 to 5 seconds. Okay. Now here you can see so I'll be having so I hope everyone already aware about the VS code. So I no need to explain anything inside this. So here we'll be having one folder with the name of my first app. Okay. I'll be having one uh folder with the name of the my first app. Now this folder is completely empty. So there was a nothing inside my folder. Right. So there was a nothing I

1:41:00 mean it is a empty folder. Now I'll open this particular folder inside my uh VS codes terminal. So here you can see I'm in the uh desktop NMF and my first app. Okay. Inside this my first app I have already there. Now here I have to run

1:42:10 Okay. Now in this particular like desktop nmf where I have created my first app folder. Inside this I have to run the command for creating react app. Okay. Here I have to create the I mean here I have to run the command to create the react app. Now to create the react tab we have we have already seen the command that is npm create v at list or at latest. Okay npm create v at latest. Okay. npm create v at latest. Then follow the prompts. You can also directly specify the project name and s template you want to use via additional commands. So here instead of that we'll be going to follow the prompts. Okay. So

1:42:56 I have copied the same command. Now I'll be going to Now here I'll be going to run this command. Now before running the command I have to specify inside the folder I have to create I mean what's the folder name I have to give. So I have already created the app right. So I have already created the my first app folder. So that's why I want to create the okay that's why I want to create the new app inside the my existing folder itself. Now for that purpose I use the space dot okay if you want to create the app in a new folder. Okay, if you want to create a app in a new folder, you can uh give the app a folder name as well

1:43:43 like my first app, my react app, whatever the name is there, you can specify after a space. So, first you have to write like npm space create v at latest space. After that, you have to specify the folder name I mean the directory name where you have to create. Now, I want to create in the same directory. So, that's why I'm giving the space dot. Okay. So, space add after that just hit enter. Now it started creating the react app. So now here it here you can see it is asking like okay to proceed create v at 7.0.3 okay to proceed. Yes I have to give the while y and enter. So once again it has started. So it is asking for the package

1:44:29 name. I want to keep the package name as the same. So I'll just click on enter. my first app. I'll give app enter.

1:45:15 So after giving the package name so I can you can give the same package name. So after that it is asking for select a framework. Okay select a framework. Here we have the lot of options like vanilla, view, react, p react, lit, swelt, solid, quick, angular, marco, others. So as we are working as we are going with the react. So I'll just use the drop-down I mean I'll use the uh key to come to the react and just hit enter after selecting react. And once again it is asking for select a variant. So now here we have to select the variant as a JavaScript. Okay, here we have to select the variant as a JavaScript that is uh we have the listed options like TypeScript,

1:46:00 TypeScript plus SWC, JavaScript, JavaScript plus SWC. I want to choose the JavaScript. Now with the help of this uh down key I'll be going to okay in the down arrow I'll be going to choose the JavaScript. Okay, choose the JavaScript. Now after running this okay after running this thing like after running so here you can let me show you once again. So first I have run the command like npm create v at latest space dot. So after that it asks me to give the package name once I have given. So it will ask me to it will prompt me prompted me to select the framework. I have selected the framework as a react. Okay, I have selected the framework as React. So once you select

1:46:47 the framework once again it will ask to choose the variant. So I have selected the variant as a JavaScript. Okay, I have selected the variant as a JavaScript. variant as a JavaScript. Now here if you just uh see here you'll be having the two commands to start and run the project. Okay, to start and run the project. Now first uh let's understood what exactly node we have already seen node is nothing but it's like a environment for running the JavaScript applications. Now npm stands for node package manager. Okay no npm stands for node package manager. Now this npm okay now this npm manages the

1:47:34 nodejs packages. Okay. Now this npm manages the uh NodeJS packages. Now inside the npm packages or node packages we have more than a million packages. Okay. We have the more than a million packages inside the npm or whatever the packages we have inside the node. Now this particular uh thing called npm will manage and organize the packages of the node. Okay. Now as we have created the raw folder I mean the raw files inside our first applic. Previously it was empty after running the command called npm create bit at latest test. Selecting the framework selecting the variant. After

1:48:19 that I have got these things. Okay. Now to run this so to run this javas I mean to run this react app to see the output. Before that we have to whenever we create the reactor for the first time we have to run this command called npm install. Okay we have to run the npm install for the first time. So as I am I have created the react app now itself right now to see to start the application first I have to install the npm packages. Okay. So I'll just run the npmi. Now whenever I run this npm install ra it it will download something called node modules. Okay actually the node modules are a very heavy folder

1:49:05 inside the react app I mean in the nodejs applications. Uh so while creating the uh react app with the help of this suite the node package node modules are excluded. So that's why it is uh we cannot run the uh react app. Okay. Now we are going to install the node modules with the help of this npm. Okay. Now just click on this npm I npm install and enter. So now here you can see it has started downloading the node modules. Once it completes here you will be going to get the one new folder. Once the command gets completed you will be going to get the one a new folder with the name of node modules inside the

1:49:51 my first app. Okay. So now here you can see one new folder has been created with the name of the node modules. Okay. A new folder has been created here inside my node modules. Understood everyone? Okay, everyone understood? So yeah, now to run the React app, we

1:50:36 have command called npm rundev. Okay, inside the suggestions, they have already given npm rundev. So now whenever I run this npm rundev okay npm rundev it will start the react application okay it will start the react application and I can see the output now here you can see after running this npm rundev so here I got like v70.5 ready in 74 ms so now to see the output here I can follow this link that is http col localhost 5173. Okay. Now what is this HTTP colost uh col 573 so actually the HTTP is

1:51:23 nothing but it's like a protocol for web application that stands for a hypertext transfer protocol for transferring the text over the internet. We follow the protocols like HTTP or HTTPS. Now in this we are going to use the HTTP instead of HTTPS. And now this local host means as we are going to host this application in locally I mean in our machine only. So that's why I'm going to use the local host. Okay, that's why my server is using the local host. And now what is this 5173? 5173 is the port number. Okay, it's the default port number of the react app. Okay, 5173 is the default port number of the vit applications. So whenever we talk about

1:52:08 the CRA that is the create react app for that the default port number is 3,000 but for the VIT it is like 5173 okay for the V application so the default port number is 5173 now actually this port number will say okay this port number says the machine or any other thing like to that so I am I'm the react I mean I'm the V application and I want to use the port number 5173. Now on this particular 5173 other applications will be not hosted only the this particular will be going to host on the 5173. Okay 5173.

1:52:57 Now here you can see after uh clicking on this thing so one thing like we plus react I have got. So V is a build tool. React is a front- end library. Okay. So this code is coming from the my ReactJS applications. Okay. Now let's understand all the files that are inside my React app. Before that so I request all of you to please create the React app. All of you please create the React app. Follow the steps over here. So till then I'll give the two to uh 3 minutes of time. So once you done we'll move on to the next step. Okay.

1:58:14 Okay, I hope everyone created the React app, right? So now let's understand what are the various folders that we have generated through the command. So first thing is like that node modules. Now inside the node modules we'll be having predeclared things definitions modules uh I mean the whatever the uh functionalities are there we have inside the node modules and now we have the one thing called public folder. Now inside this public folder we are going to store the static files okay like images uh any other folders we are going to store inside the public folder. And now we have the one important folder called src. So sorry let me share my screen here.

1:59:19 Yeah, I hope my screen is visible right now. the in the public folder we are going to store the uh static images. Now this src is a very very important folder. Uh so actually this src means this is the source source folder. Now in this src folder we are going to write our code. Okay. Inside this src folder we are going to write our reactjs code. Now let's come to the some other files like index.html. This is the root file. Okay, this is the root file uh for the React application. Now inside this index html I mean the root file you don't have uh such things. You'll be just having the doc type root

2:00:04 element head and body tag. But inside this div you'll be having the one id. So actually uh with the help of this id equals to root we are going to establish the connection to the src folder. Okay. So I'll show you that later. So here you have the connected the main.jsx with the help of the script folder. Okay. Now if you come to the src here you'll be having one main do. JSX. Okay. Main. JSX. Now here you can see with the help of the DOM so they have created a element and they have got this root and so whenever whenever a HTML file I mean the index.html HTML file renders this particular whatever the code we have written inside the render

2:00:52 okay whatever the code we have written inside this render will be going to there okay will be going to printed there so now let's suppose to show you the practically so I'll just comment down this okay I'll just comment down this app now if I go and check okay if I go and check my react app I'll be going to get the empty screen Okay, here you can see I'm getting the empty screen because of whatever the content. Okay, whatever the content on is coming on my web page is from this particular render. Okay, if I comment down this render, it won't give anything. Okay, it won't give anything. So once again, I'm just uncommenting this. So if I go I'll

2:01:39 be having the once again the previous content itself. Okay, understood. Now if we come to the package dojson actually this is the very very important file in the layman terms we can say this is the heart of a NodeJS applications. Okay. So it is a react application but we are saying this as a NodeJS application because of we have built this React app on the top of the NodeJS. So every app like a react, angular, view, next uh express these all are using the NodeJS as well. Okay, these all are using the NodeJS only for maintaining the packages. Now this package.json is a very very important

2:02:25 and in layman terms we can say this is the heart of the NodeJS application. Without this package dojson we cannot run the react application or we cannot run the NodeJS applications because of in this we'll be having complete information about the project. So first we'll be having the name private uh some tags like version type module scripts. So in the scripts we'll be having the vid for development build for v build a preview light pre v preview and now this we have the something called dependency array. So actually dependency means nothing but a package. Okay. So I have already told that node has the something called npm which

2:03:10 manages the package. Now in React I mean in normally in JavaScript if you want to add the date functionality you have to write the each and everything you have to create the function from scratch. But in React you can just import the date functionality with the help of the npm I date or whatever the library name or package name you have you can just import. Okay. Now inside the dependencies all that particular things will be going to there. Dependencies means with the help of these particular packages with the help of these particular things your project is running means on this particular react react dom is dependent. Okay dependencies means the things that

2:03:57 your app is dependent. So without this dependencies your react app is not going to work properly. So that's why I said like that this package.json is a heart of your React application. Okay, it is like a heart of a React application. Now I hope everyone understood the basic things of the React application. Now let me just go through go once again to the src folder. SRC folder. So we have already seen the main.js. So this main dot jsx we are linking into the HTML page. Now inside this we are going to write the render of app. Okay render of app. Now whatever the code uh on my screen is getting from this

2:04:43 render. Now if I remove the whatever the content is there inside the render it will be not going to display anything inside the on the web page. Okay. Right now let me open the app dot jsx. Okay. Let me open the app dot jsx. Now this is the actual code. Okay, this is the actual code you are getting on the web page. Okay, now let me show you. Now here you can see this is the actual code. As of now here you are getting the V plus React. Now just to differentiate I'll just change the content from NM to NM plus FA okay non one front end development. Now here you can see so you are getting the non-Mud one front end

2:05:29 development. So now as of now to uh understand you in a better way I'll just remove the complete code. Okay. So now we have discussed something like react uses the componentbased architecture right we have used we have said the term we have used the term that react uses the component-based architecture. Now component is nothing but it's like a small function. Now in React component stands for the function as well as a file name. Okay, component stands for a function name as well as a file name inside the React. Now here you can see I have created the app capital AP.js. Okay, JSX is the extension for the

2:06:15 React application. Okay, JSX is the extension for the React application. Understood? JSX is the extension for the React application. JSX stands for JavaScript and XML. Okay. Now, this actually JSX allows us to write the JavaScript code and the HTML code together. Okay. This Java JSX allows us to write the HTML and JavaScript code together. Understood? Okay. Now here first I'll create Okay. First I'll create Okay. I'll create the function. Okay. So we have already discussed the arrow functions right now let me take the con app. Okay app. So I am taking the function name as app.

2:07:09 This is here I have created a arrow function. Now I'm exporting the arrow function. So this is this thing is known as the exporting a function. Okay, export default app means so I'm exporting the complete app. Okay, I'm exporting the complete app. Now inside my main.jsx I'm importing the app as well. Here you can see import app from the app. Okay, import app from the app. Now here if you see if you look closely so for the file name and for the function name I have given the same name. For the file name I have given the a app and for the function name I have given the app. Now

2:07:55 whenever I give like a function name uh I mean the function name as well as the file name it will considered as a component. Okay. Whenever I give the file name as well as the function name as the same name, it will be considered as a component. But here you have the term like so the component name should be the component name should be start with the capital letter. Okay. Component name should start with the capital letter itself. Okay. Now here you can see this is the normal file. So that's why in the main I am using the normal small case main. But in the app is a component. So that's why I'm using the capital A capital A. Okay. So the file name is also capital A and the function name is also capital A. This is the

2:08:42 normal arrow function. Now here inside this curly braces I'll write the something like return. Okay. I'll write something like return. Now here so whatever I write okay whatever I write inside this okay okay whatever I write above the return will be considered as okay whatever I write above the return will be considered as a JavaScript code and whatever I write inside this return will be considered as a HTML code. Okay, whatever I write above the return before the return so it will be considered as a JavaScript code and whatever I write inside this written will be considered as a HTML code. Now

2:09:31 let me show you the practical example. So now here I'll take one div. Okay, here I'll take one div. Here I'll take one div. So first here I'll write H1. So here I'll write like my first react app. Okay, my first react app. Now if I go to my uh screen, I'll be going to get the here you can see my first react app. Okay, here I'm getting the my first react app here. Okay, my first react app here because of I have written inside the written. Now here you have to remember the few limitations, few restrictions like that. Now here

2:10:16 you can have only one single tag. I mean the one parent tag. Okay, you cannot have the multiple parent tags. You have only one parent tag. Inside the parent element, you can add the n number of child elements. Okay, n number of child elements you can add inside the one parent element. Now if I define a sibling for this div. Okay, if I define any if I write any sibling for this div, I'll be going to get error. Okay, I'll be going to get error. So here you can see in the terminal itself I'm getting the error. So here you can see this much big error I have got. If I open my screen, so here also here you can see I'm getting the error like

2:11:02 so here you can read the error. Adjacent JSX elements must be wrapped in a single enclosing tag. Okay. Did you want a JSX fragment? So means here we can follow we here we can have only one parent element. So but inside this parent element we can add the n number of child. Okay we can add the n number of children inside this div tag. Understood? Okay. Yeah. So this is the HTML. Now let me show you how the JavaScript works. Okay. Now here I'll take the console. First I'll take the a const a = 10

2:11:52 con b = to 20. Okay, this I have the two variables. Now in JavaScript to see the output of the output we can print on the console right. So here I'll be going to take the console.log console.log of a + b okay a + b. So if I open my console let me just re uh format this. If I open my console I'll be in my console. I'll be going to get the 20

2:12:43 here you can see I'm getting the 30 10 + 20 30 okay 10 + 20 30 I'm getting on my console because of it will be considered as a JavaScript now okay as I said we can uh in JSX I mean the react we can write the JavaScript and HTML code together right so now to write if you want to write the JavaScript code if I directly write like a a + b okay a + b so actually inside the javascript if I write like a + b it will compute Okay.

2:14:15 Okay. So in the above the return I have taken the a + b. So it is returning the 30. But inside the return I am taking the a + b. Now if I see I'll be going to get the same thing like a + b. Here you can see here I'm getting the same thing a + b but in the uh console I'm getting the 30 because of this is javascript and this is the html okay this is the html and this is the javascript okay this is javascript this is html now if you want to write okay if you want to write the javascript in the html directly so here you can wrap okay here you can wrap this okay you can wrap this inside the curly

2:15:00 brace. Okay. So in uh inside the JSX whenever you uh inside the return whenever you use the curly braces it will be considered as a JavaScript. Okay. Whenever you use the curly braces it will be considered as a JavaScript inside the react. Okay. Now here if I open here you can see inside this also I'm getting the 30. Okay. inside here also I'm getting the 30 here also I'm getting the 30 because of I am defining this in the curly brace okay understood so whenever I use the curly brace inside the return key return I'll be going to uh it will be converted as a JavaScript okay now instead of the

2:15:47 printing directly a plus b it will print the it will take the operants like a is 10 b is 20 and operator plus will add this Okay. 10 + 20 like 30 it will give. Okay. See it will Okay.

2:16:58 It will give the 30. It will give the a + b. Understood? This will give the a + b. This will give the a + b. 30. This is how the component and this is how we can write the HTML and JavaScript code inside the React application. Okay, understood. This is how we can able to write the HTML JavaScript code and we can this is how we can able to combine the code from each uh from JavaScript to HTML. Now I request all of you to please execute this lines of code. Okay, I request all of you to please execute this lines of code here. Okay, so I'll

2:17:44 be going to give the 2 minutes of time. All of you please execute this code.

2:22:44 Okay, I hope everyone understood how we can part uh how we can just add the data and all right. So now let's see how we can add the styling over here. So in JavaScript I mean in the react we have the multiple ways for adding the styling like first thing like inline styling second like module styling and the global CSS. So as of now I'll just show you how how we can add the normal styling. Before that let me just go to the main.jsx. Here you have the one thing called index dot CSS.

2:23:43 Okay, here we have already one global CSS file. As of now, I'll just comment down. Uh let me show you first how we can write the inline styling. Okay. So in the inline styling we'll be having the first we have to define the style tag. It is little bit similar to the normal HTML but here we are going to use the curly brace. Okay. Here we are using the double curly brace. So now here I'll be give the color equals to red. Okay. Color is red. Now if I open my output okay now here you can see previously the uh

2:24:30 output uh background screen was black color due to the global CSS. So now here you'll be having the my first react app that is coming from the inline styling. Okay. So first I have taken the style tag double curly brace. Inside this I have to specify the property. Okay. Now if I want to add the one more property I can use the comma as a separator. Okay. Comma as a separator. Background color. Now so background color like let me just give the green. So now here I am getting the green yellow as a background color and red color as the uh text color. Okay, this is how you can able to add the inline styling. Now if you want to add the

2:25:16 global CSS, so you have already one index dot CSS file, right? Now let me just remove all the code. Okay, let me just remove all this code. So here I'll add the color to body. Okay, color to body. You can use the same as the CSS selectors like class selector, ID selector, element selector, whatever the selectors are there, you can just use this. But I am just showing the body as a selector. Okay. So body. So here I'll give the background color BG color as a wall. Okay. as that now to if I directly open this I'll be not going to get anything. Okay. Because of I have

2:26:01 not linked this uh aqua I mean I have uh not linked this uh dot CSS file. Okay. Now to link this dot CSS file I can either link in the main.jsx either I can link in the app dot jsx. But whenever I use this I mean whenever I import this

…