hi guys welcome to the new course the react.js so in this blog we're not gonna write any code or install react.js in our desktop we're just gonna see what is reactors what is the need of vhs and what are the features that it provides and here we can see what are the features that it provides so first of all what is react.js react.js is a javascript library for building user interface what are the features that it provides declarative component based learn once right anywhere but this doesn't mean like anything that we know what it is what what it does so i'm going to show what the what these all means so before we act uh there is a paradigm is going on it is a traditional based life cycle in which whenever client wants to know or send the request to the server side for the page for a home page or for swap page for an e-commerce website the server will send the files like html css js as a javascript file to the client site and whenever the client will change something again it will send the request to the server side and again server will send the uh respective files to the client side so this is well this is a problem here because in here there is a congestion problem network congestion problem is going on here so for removing this a new concept comes that is the single page application in which what happens that client will send a request for a website or for any page the server will what do that it will send all the files required all the files of the website or web app html css javascript to the client side and the client will change something anything in the website it will be modified in there in the client side it will not send the request to the server and again request some files new files it will all be changes in the client side only so that's what single page application and so in single page application the frameworks that are common come under like you know like angular and our react.js and view so now what happens if we see in the angularjs like whenever we're building a big uh massive uh uh and web app like facebook well it is built on react.js but if angularjs is built on before 2013 that is a 2010 version of angler chess in which what happens that the angularjs is built on a concept called model view controller in which what happens the files or the folders are in a systematic way controller means which controls the model model is the like the data or the structure of data and view is the view that you are seeing in here so that's how angularjs comes but the complexity is very much in the previous angularjs version what it is the problem here that whenever and even calls in here and if if the event should be reflected back to in in this in this component let's say this is a component in this company and it should be reflected back to this component and again a new component arises here and again this should be reflected back to in this place so these are this problem occurring the angular j in angularjs previous version so the developer have problems like how to debug these problems so now our reaction has come into the picture so what reacts to like it provides four concepts uh four concepts for key comps concepts that solve all these problems first one is declarative so declarative just means like uh react says don't touch the dom i will take care of it that's what react says like what is dom like what is zomya dom means dom document object model what it is like it's an architecture or a tree like structure of this view that you are seeing in here this is the structure that you are seeing in here this is the structure that you are seeing in here and this is what written in here so this is the document object model so what react says that don't touch the dom and all the functionality will react to so whenever like we change something in here like tutorial or docs the event will occur in here like you can see in here like talks tutorial you can see that uh some manipulation or some modification is done in here so what the problem in angularjs that uh whenever we change something or in in change something it will be changed directly or change that directly to the component or the tag yeah tag yeah like we use something called like document document dot get element by id get class name by tag name so this thing called like we are injecting something to the component div tag or span tag that directly to the uh page so this is so this is no problem there is no problem with this but the problem is that it will become very um very hard to see what's going on here like like let's say let's we have said like whenever we change something in here and it should be reflected back to in here it's reflected back to in here and something occurring in here and it will be reflected back to in here so these problems is solved by react.js so what reactors do like it create a state you can see in here when you see in here design simple views for each state in your application and react will efficiently update and render just the right component when your data changes so whenever your data changes and if it is a complaint all right this is a component this is another component in here it will change separately to this component in here so that's what declarative means in yeah we will see what it is very uh described way like in our code so now it comes the component based so what reactors like it will uh use the component like it is a reason reusable component it provides a feature of you reusable component in which like this can be used in here we don't have to write the same code for in here and in here and in here it will just a simple component and it will be created in here in here and any place that it requires it will also be uh using as another web app you can see in here this is a component you can see this is one component and you can use this company in any place that you want and also this is a state that you have that i have said uh state which is re uh which is says that this company will be have a state of this seconds equal to zero this is uh not to worry right now so now third one that comes that is learn once right anywhere what this means like whenever you learn this react concept or react fully you can use this react.js in many places like in many platforms you can use in react uh 360. 360 is a react where we are for vr app this is for vr app and also react native that you have also heard you can use in the react native also there is react desktop which is used for building apps for windows mac os so that's what it says like you can use this uh this react in many platforms so that's what this features are and one thing more that in any like you are using any browser just uh use this plugin or just install this plugin that is called react developer tools what it will do like we can see in here maybe uh like i have already installed it and you can see the uh picture the icon in here this is the react icon and you can see it is in blue clear but you can see this is not a blue color because it says or it depicts that the app that you have built is of is built on react.js or not and in here this is just like you can see it it's a dom and you can in here's these components this is a virtual dom well you can you can say well it doesn't depict what it is saying but whenever it is in like development mode mode you can see what it is so that's how you can see and one thing more that react provides like this is the why it is not a framework and why is it a library because react is smaller like it just provides the base of the ingredients like base to build upon this and you can use another libraries like how to use the router and how to uh system systematic way how to use the state and many other libraries how to use the library library for ui more effective ui so it's just a simple base that react provides and all the other ingredients you can provide later so that's what react is and i hope that after after this blog you can let's let's use the code and let's start coding and we will see that it's very much fun and very interesting to use react