UI FULLSTACK WEB DEVELOPMENT BY SWAMY NAIDU SIR YOUTUBE LIVE STREAM FROM DURGASOFT

Added: 2026-05-31

[00:00:26]Yes. Uh I hope you can see my screen right?

[00:00:31]Yes.

[00:00:35]Yeah. Good morning once again.

[00:00:38]Uh my name is Swami Naidu. I'm teaching UI technologist from past 14 years.

[00:00:47]Okay.

[00:00:49]So this is ReactJS demo class. Okay. In this demo I will brief what is ReactJS and uh what are the advantages why we are using this ReactJS. these concepts we'll discuss. Okay.

[00:01:10]Yes. First of all, just let me open the notepad.

[00:01:19]No.

[00:01:28]Yeah. Reacts.

[00:01:31]What is this reacts? Yeah.

[00:01:34]So, ReactJS is a client side script.

[00:01:39]We are using this client side script to develop the websites.

[00:01:46]Okay.

[00:01:48]Yeah. In website development, we are using two types of scripting.

[00:01:54]One is client script, another one is server script. Okay. Yes. First of all, ReactJS is a client side script.

[00:02:17]Okay. So to implement websites.

[00:02:25]Yes.

[00:02:28]So what is client script exactly? That we will discuss now.

[00:02:34]Yeah.

[00:02:39]It is a library of JavaScript.

[00:03:01]Yes, what this nothing but the library of JavaScript.

[00:03:06]So, ReactJS is a client script to implement the web applications websites and it is a library of JavaScript.

[00:03:17]So if you take any website development yes every website contains two phases.

[00:03:26]First one is design phase second one is coding phase.

[00:03:39]Yes. Yeah.

[00:03:42]So any website if you take the flip card or Gmail or any other website we have two phases here. The first one is design phase. Second one is coding phase.

[00:03:58]In design phase we can create user interfaces.

[00:04:07]So we are calling as UA.

[00:04:10]So what is user interface? Nothing but the screen which we are displaying the end user.

[00:04:19]Okay. Yes.

[00:04:22]So for example if I open Facebook this is the user interface of Facebook.

[00:04:39]It contains the text boxes buttons like this.

[00:04:46]Okay. Yes. Is a user interface of Facebook.

[00:04:51]Now for example Flipkart.

[00:04:58]So this is user interface. So user interface is nothing but the web page which we are displaying to the end user that we are calling as user interface.

[00:05:07]So in this user interface we have controls like text boxes, buttons, images etc etc. These are the controls are available here.

[00:05:20]Okay. Yeah. So to create these user interfaces so what the technologies we are using HTML S CSS.

[00:05:34]Okay. These are the technologies which we are using here.

[00:05:39]So HTML is one technology as well as CSS and also Bootstrap.

[00:05:51]>> Yes.

[00:05:53]So HTML we are using to display the controls like test box, button, radio button. These are all controls we can display.

[00:06:04]using HTML.

[00:06:08]Okay. So CSS we are using to provide the styles to the HTML controls like colors, font sizes etc. All these we are providing by using CSS and Bootstrap. Bootstrap uh main purpose is the responsive.

[00:06:34]Responsive means that web page should compatible with any device like desktop, laptop etc. Okay.

[00:06:49]So this type of responsiveness we can provide by using booster.

[00:06:58]Is this clear? Yes.

[00:07:01]Like that this is the designing phase.

[00:07:06]So second one is coding.

[00:07:10]Yes. In this coding phase we are creating business logics.

[00:07:26]Yes.

[00:07:30]So we are creating business logics.

[00:07:35]So here two types of technology scripting languages we're using for this coding.

[00:07:46]One is client side script.

[00:07:54]Second one is server side script. Yes. So in website development to implement the logics coding part the support of two types of scripting languages.

[00:08:12]The first one is the client script and second one is server set script.

[00:08:21]What is this client script? Okay. Yeah.

[00:08:26]So, script which executes browser. Yeah.

[00:08:42]The script which executes in browser we are calling as client side script.

[00:08:49]Is it clear? Yes.

[00:08:52]For example, if you develop any logics by using JavaScript or national technologies of JavaScript like React, Angular all these comes under client side scripting languages.

[00:09:16]Okay. Yes.

[00:09:20]So JavaScript, React, Angler, all these technologies. For example, I implemented some logics by using ReactJS, those logics execute where in browser.

[00:09:34]Okay. Yes.

[00:09:37]In case if you develop the logics by using server scripts.

[00:09:44]So those logics executes in web server. So example if you take this.

[00:09:55]So if you implement any logics by using NodeJS, PHP, JSP, serlet, spring, hibernate like that ASP all these comes under serverside scripting languages.

[00:10:13]So as your developer you are working with the client side scripting languages.

[00:10:21]Okay. As your developer your role is on the client side scripting languages.

[00:10:32]See so that is the concept of this.

[00:10:38]Okay. Once again if you observe this website development we have two types of scripting languages in the business con logics concept. One is client side script another one is server side script.

[00:11:00]Client side script means the script which executes in browser.

[00:11:05]Server script means which executes in web server.

[00:11:10]Yes.

[00:11:12]So, ReactJS comes under client side scripting language.

[00:11:18]So, it is the library of JavaScript.

[00:11:22]Library means what is the meaning of this? So, it provides some additional functionalities.

[00:11:29]Okay. Yes.

[00:11:32]It provides some additional functionalities to work with JavaScript.

[00:11:38]That is the concept of this.

[00:11:44]Okay. Yes.

[00:11:48]Now see one small diagram.

[00:12:01]For example, this is one server.

[00:12:07]In this server you have the web pages like this one page like that.

[00:12:34]Yes.

[00:12:37]content is like that. We are the pages.

[00:12:45]For example, user X sends a request to the server.

[00:12:55]Okay. User X sends a request to the server.

[00:13:01]Okay. So homepage is accessing user X.

[00:13:06]Okay, user means client.

[00:13:11]So here the person who is accessing the website, we can call that person as client.

[00:13:20]Is it clear? The person who is accessing the website, we are calling that person as client now here. Yeah, implement logistics by using React or any other technologies and serverside programmer use something like PHP or other technologies. Now when it is downloading here, yes, what the logics implemented with ReactJS, those logics will download into the browser.

[00:13:59]And those logic execute where in this browser that is the point of this means the original client has kept downloads into the client system. Client means the user.

[00:14:15]Okay. Downloads into the client system at the time of opening the web page at the time of loading the web page. Okay.

[00:14:25]Then with the help of browser it executes.

[00:14:31]So but server script is not like this.

[00:14:35]Yes.

[00:14:40]So this server side script executes where the web server and the result is downloading to the browser.

[00:14:55]Is it clear?

[00:15:03]Like that we have these two types of scripting.

[00:15:14]First one is the client side script and second one is server side script.

[00:15:24]That is the point of this. Okay.

[00:15:28]So as your developer your role is to work with the client side script.

[00:15:42]Okay. Yes.

[00:15:44]So ReactJS means nothing but the client scripting language.

[00:15:50]Now what are the benefits of this client set scripts?

[00:15:57]Yeah, where we are in this client set script.

[00:16:03]So the main points here this is very important and question okay why we are using the client scripting languages okay what are the reasons that is very very important first point to apply dynamic functionalities on HTML elements. Yes.

[00:16:38]>> The first point why we are using client escapes to apply the dynamic functionalities on the HTML elements.

[00:16:49]So what the meaning of these dynamic functionalities?

[00:16:54]Yes, all HTML controls are static controls.

[00:17:00]Yes.

[00:17:02]won't apply dynamic functionals on this contract then we taking the support of this client side scripting languages.

[00:17:15]So what is the meaning of dynamic? Here the properties of HTML controls you want to change at runtime means in browser that comes under dynamic functionality.

[00:17:35]By default HTML is static functionality, static technology.

[00:17:43]HTML is static. You want to convert it as dynamic then we are taking the support of client sales scripts.

[00:17:51]So what the difference between static and dynamic we'll discuss here. So one file I'm creating for your idea. So just see the result of this.

[00:18:05]Okay. Yes.

[00:18:08]So don't try to understand this code.

[00:18:12]simple HTML what I'm writing now so here I created on file and its name I have given demo html now you can see this so this is demoh okay yes Now I want to open this in browser.

[00:18:46]Chrome I use it here. Nothing is there in this file. Now in my browser, sorry, in my desktop I have some images like mango.

[00:19:00]Yes, you can see orange like that. These images are there.

[00:19:06]First I want to display mango. JPZ img source is equal to mango.jpz and width is equal to 200 pixels have given refresh.

[00:19:28]Yes, this is mango jpg image.

[00:19:36]Yes. Yeah.

[00:19:40]So what the source of this image 200 pixels I mean with this 200 pixels and source is mango.jp GPS means here I have given two properties one is source another one is yes.

[00:20:04]Yeah. So with this properties this control is loaded in browser.

[00:20:12]Now already this control is loaded. Now my requirement is I want to change these properties in browser.

[00:20:22]For example, I want to increase the width.

[00:20:26]Okay. Or I want to change the source.

[00:20:31]So without modification this program it is not possible by default.

[00:20:38]So once again modify this program and reload this in browser. then only those modifications will affect on the browser.

[00:20:49]Okay. But my requirement is user wants to change the properties not programmer.

[00:20:57]Okay. So if programmer means it will affect it will work on the program. Programmer can change in the program. So those changes will affect on the browser that is okay.

[00:21:13]But user user can't modify the program, right?

[00:21:19]But user wants to change the properties.

[00:21:23]For example, see in this flip card these images see if I move mouse on these images then those are expanding means bit width and height is changing.

[00:21:45]Okay. Yes.

[00:21:52]Yes. Yeah. These type of properties I want to change. Then we are taking the support of client side scripts like either JavaScript or nextg technology of JavaScript like React, Angular etc. Okay. So I will write a small code here.

[00:22:18]So see this result.

[00:22:22]Don't try to understand this code now.

[00:22:26]So yeah.

[00:22:37]So my requirement is if user click on this image control I want to change the source that is new source orange dot jps I want to provide that is the requirement.

[00:22:53]Okay. Now if you observe your program.

[00:22:56]Okay.

[00:22:58]Yes.

[00:23:04]You can see when I click on this it is changed to orange image.

[00:23:11]Yes.

[00:23:13]Like that any property any control we can change at runtime with the help of any client script.

[00:23:23]like you can use JavaScript or next level technologies of this JavaScript like React, Angular etc. Okay, same like Flipkart.

[00:23:40]Yeah. So when the mouse is moving on the control Okay. Yes.

[00:23:56]Now refresh this with the mouse on this style width is equal to something like I'm increasing the width and height of this control.

[00:24:11]Yes. Yeah. And when I click on this, so at runtime we are changing source property with property of this control.

[00:24:24]That is the concept of this.

[00:24:28]Yes. Yeah.

[00:24:33]For that we are taking the support of this client set scripting languages.

[00:24:42]Second point yeah so programming concepts I'll discuss later just what clients are skipped okay we discussed here second point to validate input controls so validations like test box is empty and password retype password matching or not these type of validation we can provide here.

[00:25:14]For example, here. Yeah. So here this is registration form without entering any data. If I click on this sign up, so you're getting this error messages like okay. Yes.

[00:25:32]So with highlight right color. Okay. So getting the error messages like what is our name? What is our name like that these all validations we can perform by using this client side scripting languages.

[00:25:53]Next one to work with ajax. Sjax concept is very very important to work with this Ajax. We taking the support of client side scripts.

[00:26:11]So actual Ajax we are using to send a request to the server without submit the web page. I will discuss the concept of Ajax. Okay. For that we are spending around four to five days. There we will discuss what is Ajax. What that advantages we have everything we'll discuss there. Anyhow to work with the Ajax concept getting the support of client set scripts.

[00:26:48]Yes. Yeah.

[00:26:50]So backend API services means uh serverside API services you want to call from front end technologies. For example in NodeJS okay that programmer is created one API service or Java programmer created one API service that I want to access from a react application or angular application. In that point of view we are taking the support of Ajax. Ajax stands for asynchronous JavaScripted XML. Okay. So there we are taking the support of this client set script.

[00:27:30]Okay. Yes. So that is one more big point here. Next one to execute logics. Yes.

[00:27:43]So I told you you want to work with the business logics the support of client script. Actually these two technologies we are using to implement the logics.

[00:27:56]So what are the logics we are developing by using client side scripts. Those logics execute in browser and what are the logics we are developing through server script. Those logics execute in server.

[00:28:13]Yes, that is the main point.

[00:28:19]Now here one example I will show you. Let me delete this.

[00:28:29]This is the server.

[00:28:34]So this is on web page like loan dot something like one web page is there some X is trying to access this page it is downloaded into the browser.

[00:29:02]Yes, here in browser we have controls like okay yes this is loan amount principal amount and this is EM uh not EMI 10. Okay. Yes, like 50 months or 60 months like that abundant tenure. Okay. Yes.

[00:29:47]Now this is the button calculate button.

[00:29:52]Now if you enter the loan amount something like 10 lakhs and 10 year.

[00:29:59]Okay. 60 months.

[00:30:05]When user click on this calculate button.

[00:30:14]Yes. When user click on this calculate button.

[00:30:20]So based on this loan amount and tenure we're executing the logics. Okay. So based on this loan amount and tenure we're executing the logics.

[00:30:38]So those logics result is how much EMA he has to pay.

[00:30:45]Okay, that logic serverside programmer if you take he will implement by using serverside technologies and front- end programmer can implement he will use front-end technologies.

[00:30:59]Now what is the advantage if you develop by using front end programming means client side programming the advantage is executes this browser where it executes in this browser okay that's why that's why the result performance is very fast means user can see this result immediately ly.

[00:31:29]Yes.

[00:31:31]In case if your programmer use the server side script so that logic executes in server means when programmer click on this button on request is going to the server and there it is processing and response is coming back to the browser.

[00:31:56]Yes.

[00:31:57]For this entire request and response process it takes time.

[00:32:04]Yes. In case if it is server side script, if it is client side script then it executes in the browser immediately.

[00:32:20]Yes.

[00:32:27]like that.

[00:32:33]So most of the logics in website okay programmers are preferring the client side technologies because the performance is very very fast that the reason okay yes so that's why your developer your developer okay can handle the logics which can execute in browser and server side programmer logics execute in web server.

[00:33:09]Here the main question is yeah what we can do with the server cell scripting languages I told you.

[00:33:21]So logistics we can run by using client scripting languages and Ajax okay validations like the dynamic functionalities everything we can do by using client scripting languages and what the purpose in the projects why we are using not we server side programmers requirement here okay main purpose is to connect with the database Okay. Yes. The main purpose is to connect with the database.

[00:33:57]So for example, if you take Facebook or Gmail or any other web server. Okay.

[00:34:05]Where the database available?

[00:34:09]Is it available in the client system or server machine?

[00:34:13]So it is available in the server machine.

[00:34:19]Yes. Yeah.

[00:34:21]So that's why user can connect these databases by using serverside scripting languages. Programmer. Okay. Programmer can connect with these databases by using serverside scripting languages.

[00:34:43]So not possible with client. It's a scripting languages because if programmer implemented the logics using client side script then it executes in browser and try to connect with the client's database but website database is available where in centralized server that's why using the server scripting languages it is possible like that database connectivity tokens creation sessions that point of view that point of If you take the support of this serverside scripting languages.

[00:35:23]Yes. Yeah.

[00:35:25]So remaining all point of views we can use the client scripting languages. So these are the main differences between these two.

[00:35:37]Got it? Yes.

[00:35:41]Okay. Fine.

[00:35:44]So you got the clarity why we are using this client scripting languages and uh ReactJS it is a client side technology the logics which we are implementing using ReactJS those logics executes in browser okay now who implemented ReactJS Mr. Jordan walk. So one of the employees in Facebook. Okay. So Jordan walk implemented this react in the year 2013.

[00:36:22]Official announcement is 2013 and uh it belongs to Facebook corporation.

[00:36:32]What the reason behind this implementation?

[00:36:36]Actually they wanted to add some logics in the Facebook chart concept.

[00:36:44]Okay. The Facebook chart concept. For that they implemented this react in the year 2013.

[00:36:54]Okay. Yes. So the main purpose is internal purpose letter later letter later letter later letter later letter later letter later letter later letter later letter later letter later letter later. Okay. They released this react as opensource client set technology.

[00:37:14]Okay. From then from then every started working with this ReactJS every person using this ReactJS in their application development.

[00:37:30]So now many websites like Instagram and Apple projects, Microsoft projects.

[00:37:39]Okay. All these projects contains ReactJS. So in U development point of view, there are two technologies playing very important role in this software industry. One is React, another one is Angular.

[00:37:59]Now if you compare these two technologies we have more openings with this react than angular. So why we have more openings? What are the differences?

[00:38:11]We'll discuss later.

[00:38:14]Okay. So anyhow in U development point of view. Okay.

[00:38:20]So in companies okay ReactJ they're using to work with the client side functionalities what is that client side functionalities so that is the concept of this ReactJS yes so this is about basic introduction of ReactJS now you got some clarity what is client script and what is server size script okay like that We have some clarity in this point of view.

[00:38:54]Now what are the features we have in this reacts? We'll discuss before that any questions you have you can ask me with the siz.

[00:39:12]So till now we discussed what is ReactJS okay and what we can do with this ReactJS these points we have discussed so here any doubts any questions you have no doubts okay fine Now what are the features of this? We'll discuss before discussion. Okay. This is UI full stack with project.

[00:39:55]Yes.

[00:40:00]So what is full stack here? Full stack means frontend full stack. Okay. What are the technologies required in companies to work with the front end?

[00:40:13]Those all we will discuss.

[00:40:17]Means not only ReactJS we are completely covering, JavaScript, HTML, CSS language, Bootstrap and media queries.

[00:40:37]Yes, these are all we are covering here.

[00:40:41]The JavaScript, HTML, CSS, bootstrap and media queries.

[00:40:48]Okay.

[00:40:50]Yes.

[00:40:52]So along with this complete ReactJS and additionally project yeah so one real project and that yeah we will discuss this e-commerce website shopping application end to end including payment gateway integration.

[00:41:29]Okay. Online purchasing.

[00:41:33]So client side as well as uh admin side programming. Okay.

[00:41:40]Everything we will cover here.

[00:41:45]So for that the duration is 100 days it is taking for you. Okay. Yes. So it is course plus project batch only ReactJS if you take the ReactJS batch JavaScript and React these two they're covering we are covering these two but you have full stack project match if you take so everything along with the project we are covering Okay. So individual if you take this course plus project it cost around 20,000 but for this year fullstack project I think they charging around 12 13,000 I think 12,000 okay means both are included with this less fees okay separate if you want to take project and reactjs okay so in So for react is 8,000 and project is 12,000.

[00:43:02]Okay, they charging total 20,000. So with this U full stack including this project everything will be covered for the 12,000.

[00:43:13]And code duration is 100 days I told you.

[00:43:18]And uh here recordings we will provide. So that every day class recordings notes we are providing in Google drive.

[00:43:32]The drive access you'll get. Okay. You can access through Google drive.

[00:43:39]Okay. Yeah. This is the pattern which we are following here.

[00:43:47]Okay. And every day one session we have so this is 6 to 7. Okay. Yes. Initial demos we will spend around 45 to 50 minutes.

[00:44:06]After that 1 hour session we are have that is the concept.

[00:44:15]Okay. Yes.

[00:44:18]So what are the features we have this rejs compared with JavaScript? What are the advantages we have here? So those points we will discuss in the next class.

[00:44:33]Okay. Yes. Any doubts before quitting this today's session?

[00:44:43]No more doubts.

[00:44:46]Yes.

[00:44:47]Then same tomorrow class you can drop Yes. Uh I hope you can see my screen right?

[00:45:25]Yes.

[00:45:29]Yeah. Good morning once again. Uh my name is Swami Naidu. I'm teaching UI technologist from past 14 years. Okay.

[00:45:43]So this is ReactJS demo class.

[00:45:47]Okay, in this demo I will brief what is ReactJS and uh what are the advantages why we are using this ReactJS these concepts we'll discuss. Okay.

[00:46:04]Yes. First of all just let me open the notepad now.

[00:46:22]ReactJS.

[00:46:25]What is this ReactJS? Yeah.

[00:46:28]So, ReactJS is a client side script.

[00:46:33]We are using this client side script to develop the websites.

[00:46:40]Okay.

[00:46:42]Yeah. In website development we are using two types of scripting.

[00:46:48]One is client say script another one is server side script. Okay. Yes. First of all react js is a client side script.

[00:47:11]Okay. So to implement websites.

[00:47:19]Yes.

[00:47:22]So what is client script exactly? That we will discuss now.

[00:47:29]Yeah.

[00:47:33]It is a library of JavaScript.

[00:47:55]Yes. What this nothing but the library JavaScript.

[00:48:00]So ReactJS is a client script to implement the web applications websites and it is a library of JavaScript.

[00:48:11]So if you take any website development yes every website contains two phases.

[00:48:20]First one is design phase.

[00:48:28]Second one is coding phase.

[00:48:33]Yes. Yeah.

[00:48:36]So any website if you take the flip code or Gmail or any other website we have two phases here. The first one is design phase. Second one is coding phase.

[00:48:52]In design phase we can create user interfaces.

[00:49:01]So we are calling as UA.

[00:49:04]So what is user interface? Nothing but the screen which we are displaying to end user.

[00:49:13]Okay. Yes.

[00:49:16]So for example, if I open Facebook, this is the user interface of Facebook.

[00:49:33]It contains the test boxes, buttons like this.

[00:49:40]Okay. Yes. is a user interface of Facebook.

[00:49:45]Now for an example, Flipkart.

[00:49:52]So this is user interface. So user interface is nothing but the web page which we are displaying to the end user that we are calling as user interface.

[00:50:01]So in this user interface we have controls like text boxes, buttons, images etc etc. These are the controls are available here.

[00:50:14]Okay. Yeah. So to create these user interfaces, so what the technologies we're using?

[00:50:22]HTML, S, CSS.

[00:50:28]Okay, these are the technologies which we are using here.

[00:50:33]So HTML is one technology as well as CSS and also bootstrap.

[00:50:45]>> Yes.

[00:50:47]So HTML we are using to display the controls like text box, button, radio button. These are all contours we can display using HTML.

[00:51:02]Okay. So CSS we are using to provide the styles to the HTML controls like colors, font sizes etc. All these we are providing by using CSS and Bootstrap. Bootstrap main purpose is the responsive.

[00:51:28]Responsive means that web page should compatible with any device like desktop, laptop etc. Okay.

[00:51:43]So this type of responsiveness we can provide by using booster.

[00:51:52]Is this clear? Yes.

[00:51:55]Like that this is the designing phase.

[00:52:00]So second one is coding.

[00:52:04]Yes. In this coding phase we are creating business logics.

[00:52:21]Yes.

[00:52:24]So we are explaining about business logics.

[00:52:29]So here two types of technology scripting languages we using for this coding. One is client side script.

[00:52:48]Second one is server side script. Yes. So in website development to implement the logics coding part of the two types of scripting languages.

[00:53:06]The first one is the client set script and second one is server side script.

[00:53:15]What is this client script? Okay. Yeah.

[00:53:20]So, script which executes browser. Yeah.

[00:53:36]The script which executes in browser we are calling as client side script.

[00:53:43]Is it clear? Yes.

[00:53:46]For example, if you develop any logics by using JavaScript or national technologies of JavaScript like React, Angular all these comes under client side scripting languages.

[00:54:11]Okay. Yes.

[00:54:14]So JavaScript, React, Angler, all these technologies. For example, I implemented some logics by using ReactJS, those logics execute where in browser.

[00:54:28]Okay. Yes.

[00:54:31]In case if you develop the logics by using server scripts, so those logics executes in web server. So example if you take this so if you implement any logics by using NodeJS PHP JSP serlets spring hibernate like that ASP all these comes under serverside scripting languages.

[00:55:07]So as your developer you are working with the client side scripting languages.

[00:55:15]Okay. As a developer your role is on the client side scripting languages.

[00:55:28]So that is the concept of this.

[00:55:32]Okay. Once again if you observe this website development we have two types of scripting languages in the business logics concept. One is client side script another one is server side script.

[00:55:54]Client side script means the script which executes in browser.

[00:55:59]Server set script means which executes in web server.

[00:56:04]Yes.

[00:56:06]So, ReactJS comes under client side scripting language.

[00:56:12]So, it is the library of JavaScript.

[00:56:16]Library means what is the meaning of this? So, it provides some additional functionalities.

[00:56:23]Okay. Yes.

[00:56:26]It provides some additional functionalities to work with JavaScript.

[00:56:32]That is the concept of this.

[00:56:38]Okay. Yes.

[00:56:42]Now see one small diagram.

[00:56:56]For example, this is one server.

[00:57:01]In this server you have the web pages like this. This one page like that.

[00:57:28]Yes.

[00:57:31]content is like that. We have the pages.

[00:57:40]For example, user X sends a request to the server.

[00:57:49]Okay. User X sends a request to the server.

[00:57:55]Okay. So homepage is accessing user X.

[00:58:00]Okay, user means client.

[00:58:05]So here the person who is accessing the website, we can call that person as client.

[00:58:14]Is it clear? The person who is accessing the website, we are calling that person as client.

[00:58:22]Now here yeah implement logis by using react or any other technologies and server side programmer use something like PHP or other technologies. Now when it is downloading here, yes, what are the logics implemented with ReactJS?

[00:58:49]Those logics will download into the browser and those logics executed where this browser.

[00:58:59]That is the point of this means the original client has kept downloads into the client system. Client means the user okay downloads into the client system at the time of opening the web page at the time of loading the web page. Okay, then with the help of browser it executes but server script is not like this. Yes.

[00:59:34]So this server side script executes where the web server and the result is downloading to the browser.

[00:59:49]Is it clear like that we have these two types of scripting.

[01:00:08]First one is the client side script and second one is server side script.

[01:00:18]That is the point of this. Okay.

[01:00:22]So as your developer your role is to work with the client side script.

[01:00:36]Okay. Yes.

[01:00:38]So, ReactJS means nothing but the client set scripting language.

[01:00:44]Now, what are the benefits of this client set scripts?

[01:00:51]Yeah. Where we are in this client script.

[01:00:57]So, the main points here this is very important question. Okay. Why we are using the client scripting languages? Okay, what are the reasons that is very very important?

[01:01:16]First point to apply dynamic functionalities on HTML elements. Yes, >> the first point why we are using clients scripts to apply the dynamic functionalities on the HTML elements.

[01:01:43]So what the meaning of these dynamic functionalities?

[01:01:48]Yes, all HTML controls are static controls.

[01:01:54]is won't apply dynamic functionals on this contract then we taking the support of this client side scripting languages.

[01:02:09]So what is the meaning of dynamic? Here the properties of HTML controls you want to change at runtime means in browser that comes under dynamic functionality.

[01:02:29]By default HTML is static functionality, static technology.

[01:02:37]HTML is static. You want to convert it as dynamic then we are taking the support of client sales gives so what the difference between static and dynamic we'll discuss here. So one file I'm creating for your idea. So just see the result of this. Okay. Yes.

[01:03:02]So don't try to understand this code simple HTML code what I'm writing now.

[01:03:10]So here I created one file and its name I have given demo html.

[01:03:19]Now you can see this.

[01:03:27]So this is demo.html HTML we have.

[01:03:32]Okay. Yes.

[01:03:35]Now I want to open this in browser.

[01:03:41]Chrome I used it here. Nothing is there in this file. Now in my browser sorry in my desktop I have some images like mango.

[01:03:54]Yes you can see orange like that. These images are there.

[01:04:01]First I want to display mango.jpz img source is equal to mango.jpz and width is equal to 200 pixels have given.

[01:04:20]Refresh.

[01:04:22]Yes. This is mango. JPG image.

[01:04:30]Yes. Yeah.

[01:04:34]So what the source of this image? 200 pixels. I mean with width is 200 pixels and source is mango.jp means here I have given two properties.

[01:04:49]One is source another one is yes.

[01:04:58]Yeah. So with this properties this control is loaded in browser.

[01:05:06]Now already this control is loaded. Now my requirement is I want to change these properties in browser.

[01:05:16]For example, I want to increase the width.

[01:05:20]Okay. Or I want to change the source.

[01:05:25]So without modification this program, it is not possible by default.

[01:05:32]So once again modify this program and reload this in browser. Then only those modifications will affect on the browser.

[01:05:43]Okay. But my requirement is user wants to change the properties not programmer.

[01:05:51]Okay. So if programmer means it will affect it will work on the program. Programmer can change in the program. So those changes will affect on the browser that is okay.

[01:06:07]But user user can't modify the program.

[01:06:11]Right?

[01:06:13]But user wants to change the properties.

[01:06:17]For example, see in this flip card these images see if mouse on this images then those are expanding means bit width and height is changing.

[01:06:39]Okay. Yes.

[01:06:46]Yes. Yeah. These type of properties I want to change. Then we are taking the support of client side scripts like either JavaScript or nextg technology of JavaScript like React, Angular etc. Okay. So I will write a small code here.

[01:07:12]So see this result.

[01:07:17]Don't try to understand this code now.

[01:07:20]So yeah.

[01:07:31]So my requirement is if user click on this image control I want to change the source that is new source orange dot jps I want to provide that is the requirement.

[01:07:47]Okay. Now if you observe your program.

[01:07:50]Okay.

[01:07:52]Yes.

[01:07:58]You can see when I click on this it is change it to orange image.

[01:08:05]Yes.

[01:08:07]Like that any property any control we can change at runtime with the help of any client script.

[01:08:17]like you can use JavaScript or next level technologies of this JavaScript like React, Angular etc. Okay. Same like flip card.

[01:08:34]Yeah. So when the mouse is moving on the control.

[01:08:42]Okay. Yes.

[01:08:50]Now refresh this with the mouse on this style width is equal to something like I'm increasing the width and height of this counter.

[01:09:05]Yes. Yeah. And when I click on this, so at runtime we are changing source property with property of this control.

[01:09:18]That is the concept of this.

[01:09:22]Yes. Yeah.

[01:09:28]For that we are taking the support of this client said scripting languages.

[01:09:36]Second point yeah so programming concepts I'll discuss later just what is client skip okay we discussed here second point to validate input controls so validations like test box is empty and password retype password matching or not these type of validation we can provide here for example here. Yeah. So here this is registration form without entering any data. If I click on this sign up so you're getting this error messages like okay yes so with highlight right color. Okay. So getting the error messages like what is our name what is surname like that these all validations we can perform by using this client side scripting languages.

[01:10:47]Next one to work with Ajax.

[01:10:54]So Ajax concept is very very important to work with this Ajax we taking the support of client side scripts.

[01:11:05]So actual Ajax we are using to send a request to the server without submit the web page. I will discuss the concept of Ajax. Okay. For that we are spending around four to five days.

[01:11:24]The here we will discuss what is Ajax, what the advantages we have, everything we'll discuss there. Anyhow to work with the Ajax concept getting the support of client set scripts.

[01:11:42]Yes. Yeah.

[01:11:44]So backend API services means uh serverside API services you want to call from front end technologies. For example in NodeJS okay that programmer is created one API service or Java programmer created one API service that I want to access from a react application or angular application. In that point of view we are taking the support of Ajax. Ajax stands for asynchronous JavaScripted XML. Okay. So there we are taking the support of this client side script.

[01:12:24]Okay. Yes. So that is one more big point here. Next one to execute logics. Yes.

[01:12:37]So I told you you want to work with the business logics attain the support of clients script.

[01:12:46]Actually these two technologies we are using to implement the logics.

[01:12:50]So what are the logics we are developing by using client side scripts. Those logics executing browser and what are the logics we are developing through server script. those law is executed server.

[01:13:07]Yes, here that is the main point.

[01:13:14]Now here one example I will show you. Let me delete this.

[01:13:23]This is the server.

[01:13:28]So this is one web page like loan dot something like one web page is there some X is trying to access this page it is downloaded into the browser Press here in browser we have controls like okay yes this is loan amount principal amount and this is EM uh not EMI 10. Okay. Yes, like 50 months or 60 months like that slow abundant tenure. Okay. Yes.

[01:14:41]Now this is the button calculate button.

[01:14:46]Now if you enter the loan amount something like 10 lakhs and tenure.

[01:14:54]Okay. 60 months.

[01:14:59]When user click on this calculate button.

[01:15:08]Yes. When user click on this calculate button.

[01:15:14]So based on this loan amount and tenure we're executing the logics. Okay. So based on this loan amount and tenure we're executing the logics.

[01:15:32]So those logics result is how much EMA he has to pay.

[01:15:39]Okay, that logic serverside programmer if you take he will implement by using serverside technologies and front- end programmer can implement he will use front-end technologies.

[01:15:53]Now what is the advantage if you develop by using front end programming means client side programming the advantage is it executes in this browser where it executes in this browser.

[01:16:09]Okay, that's why that's why the result performance is very fast means user can see this result immediately.

[01:16:23]Yes, in case if your programmer use the server side script. So that logic execution in server means when programmer click on this button on request is going to the server and there it is processing and response is coming back to the browser.

[01:16:50]Yes, for this entire request and response process it takes time.

[01:16:58]Yes, in case if it is server side script, if it is client side script then it executes in the browser immediately.

[01:17:14]Yes.

[01:17:21]like that.

[01:17:27]So most of the logics in website okay programmers are preferring the client side technologies because the performance is very very fast that the reason okay yes so that's why your developer your developer okay can handle the logics which can execute in browser and server side programmer logics executing web server.

[01:18:03]And the main question is yeah what we can do with the server cell scripting languages I told you.

[01:18:15]So logistics we can run by using client scripting languages and Ajax okay validations like the dynamic functionalities everything we can do by using client scripting languages and what the purpose in the projects why we are using not we server side programmers requirement here okay main purpose is to connect with the database Okay. Yes. The main purpose is to connect with the database.

[01:18:51]So for example, if you take Facebook or Gmail or any other web server. Okay.

[01:18:59]Where the database available?

[01:19:03]Is it available in the client system or server machine?

[01:19:07]So it is available in the server machine.

[01:19:13]Yes. Yeah.

[01:19:15]So that's why user can connect these databases by using serverside scripting languages. Programmer. Okay. Programmer can connect with these databases by using serverside scripting languages. So not possible with client scripting languages because if programmer implemented the logics using client script then it executes in browser try to connect with the client's database but website database is available where in centralized server that's why using the server scripting languages it is possible like that database connectivity tokens creation sessions s in that point of view in that point of view getting take the support of this serverside scripting languages.

[01:20:16]Yes. Yeah.

[01:20:19]So remaining all point of views we can use the client scripting languages. So these are the main differences between these two.

[01:20:31]Got it? Yes.

[01:20:35]Okay fine.

[01:20:38]So you got the clarity why we are using this client scripting languages and uh ReactJS it is a client set technology the logics which we are implementing using ReactJS those logics executes in browser okay now who implemented ReactJS Mr. Jordan walk. So one of the employees in Facebook.

[01:21:08]Okay. So Jordan walk implemented this rej.

[01:21:16]Official announcement is 2013 and uh it belongs to Facebook corporation.

[01:21:26]What the reason behind this implementation?

[01:21:30]Actually they wanted to add some logics in the Facebook chart concept.

[01:21:38]Okay. The Facebook chart concept. For that they implemented this react in the year 2013.

[01:21:48]Okay. Yes. So the main purpose is internal purpose.

[01:21:54]Later letter later letter later letter later letter later letter later letter later letter later letter later letter later letter later letter. Okay.

[01:21:58]They released this react as opensource client set technology.

[01:22:08]Okay. From then from then every started working with this ReactJS every person using this ReactJS in their application development.

[01:22:25]So now many websites like Instagram and Apple projects, Microsoft projects.

[01:22:33]Okay. All these projects contains ReactJS. So in U development point of view, there are two technologies playing very important role in this software industry. One is React, another one is Angular.

[01:22:53]Now if you compare these two technologies we have more openings with this react than angular. So why we have more openings? What are the differences?

[01:23:04]We'll discuss later.

[01:23:08]Okay. So anyhow in U development point of view. Okay.

[01:23:14]So in companies okay ReactJ they're using to work with the client side functionalities.

[01:23:23]What is that client side functionalities? So that is the concept of this ReactJS.

[01:23:30]Yes. Yeah. So this is about basic introduction of ReactJS.

[01:23:36]Now you got some clarity what is client script and what is server script. Okay.

[01:23:42]Like that.

[01:23:44]You have some client in this point of view.

[01:23:48]Now what are the features we have in this ReactJS? We'll discuss before that any questions you have you can ask me a sol.

[01:24:06]So till now we discussed what is ReactJS okay and what we can do with this ReactJS these points we have discussed so here any doubts any questions you have no doubts okay fine Now what are the features of this? We'll discuss before discussion. Okay. This is UI full stack with project.

[01:24:49]Yes.

[01:24:54]So what is full stack here? Full stack means frontend full tech. Okay. What are the technologies required in companies to work with the front end?

[01:25:08]Those all we will discuss means not only ReactJS we are completely covering JavaScript HTML CSS language Bootstrap and media queries.

[01:25:31]Yes, these are all we are covering here.

[01:25:35]the JavaScript, HTML, CSS, Bootstrap and media queries.

[01:25:42]Okay.

[01:25:44]Yes.

[01:25:47]So along with this complete ReactJS and additionally project.

[01:26:01]Yeah.

[01:26:02]So one real name project and that yeah we will discuss this e-commerce website shopping application end to end including payment gateway integration.

[01:26:23]Okay. Online purchasing.

[01:26:27]So client side as well as uh admin side programming. Okay.

[01:26:34]Everything we will cover here.

[01:26:39]So for that the duration is 100 days it is taking for you. Okay.

[01:26:49]Yes. So it is course plus project batch only ReactJS if you take the ReactJS batch JavaScript and React these two they're covering we are covering these two but you have full stack project match if you take so everything along with the project we are covering Okay. So individual if you take this course plus project it cost around 20,000 but for this you have full stack project I think they're charging around 12 13,000 I think 12,000 okay means both are included with this less fees okay it's separate if you want to take project and reactjs okay so in So for react is 8,000 and project is 12,000.

[01:27:56]Okay. They charging total 20,000. So with this UF stack including this project everything will be covered for the 12,000.

[01:28:07]and code duration is 100 days I told you and uh here recordings we will provide so that every day class recordings notes we are providing in Google drive the drive access you'll get you can access through Google drive okay yeah this is the pattern which we are following here.

[01:28:41]Okay. And every day one hour session we have so this is 6 to 7. Okay. Yes.

[01:28:50]Initial demos we will spend around 45 to 50 minutes.

[01:29:00]After that 1 hour session we are have that is the concept.

[01:29:09]Okay. Yes.

[01:29:12]So what are the features we have this rejs compared with JavaScript? What are the advantages we have here? So those points we will discuss in the next class.

[01:29:27]Okay. Yes. Any doubts before quitting this today's session?

[01:29:37]More doubts.

[01:29:40]Yes.

[01:29:41]Then same tomorrow class you can drop.

[01:30:05]Yes. uh in last class the first demo just explain you what is ReactJS right so now what are the features we have in this ReactJS now if you Yeah, observe this uh first of all just five minutes of the last concepts yesterday concepts I'll discuss.

[01:30:48]Okay. Yeah, it is a client side script of JavaScript is a client script to implement web applications.

[01:31:20]Yes.

[01:31:23]So if you want to download websites then we taking the support of this ReactJS.

[01:31:36]Okay. Yes.

[01:31:39]And also yesterday I told you one point.

[01:31:44]This library of JavaScript.

[01:31:59]Yes.

[01:32:06]No.

[01:32:09]What is client test?

[01:32:12]If we take any websites.

[01:32:16]Yeah.

[01:32:18]So I told you we have two phases. One is design phase. Next one is coding phase.

[01:32:28]Design phase user interfaces we are creating.

[01:32:38]Yes. Using HTML, CSS and bootstrap.

[01:32:49]So using this technologies we are creating the user interfaces.

[01:32:56]coding phase we are implementing business logics. Yes.

[01:33:10]Yeah.

[01:33:17]According phrase we have business logics.

[01:33:23]The logics were implemented.

[01:33:32]Okay.

[01:33:38]In logics two types of scripting we take.

[01:33:45]One is client side script.

[01:33:52]Second one is server side script.

[01:34:07]Yes. Like that uh these two types of scripts.

[01:34:14]The first one is client script and second one is server script. Client says script means which executes in browser. The code executes in browser. So ReactJS, JavaScript.

[01:34:35]Okay. React, Angular, all this comes in the client scripting languages.

[01:34:51]Next one server escapes executes in web servers.

[01:35:03]Where in web ser execute in web server.

[01:35:12]For example, if you implemented the logic by using yes PHP, ASP.NET, NodeJS, all this comes under what? Server set scripting languages.

[01:35:29]So now what is ReactJS?

[01:35:34]So it is a client side scripting to implement the web applications.

[01:35:42]is the library of JavaScript.

[01:35:46]Is this clear? Yes.

[01:35:52]So like that we discussed in the last class the basic information. So library means what the meaning providing some additional functional to work with the JavaScript.

[01:36:11]So if you take net okay PHP all these technologies contains the libraries and frameworks.

[01:36:22]So these libraries and frameworks providing some additional features to work with these technologies like the ReactJS if you observe here.

[01:36:34]So this ReactJS is providing some additional features to work with the JavaScript.

[01:36:42]Okay. And also we discussed who implemented this ReactJS. Yes, in last class we discussed about this here. So this is PHP.

[01:36:55]Okay. Mr. Jordan Wii implemented this ReactJS in the year 2013.

[01:37:06]So Jordan work implemented the ReactJS in which year 2013.

[01:37:20]So actually he is one of the employees of Facebook.

[01:37:28]So to work with the chart concept of Facebook they implemented this ReactJS.

[01:37:35]Later they added more features okay and released it as a opensource software.

[01:37:46]from then outsiders also started working with this ReactJS.

[01:37:52]So that is the concept of this and uh this ReactJS maintenance by Facebook.

[01:38:05]Who maintains ReactJS?

[01:38:08]Facebook company.

[01:38:10]Yes. Yeah.

[01:38:17]Yes.

[01:38:19]Now what are the features we have in this ReactJS? So this concept already we discussed in the last class. Okay. Now we are discussing features of Jes.

[01:38:39]In this features, we'll cover the differences between JavaScript, React and Angular.

[01:38:52]Yes, these differences we'll discuss.

[01:38:56]So, first of all, React supports data binding person.

[01:39:06]Yes.

[01:39:09]All the concept it contains data binding.

[01:39:15]What is this data binding?

[01:39:19]Yes. For example, I will tell you one scenario just one variable I take.

[01:39:34]So variables we are using to store some values at the time of program execution to perform some calculations.

[01:39:49]Okay, calculations means with some values we performing the calculations. For example, you want to find out EMI.

[01:40:02]Further some values are required like principal amount, rate of interest like that.

[01:40:10]Yes sir calculations we are creating the variables these values we are storing where in variables. So principal amount is in one variable rate of interest is in another variable like that. Finally, so principal amount into rate of interest divided by something like that one condition we are using there. So like that variables we are using to store some values. Now if you observe here I've taken a variable serial number and values 100.

[01:40:45]Yes. Yeah. Now this serial number I want to display on the test box for example.

[01:40:55]Now how can you display the serial number in test box? For that we are executing some logic.

[01:41:04]In this logic we are reading the serial number value and that we are displaying on the test box control like this.

[01:41:18]Is it clear? Yes.

[01:41:23]Now this serial number is modified as some other value 100 we changed as 200 from any other function it is modified.

[01:41:35]Then the question is to get this update on the test box will you reun this logic? Yes, compulsory have to rerun this program this logic to get the updated value into this test box like that every time when the variable value is modified every time that modification we are getting in this control.

[01:42:10]Yeah, for that we're executing this code.

[01:42:15]For that we're executing this code.

[01:42:18]Now the thing is every time you want to run this code for the modifications it takes much effort from you because not a single variable number of variables we are creating and those variables we are displaying on the controls like test box or any other control.

[01:42:45]Every time every time if you want to get the execute this logic is uh time taking process for that in this ReactJS in this ReactJS we have one concept that is data binding concept what the meaning of data binding binding this variable with the HTML true Yes. Yeah.

[01:43:20]Means without execution of this code.

[01:43:31]Yes. Without execution of this code.

[01:43:35]We're creating a link between this variable and HTML.

[01:43:44]So how to create that link? I will discuss in programming point. Okay. What the main purpose of this link here? Yes, it is identifying the modifications of this variable updates. Those updates it will print on the HTML controls. Means what are the changes?

[01:44:09]What are the changes we're doing on the variable? Those changes it will update on the binded control.

[01:44:20]Yes.

[01:44:24]So this is the concept of data binding.

[01:44:30]Okay. Yes. How to work with this data binding programmatically? I will discuss later. Actually two types of data bindings we have one way data binding and two-way data binding what is that everything we'll discuss later so this data binding concept is supporting by ReactJS and angular also angular also supports this data binding but not JavaScript yes it is not supporting by JavaScript test supports many validators.

[01:45:17]Yes. To work with the validations, predefined validators are available.

[01:45:25]It is not required to provide the logics. I told you So yesterday class client set scripts we are using to perform the validations.

[01:45:37]For example, if you take JavaScript in JavaScript we are writing the manual logics to validate the controls.

[01:45:52]But in this ReactJS, yes, predefined validations are available.

[01:46:01]Yes.

[01:46:05]So these validations directly can apply on the HTML elements.

[01:46:15]So that is the concept on this. Yeah.

[01:46:19]So how do this validations have discussed programmatically?

[01:46:27]Next one supports single page application.

[01:46:37]Yes, very very important.

[01:46:41]So what is single page application? We are spending around uh 1 week to 9 days to discuss the single page application.

[01:46:53]To discuss single page application spending around one week to 9 days. What is this? A brief idea I will give you.

[01:47:03]Single page means enter website we are implementing in one page. Am I correct?

[01:47:10]H yes VJ Wink are you feeling like that enter web page uh enter web contains one page?

[01:47:27]No.

[01:47:29]What is the meaning of single page? I will discuss now.

[01:47:34]So a small diagram I want to draw for example this is server home about space contact like that we have some pages in your website.

[01:47:58]Yes. Yeah.

[01:48:01]Now user sending the request for your website.

[01:48:09]First loading the homepage.

[01:48:13]Yes, we are loading the homepage.

[01:48:23]So there hyperlinks are there to open that doesn't contact. Generally we are seeing this hyperlinks right login page hyperlink registration page hyperlink like that when user click on the about us one more request we are sending here okay the response is coming back here if user click on contact us one more request is sending to the server and the response coming back to the browser like that for every page okay every selection a request is going to the server and the response is coming back to the browser.

[01:49:12]Yes. Yeah.

[01:49:19]So this is the concept of this.

[01:49:23]So every time you are sending one request to the server means it is increasing the burden on the network traffic because not only you many people will access uh many people access this application in the same time that's why number of hits you are sending to the server it increases the traffic.

[01:49:45]Yes. So for that the single page application concept has been implemented.

[01:49:54]Yes.

[01:49:57]What the main purpose of the single page application concept?

[01:50:02]Yes.

[01:50:03]So here enter this we are creating as one object.

[01:50:12]Yes.

[01:50:15]So all these pages actually in React we are calling them as components. All these components we are holding as one object.

[01:50:26]Got it? Yes. When user sends the first request.

[01:50:33]Yes.

[01:50:34]Then that enter object loading into the browser.

[01:50:44]restored in the browser caching memory location.

[01:50:50]There we are having all these pages home, about us, contact us like that.

[01:51:06]Yes. Yeah. When user click on the home then what is happening?

[01:51:11]Yes. That homepage is coming from the browser. About us that about us is coming from contact us is coming from here.

[01:51:23]Means next time onwards no need to go to the server only first time the request is going to the server and getting the response of this.

[01:51:40]That is the concept of yes this concept we are calling as single page application.

[01:51:55]Yes. Yes.

[01:52:00]So we are also calling it as routing also.

[01:52:07]Yes.

[01:52:12]So how to create this single page means here browser if you take for every request browser is reloading means multiple instances of the browser if you use the chrome or firefox whatever it may be. So normal procedure if you take multiple instances are creating here but in this point of view only one instance for this browser we're having that only one instance we are having for this see clear yes so every time browser is not reloading which is opened very beginning time.

[01:53:02]Yes, which is opened in very beginning time. Same browser will display the content of about contact us like that.

[01:53:18]Yes, that is the procedure of this.

[01:53:27]Yes.

[01:53:32]Next one supports many services.

[01:53:43]Yes.

[01:53:45]So services we are using in functional point of view. So different types of services it is supporting for us.

[01:53:54]These all services we are using here. Is it clear? So many services we are getting here.

[01:54:03]Okay.

[01:54:05]So for example to work with the Ajax in JavaScript we're writing the manual logics but in this ReactJS predefined services available like that not only for this AAS concept if you take any other concept okay so in functional point of view predefined service is available. We're using that service.

[01:54:38]That is the main point of this.

[01:54:45]Okay.

[01:54:46]Next one supports JSX.

[01:54:57]Yes, actually it is not there in Angular also.

[01:55:02]So Angular supports single page application not only react even angular also supports single page application validators data bindings and angular we have services.

[01:55:15]So in ReactJS additionally JSX format is there.

[01:55:20]What is that JSX format? It stands for JavaScript XM.

[01:55:34]Yes.

[01:55:36]What the meaning of this? We're combining the JavaScript and HTML code. Generally, we are writing JavaScript in separate file. HTML is in separate file. or else or else in the same file but JavaScript is in separate section. Okay, with the script tag we are writing here and HTML separately we are writing. So what is the problem because of this separation?

[01:56:07]Yes. So you want to run any HTML code from JavaScript or you want to run any means for example some JavaScript code is executed that result you want to display the HTML control.

[01:56:24]Okay JavaScript code is executed that result you want to display the HTML control. Then we need to call the JavaScript from HTML.

[01:56:36]we need to call that JavaScript from HTML.

[01:56:39]So that is the concept of this.

[01:56:44]Okay. Yes.

[01:56:47]But with the help of JSX both we can come back means after execution of JavaScript logic immediately you can place the HTML control inside that logic only to display the result of that control. For example uh some data I want to display on the table. Ajax uh getting some data assume that we are getting some data from database then that I want to display the HTML table format in that point of view no need to write the uh script and HTML in separate locations.

[01:57:21]So just to get the data we can write the script after that below that you can place the HTML also to display that content.

[01:57:35]Is it clear?

[01:57:41]So this is the point there supports JSX format.

[01:57:50]So I will show you how to work with that. Then you'll get the clear picture.

[01:57:54]If I show you that you'll get the clear picture. Next one.

[01:58:02]Suppose virtual DOM. Yeah. So this is also not available in Angular and JavaScript only ReactJS.

[01:58:20]Okay, what is this virtual DOM? So first we should discuss about the DOM.

[01:58:27]So based on the HTML elements on DOM is creating the RAM. So if you do any modifications in HTML enter DOM is updating every time.

[01:58:39]Okay. So how it is updating everything I will discuss later for a single modification enter that page is updating that is the by default procedure.

[01:58:52]So if you take any web technology like the application with JavaScript or angular okay or any other technology but when we are coming to the ReactJS they provided one extra DOM for us. Okay that is called as virtual DOM.

[01:59:15]Yes they provided this virtual DOM.

[01:59:20]What is the benefit of this virtual law?

[01:59:24]Yeah, the benefit is nothing but instead of reloading this instead of reloading this only that patchwork is updating only that patchwork is updating. So this is called as virtual is this clear? Yes.

[01:59:59]So like that we are having okay this virtual DOM concept. So because of this virtual DOM the performance is very very fast compared with the angular very very fast means don't expect minutes and hours in milliseconds difference is there at the time of updating the components like test box data or any other data.

[02:00:38]So practically we'll see after installation everything anyhow the concept is it is supporting the virtual do so. So that is the main point. So see open Google.

[02:01:04]So I will type virtual do react.

[02:01:10]So here if you observe this yeah so abstract representation real down so high performance for high performance we're using this watchful dog.

[02:01:32]Is it clear?

[02:01:40]That is the main concept of this to increase the performance.

[02:01:49]Take the support of this.

[02:01:55]This clear? Yes.

[02:02:01]Next.

[02:02:04]So how it is working everything we'll discuss in detail later after that installation and programming.

[02:02:13]Next one if you take yes React Native we can use to implement Okay.

[02:02:40]Applications.

[02:02:44]Yes.

[02:02:48]What is this reactator?

[02:02:54]The re this reactator we are using for what? to implement the cross mobile applications.

[02:03:06]Not only websites, we can also develop mobile apps with the help of this native.

[02:03:18]Is it clear? Yes.

[02:03:24]Now here, see I told you to implement the web applications. As I told you not only website development, we can also work with mobile applications.

[02:03:57]Yes, that is the point on this.

[02:04:02]So to work with the websites for designing HTML and for coding react we are using to work with the mobile apps. Okay. For designing we are using native. What is the technology? Native technology and for coding we are using react.

[02:04:30]So that is the concept of this.

[02:04:34]Okay. Yes.

[02:04:40]Cross mobile means what is that? One app supports different mobile devices like Android, iPhone etc. Yes. Yeah.

[02:04:58]No need to create multiple apps. For example, if you take Android application, if you create an Android application, it supports the Android mobile.

[02:05:14]It is not supporting the other mobiles if you take.

[02:05:23]Okay. So iPhone application it is not supporting Android like that those issues are there. Okay.

[02:05:35]But if you take React Native or Phone Gap these technologies if you develop any app in these technologies so that app supports any type of device.

[02:05:49]So means only one application can support Android mobiles, iPhone mobiles and all.

[02:06:00]So that is the concept on this.

[02:06:03]Okay. But this course is for website development not for the mobile apps development.

[02:06:12]Here we are developing the concepts related to website and in our project also we are discussing the website. We are not covering anything about this native. Okay. Yeah. Only react plus HTML we're discussing not react plus native.

[02:06:34]So that is the concept of this.

[02:06:38]Okay. Yes.

[02:06:44]Next supports redux.

[02:06:55]So this redux we are covering here.

[02:06:58]Redux is state container.

[02:07:01]This redux is nothing but a state container. So this redux we are covering what the main purpose of this redux yeah to transfer the data from one page to another page we are using this redux is it clear to transfer the data from one page to another page we're taking the support of FedEx so it supports the datex concept we have separate package to work with the redux.

[02:07:41]So I will discuss with you later how do you use this reduction.

[02:07:46]Okay. Yes.

[02:07:49]Next one simple coding.

[02:08:03]The coding is very very simple.

[02:08:10]It is clear. Yes.

[02:08:17]Yes. Coding is very very simple compared with the JavaScript.

[02:08:27]So it is very easy even compared with the angular. Okay. Now come to this discussion with angular.

[02:08:37]Angular not supports JSX format and it is not supporting virtual docs.

[02:08:46]s not supporting the virtual DO and uh so if you take ReactJS yeah we can access the React functionalities by using either JavaScript or you can also use TypeScript but Angular compulsory TypeScript is required.

[02:09:14]Yes.

[02:09:16]Yes.

[02:09:18]So that's why additionally we need to learn this TypeScript but in ReactJS we can use JavaScript also in companies already many JavaScript teams are established.

[02:09:35]Okay. Many JavaScript teams are established for them. what the next uh technology to update their skills nothing but they will look for the ReactJS like that in companies many ReactJS teams are established companies many ReactJS teams are established so if they're looking for any additional resource to add with the teams compulsory they will take the react source like that we have this one.

[02:10:14]So that's the reason why we have many openings with this react than angular but angular is also good. Okay, not only this ReactJS. So some companies working with Angular also but in comparison React is much okay. Yes.

[02:10:39]And Angular is library.

[02:10:46]React is framework.

[02:10:53]Okay. Yes. Library we are using with the support of another technology. Here we are using the support of either JavaScript or TypeScript. We are calling the library functionalities framework means okay so inside this framework we are writing the logics okay so already this framework is implemented based on the typescript inside that we are implementing the logics we are not calling from any other technology here directly it is providing the complete structure for us inside the structure we are implementing the logics okay so in learning point of view angular learning is more because it provides many functionalities everything. React learning is simple because compared the angular the functionalities learning curve is less.

[02:11:48]Okay. But if you take angular so no need to depend on the third party libraries for uh some functionalities but in react react sometimes we are depending upon the third party libraries. I will discuss what are they because here Angular is providing everything okay it is a framework but react for some concepts for some concepts mean some functionalities when depending upon the third party libraries that is a concept so these are the differences between the angular and react.

[02:12:42]Is it clear?

[02:12:53]Okay. Yes. Now, how to work with this read programming? Okay. Yes. Everything we will discuss in the coming sessions.

[02:13:05]Okay. So, first we need to discuss the concepts of JavaScript because JavaScript is important to learn this. Readjs.

[02:13:15]Once the JavaScript concepts are completed then we will go with that React installation and yes.

[02:13:32]So that is the concept of this.

[02:13:36]Is it clear?

[02:13:43]So any doubts, any questions you have?

[02:13:48]Okay. Fine.

[02:13:51]>> So next class. Yeah. Tell me >> how many days sir? How many duration?

[02:13:58]>> 100 days including proceed.

[02:14:01]Okay sir. Okay.

[02:14:04]>> Yes.

[02:14:07]>> Including project sir without project sir without >> 60 days.

[02:14:13]>> 60 days sir. Okay.

[02:14:15]>> Yeah. 60 working days.

[02:14:17]>> Okay sir. Okay. Only 60 days. Without project >> we can join sir without project because I'm a Java de just react only I want to.

[02:14:28]>> Yes. Then contact with the management.

[02:14:33]>> Okay. They will uh share you that project price. Sorry only course content price everything for you.

[02:14:41]>> Okay sir. Okay. Okay.

[02:14:43]>> Yes.

[02:14:45]>> Thank you. Thank you sir. Yeah.

[02:14:48]>> Yes. Welcome.

[02:14:50]So any other doubts you VJ under? Okay fine.

[02:14:56]So in tomorrow's session we'll discuss the next topic. So as I told you de most spending around 45 to 50 minutes after that 1 hour slot is there for us. Okay.

[02:15:09]CNS class you can drop. Thank you >> sir. Every day 1 hour 6 to 7.

[02:15:15]>> Yes.

[02:15:16]>> Okay sir. Okay. Thank you.

[02:15:32]Yes. Uh I hope you can see my screen right?

[02:15:37]Yes.

[02:15:41]Yeah. Good morning once again. Uh my name is Swami Naidu. I'm teaching UI technologies from past 14 years. Okay.

[02:15:55]So this is uh ReactJS demo class. Okay.

[02:15:59]In this demo I will brief what is ReactJS and uh what are the advantages why we are using this ReactJS these concepts we'll discuss. Okay.

[02:16:16]Yes. First of all, just let me open the notepad.

[02:16:25]No.

[02:16:33]Yeah. ReactJS.

[02:16:36]What is this ReactJS? Yeah.

[02:16:40]So ReactJS is a client side script.

[02:16:45]We are using this client side script to develop the websites.

[02:16:52]Okay.

[02:16:54]Yeah. In website development we are using two types of scripting.

[02:17:00]One is client side script another one is server side script. Okay. Yes. First of all, ReactJS is a client side script.

[02:17:22]Okay. So, we implement websites.

[02:17:31]Yes.

[02:17:34]So what is client script exactly? That we will discuss now.

[02:17:40]Yeah.

[02:17:45]It is a library of JavaScript.

[02:18:07]Yes, what this nothing but the library of JavaScript.

[02:18:12]So, ReactJS is a client side script to implement the web applications websites and it is a library of JavaScript.

[02:18:22]So if you take any website development yes every website contains two phases.

[02:18:32]First one is design phase second one is coding phase.

[02:18:44]Yes. Yeah.

[02:18:48]So any website if you take the flip code or Gmail or any other website we have two phases here. The first one is design phase. Second one is coding phase.

[02:19:04]In design phase we can create user interfaces.

[02:19:13]So we are calling as UA.

[02:19:16]So what is user interface? Nothing but the screen which we are displaying the end user.

[02:19:25]Okay. Yes.

[02:19:28]So for example if I open Facebook this is the user interface of Facebook.

[02:19:45]It contains the text boxes buttons like this.

[02:19:52]Okay. Yes. Is a user interface of Facebook.

[02:19:57]Now for example Flipkart.

[02:20:03]So this is user interface. So user interface is nothing but the web page which we are displaying to the end user that we are calling as user interface.

[02:20:13]So in this user interface we have controls like text boxes, buttons, images etc etc. These are the controls are available here.

[02:20:25]Okay. Yeah. So to create these user interfaces so what the technologies we are using HTML S CSS.

[02:20:40]Okay. These are the technologies which we are using here.

[02:20:45]So HTML is one technology as well as CSS and also Bootstrap.

[02:20:56]>> Yes.

[02:20:59]So HTML we are using to display the controls like test box, button, radio button. These are all controls we can display. using HTML.

[02:21:14]Okay. So, CSS we are using to provide the styles to the HTML controls like colors, font sizes etc. All these we are providing by using CSS and Bootstrap. Bootstrap main purpose is the responsive.

[02:21:40]Responsive means that web page should compatible with any device like desktop, laptop etc. Okay.

[02:21:55]So this type of responsiveness we can provide by using booster.

[02:22:04]Is this clear? Yes.

[02:22:07]Like that this is the designing phase.

[02:22:12]So second one is coding.

[02:22:16]Yes. In this coding phase we are creating business logics.

[02:22:32]Yes.

[02:22:36]So we are creating one business logics.

[02:22:41]So here two types of technology scripting languages we're using for this coding.

[02:22:52]One is client side.

[02:23:00]Second one is server side script. Yes. So in website development to implement the logics coding part of support of two types of scripting languages.

[02:23:18]The first one is the client script and second one is server set script.

[02:23:27]What is this client script? Okay. Yeah.

[02:23:32]So, script which executes browser. Yeah.

[02:23:48]The script which executes in browser we are calling as client side script.

[02:23:54]Is it clear? Yes.

[02:23:57]For example, if you develop any logics by using JavaScript or national technologies of JavaScript like React, Angular all these comes under client side scripting languages.

[02:24:22]Okay. Yes.

[02:24:26]So JavaScript, React, Angler, all these technologies. For example, I implemented some logics by using ReactJS, those logics execute where in browser.

[02:24:40]Okay. Yes.

[02:24:43]In case if you develop the logics by using server scripts.

[02:24:50]So those logics executes in web server. So example if you take this.

[02:25:00]So if you implement any logics by using NodeJS, PHP, JSP serlet, spring, hibernate like that ASP all these comes under serverside scripting languages.

[02:25:19]So as your developer you are working with the client side scripting languages.

[02:25:26]Okay. As your developer your role is on the client side scripting languages.

[02:25:40]So that is the concept of this.

[02:25:44]Okay. Once again, if you observe this website development, we have two types of scripting languages in the business con logics concept. One is client side script. Another one is server side script.

[02:26:06]Client side script means the script which executes in browser.

[02:26:11]Server script means which executes in web server.

[02:26:16]Yes. So, ReactJS comes under client side scripting language.

[02:26:24]So, it is the library of JavaScript.

[02:26:27]Library means what is the meaning of this? So, it provides some additional functionalities.

[02:26:35]Okay. Yes.

[02:26:38]It provides some additional functionalities to work with JavaScript.

[02:26:44]That is the concept of this.

[02:26:50]Okay. Yes.

[02:26:54]Now see one small diagram.

[02:27:07]For example, this is one server.

[02:27:12]In this server you have the web pages like this one page like that.

[02:27:40]is content is like that. We are the pages.

[02:27:51]For example, user X sends a request to the server.

[02:28:01]Okay. User X sends a request to the server.

[02:28:07]Okay. So, homepage is accessing user X.

[02:28:12]Okay, user means client.

[02:28:17]So here the person who is accessing the website, we can call that person as client.

[02:28:26]Is it clear? The person who is accessing the website, we are calling that person as client.

[02:28:34]Now here yeah implement logics by using react or any other technologies and serverside programmer use something like PHP or other technologies. Now when it is downloading here, yes, what are the logics implemented with ReactJS?

[02:29:00]Those logics will download into the browser and those logics execute where this browser.

[02:29:11]That is the point of this means the original client has kept downloads into the client system. Client means the user okay downloads into the client system at the time of opening the web page at the time of loading the web page. Okay, there with the help of browser it executes but server script is not like this. Yes.

[02:29:46]So this server side script executes where the web server and the result is downloading to the browser.

[02:30:01]Is it clear like that?

[02:30:13]We have There's two types of scripting.

[02:30:19]First one is the client side script and second one is server side script.

[02:30:30]That is the point of this. Okay.

[02:30:34]So as you are developer your role is to work with the client side script.

[02:30:47]Okay. Yes.

[02:30:50]So ReactJS means nothing but the client set scripting language.

[02:30:56]Now what are the benefits of this client set scripts?

[02:31:03]Yeah, where we are in this client set script.

[02:31:09]So the main points here this is very important and question. Okay, why we are using the client scripting languages?

[02:31:20]Okay, what are the reasons? That is very very important.

[02:31:27]First point to apply dynamic functionalities on HTML elements. Yes.

[02:31:44]>> The first point why we are using clients scripts to apply the dynamic functionalities on the HTML elements.

[02:31:54]So what the meaning of these dynamic functionalities?

[02:32:00]Yes, all HTML controls are static controls.

[02:32:06]Yes, won't apply dynamic functions on this control. Then we taking the support of this client side scripting languages.

[02:32:20]So what is the meaning of dynamic? Here the properties of HTML controls you want to change at runtime means in browser that comes under dynamic functionality.

[02:32:40]By default HTML is static functionality, static technology.

[02:32:49]HTML is static. You want to convert it as dynamic then we are taking the support of client sales scripts.

[02:32:57]So what the difference between static and dynamic we'll discuss here. So one file I'm creating for your idea. So just see the result of this.

[02:33:11]Okay. Yes.

[02:33:14]So don't try to understand this code simple HTML what I'm writing now. So here I created one file and its name I have given demo html.

[02:33:31]Now you can see this.

[02:33:38]So this is demo.html HTML video.

[02:33:43]Okay. Yes.

[02:33:47]Now I want to open this in browser.

[02:33:52]Chrome I used it here. Nothing is there in this file. Now in my browser sorry in my desktop I have some images like mango.

[02:34:05]Yes you can see orange like that. These images are there.

[02:34:12]First I want to display mango.jpz img source is equal to mango.jpz and width is equal to 200 pixels have given.

[02:34:31]Refresh.

[02:34:34]Yes. This is mango. JPG image.

[02:34:41]Yes. Yeah.

[02:34:46]So what the source of this image? 200 pixels. I mean w with width is 200 pixels and source is mango.jp means here I have given two properties.

[02:35:01]One is source another one is yes.

[02:35:10]Yeah. So with this properties this control is loaded in browser.

[02:35:18]Now already this control is loaded. Now my requirement is I want to change these properties in browser.

[02:35:28]For example, I want to increase the width.

[02:35:32]Okay. Or I want to change the source.

[02:35:37]So without modification this program, it is not possible by default.

[02:35:44]So once again modify this program and reload this in browser. Then only those modifications will affect on the browser.

[02:35:54]Okay. But my requirement is user wants to change the properties not programmer.

[02:36:03]Okay. So if programmer means it will affect it will work on the program. Programmer can change in the program. So those changes will affect on the browser that is okay.

[02:36:19]But user user can't modify the program.

[02:36:23]Right.

[02:36:25]But user wants to change the properties.

[02:36:29]For example, see in this flip card these images see if I mouse on this images then those are expanding means bit width and height is changing.

[02:36:51]Okay. Yes.

[02:36:58]Yes. Yeah. These type of properties I want to change. Then we are taking the support of client side scripts like either JavaScript or next technology of JavaScript like React, Angular etc. Okay. So I will write a small code here.

[02:37:24]So see this result.

[02:37:28]Don't try to understand this code now.

[02:37:32]So yeah.

[02:37:43]So my requirement is if user click on this image control I want to change the source that is new source orange dot jps I want to provide that is the requirement.

[02:37:59]Okay. Now if you observe your program.

[02:38:02]Okay.

[02:38:04]Yes.

[02:38:09]Now you can see when I click on this it is changed to orange image.

[02:38:17]Yes.

[02:38:19]Like that any property of any control we can change at runtime with the help of any client script.

[02:38:29]like you can use JavaScript or next level technologies of this JavaScript like React, Angular etc. Okay, same like Flipcot.

[02:38:46]Yeah. So when the mouse is moving on the control Okay. Yes.

[02:39:01]Now refresh this with the mouse on this style width is equal to something like I'm increasing the width and height of this country.

[02:39:17]Yes. Yeah. And when I click on this, so at runtime we are changing source property with property of this control.

[02:39:30]That is the concept of this.

[02:39:34]Yes. Yeah.

[02:39:39]For that we are taking the support of this client side scripting languages.

[02:39:48]Second point yeah so programming concepts I'll discuss later just what is clients as gift okay we discussed here second point to validate input controls so validations like test box is empty and password retype password matching or not these type of validation you can provide here.

[02:40:19]For example, here. Yeah. So here this is registration form without entering any data. If I click on this sign up, so you're getting this error messages like okay. Yes.

[02:40:38]So with highlight right color. Okay. So getting the error messages like what is our name? What is our name like that these all validations we can perform by using this client side scripting languages.

[02:40:59]Next one to work with Ajax.

[02:41:06]Sjax concept is very very important to work with this Ajax. We taking the support of client side scripts.

[02:41:16]So actual Ajax we are using to send a request to the server without submit the web page. I will discuss the concept of Ajax. Okay. For that we are spending around four to five days. There we will discuss what is Ajax or that advantages we have everything we'll discuss there. Anyhow to work with the Ajax concept getting the support of client set scripts.

[02:41:54]Yes. Yeah.

[02:41:56]So backend API services means uh serverside API services you want to call from front end technologies. For example in NodeJS okay that programmer is created one API service or Java programmer created one API service that I want to access from a react application or angular application. In that point of view we are taking the support of Ajax. Ajax stands for asynchronous JavaScripted XML. Okay. So there we are taking the support of this client set script.

[02:42:36]Okay. Yes. So that is one more big point here. Next one to execute logics. Yes.

[02:42:49]So I told you you want to work with the business logics the support of client script. Actually these two technologies we are using to implement the logics.

[02:43:02]So what are the logics we are developing by using client scripts. Those logics executing browser and what are the logics we are developing through server script. Those logics executing server.

[02:43:19]Yes, that is the main point.

[02:43:25]Now here one example I will show you. Let me delete this.

[02:43:34]This is the server.

[02:43:40]So this is one web page like loan dot something like one web page is there some X is trying to access this page it is downloaded into the browser.

[02:44:08]Yes, here in browser we have controls like okay yes this is loan amount principal amount and this is em uh not emur okay Yes.

[02:44:39]Like 50 months or 60 months like that slow abundant tenure. Okay. Yes.

[02:44:52]Now this is the button calculate button.

[02:44:58]Now if you enter the loan amount something like 10 lakhs and tenure.

[02:45:05]Okay. 60 months.

[02:45:09]Okay.

[02:45:11]When user click on this calculate button.

[02:45:20]Yes. When user click on this calculate button.

[02:45:26]So based on this loan amount and tenure we're executing the logics. Okay. So based on this loan amount and tenure we're executing the logics.

[02:45:44]So those logics result is how much em he has to pay.

[02:45:50]Okay, that logic serverside programmer if you take he will implement by using serverside technologies and front- end programmer can implement he will use front-end technologies.

[02:46:05]Now what is the advantage if you develop by using front end programming means client side programming the advantage is it executes this browser where it executes in this browser okay that's why that's why the result performance is very fast means user can see this result immediately ly.

[02:46:35]Yes.

[02:46:37]In case if your programmer use the server side script so that logic executes in server means when programmer click on this button on request is going to the server and there it is processing and response is coming back to the browser.

[02:47:01]Yes.

[02:47:03]For this entire request and response process it takes time.

[02:47:09]Yes. In case if it is server side script, if it is client side script then it executes in the browser immediately.

[02:47:25]Yes.

[02:47:33]like that.

[02:47:38]So most of the logics in website okay programmers are preferring the client side technologies because the performance is very very fast that the reason okay yes so that's why your developer your developer okay can handle the logics which can execute in browser and server side programmer logics execute in web server.

[02:48:15]And the main question is yeah what we can do with the server scripting languages I told you.

[02:48:27]So logistics we can run by using client scripting languages and Ajax okay validations like the dynamic functionalities everything we can do by using client scripting languages and what the purpose in the projects why we are using not we server side programmers requirement here okay main purpose is to connect with the database Okay. Yes. The main purpose is to connect with the database.

[02:49:03]So for example, if you take Facebook or Gmail or any other web server. Okay.

[02:49:11]Where the database available is it available in the client system or server machine?

[02:49:19]So it is available in the server machine.

[02:49:25]Yes. Yeah.

[02:49:27]So that's why user can connect these databases by using serverside scripting languages. Programmer. Okay. Programmer can connect with these databases by using serverside scripting languages.

[02:49:49]So not possible with client. It's a scripting languages because if programmer implemented the logics using client side script then it executes in browser and try to connect with the client's database but website database is available where in centralized server that's why using the server scripting languages it is possible like that database connectivity tokens creation sessions in that point of view that point of If you getting the support of this serverside scripting languages.

[02:50:28]Yes. Yeah.

[02:50:31]So remaining all point of views we can use the client scripting languages. So these are the main differences between these two.

[02:50:43]Got it? Yes.

[02:50:47]Okay. Fine.

[02:50:50]So you got the clarity why we are using this client scripting languages and uh ReactJS it is a client side technology the logics which we are implementing using ReactJS those logics executes in browser okay now who implemented ReactJS Mr. Jordan walk. So one of the employees in Facebook. Okay. So Jordan walk implemented this rej.

[02:51:27]Official announcement is 2013 and uh it belongs to Facebook corporation.

[02:51:38]What the reason behind this implementation?

[02:51:42]Actually they wanted to add some logics in the Facebook chart concept.

[02:51:49]Okay. The Facebook chart concept. For that they implemented this react in the year 2013.

[02:51:59]Okay. Yes. So the main purpose is internal purpose letter later letter later letter later letter later letter later letter later letter later letter later letter later letter later letter later. Okay. They released this react as opensource client set technology.

[02:52:20]Okay. From then from then every started working with this ReactJS every person using this ReactJS in their application development.

[02:52:36]So now many websites like Instagram and Apple projects, Microsoft projects.

[02:52:45]Okay. All these projects contains ReactJS. So in UN development point of view, there are two technologies playing very important role in this software industry. One is React, another one is Angular.

[02:53:05]Now if you compare these two technologies we have more openings with this react than angular. So why we have more openings? What are the differences?

[02:53:16]We'll discuss later.

[02:53:20]Okay. So anyhow in U development point of view. Okay.

[02:53:26]So in companies okay ReactJS they're using to work with the client side functionalities.

[02:53:35]What is that client side functionalities? So that is the concept of this ReactJS.

[02:53:42]Yes. Yeah. So this is about basic introduction of ReactJS.

[02:53:48]Now you got some clarity what is client script and what is server size script.

[02:53:54]Okay. Like that. You have some clarity in this point of view.

[02:54:00]Now what are the features we have in this ReactJS? We'll discuss before that any questions you have you can ask me with the siz.

[02:54:18]So till now we discussed what is ReactJS okay and what we can do with this ReactJS these points we have discussed so here any doubts any questions you have no doubts okay fine Now what are the features of this? We'll discuss before discussion. Okay. This is UI full stack with project.

[02:55:01]Yes.

[02:55:06]So what is full stack here? Full stack means frontend full stack. Okay. What are the technologies required in companies to work with the front end?

[02:55:19]Those all we will discuss.

[02:55:22]Means not only ReactJS we are completely covering, JavaScript, HTML, CSS language, Bootstrap and media queries.

[02:55:43]Yes, these are all we are covering here.

[02:55:47]The JavaScript, HTML, CSS, bootstrap and media queries.

[02:55:54]Okay.

[02:55:56]Yes.

[02:55:58]So along with this complete ReactJS and additionally project.

[02:56:13]Yeah. So one real name