What Is React | ReactJS Tutorial for Beginners | ReactJS Training | Edureka Rewind

Key Takeaways

so good evening everyone welcome to the session on react GS so in today's webinar we actually going to get an understanding of what exactly and you know so I hope that you be having a interesting time understanding details about react and how exactly it works so let's move forward now so this is basically the agenda for today's webinar first section talks about JavaScript the second section talks about what exactly or why exactly reactjs is useful uh the third section focuses on what is reactjs the fourth section focuses on the virtual down and the final section talks about the different applications using V so let's now move ahead to the first section that is Javascript so what exactly is Javascript JavaScript is basically a program language which is predominantly used for client side implementation it initially started off as a tool or technology for prominantly doing client side validation but as the time has progressed now it has moved into a full-fledged technology language which can be used both for client side as well as server side implementation as well okay so in generally what happens is we basically have a HTML which is predominantly used for defining the layouts and then we have CSS which Ty takes care of the sing part JavaScript along with these two technologies and it can also be used for you know performing operation and manipulations on the HTML and the CSS so when it comes to web applications and browser implementations JavaScript has a very strong role to play it can also basically configure the way the content will look like how exactly different type of events are going to be handled in the web application and so on so JavaScript is a pretty powerful language and it has been in the usage for many years okay and right now the whole focus of JavaScript has shifted more from a c side language to a more universal language so what are the typically advantages of JavaScript and the related the first top area is efficiency I think JavaScript as a technology has lot of you know predefined patterns and functions which are automatically by default presented with the framework so no matter which framework we use we will already get some predefined functionalities in place which a developer can start using and start building applications so this saves a lot of time for the developer and he can actually create workable code and deliverable implementation very soon using JavaScript framework so efficiency is a very critical aspect the second aspect is the security so whatever JavaScript framework we use they will be coming with a lot of you know default Security based implementations and also different modules which can be integrated with the basic application to build security so when it comes to things like authentication authorization encryption cryptography digital signatures and anything which we talk about all these things are automatically available in majority of the javascri Frameworks and apart from that many of the javascri Frameworks are automatically or in general supported by an open source community so developers keep on contributing here and uh individuals who are actually working on building new application can reuse those functionalities and sort of you know apply the security related patterns into the application itself next part is basically the cost part one of the most critical factor in any implementation is cost so the whole focus on open source was basically to make sure that people can actually start using implementation without paying any type of funding at the very initial stage and so most of the JavaScript framework are open source and typically available using G or you know the open source reposit so individuals can actually keep on downloading features and can start using them many of them are frequently updated so you can try using new features very very easily and you don't have to spend any type of you know initi funding to buy these KBS and so from overall costing perspective this gives a big Advantage because many times one of the most critical factors is cost itself from that perspective I think JavaScript Frameworks in general more or less are open source and so this is a very good feature for programmers to actually start using it and actually using it more from a end to end implementation perspective as well so let's first talk about angular and so I think there's one question from Sam and he wants to understand how exactly do angular and Amber differ from each so we'll also try to address that question so angular and Amber in general are two clients at NC Frameworks PR dominantly the focus of both these Frameworks for single applications okay and so when you talk about single page application it is basically an approach in which in the very beginning of the application a single page will be loaded which will contain the homepage and then there will be different you know parts to access different parts of the application which could be different templates showing you different visual representation traditionally the web applications will actually involve a lot of you know request going to the server after the initial page was loaded and that will take a lot of time but with the introduction of the single page application approach the number of request the server got effectively reduced and any such request in general being handled to a Jax okay so from the end user perspective this gave a very good advantage to the consumer angular J and Amber both of them support the C MBC approach they were started by two different I would say groups of individuals angler was Prim started by the Google team and Amber was started by the Amber team both of them have their own way of doing the client at Amber in general is more of a framework which in terms can be considered as a more solution of with all thetical approaches redefined angular is something more of a framework which also gives a certain amount of flexibility to the developer building solutioning part of it and in terms of the way the Frameworks have turned up I think Amber has been slow angular has been pretty fast started off angular one and then sh to angular two now angular four and you know the way the whole concept works is pretty pretty different also from a learning perspective I think angler is something which you will be able to start building application pretty quickly Amber you will need some amount of time to understand overall Concepts so from that perspective I think angular is something you know which will work for you pretty fast and I think that's been the way Ang popularity increased and now with lot of contribution from the community and lot of frequent releases I think anyone who really is trying to use C at MBC is pretty much focus on angular now let's talk about react and view so both of them are again slightly different so they are more of a view Centric you know Solutions react is more of a library view is still considered to be more of a framework on The View side react basically was inspired as a component driven Library which basically was defined to solve a single purpose that is for a developer to actually think about building user interfaces as components and then combining together to actually large components here and so that was a predominant Focus you actually first try to use the same concept of component based development but then it also has certain other features like in terms of you know more seamless integration with HTML and templates whereas react basically follow different approach they have a concept of GSX which combines HTML and JavaScript and that's something is being used but both of them are Centric to view based implementations meteor is quite different metor is a framework which is an end to end framework for mobile based application development and in turn it actually combines Technologies like angular nodejs and Mong under to actually help developers to have an end to end framework solution which can use build fast mobile application so here you don't have to really choose individual Technologies at each layer they're already part of so it's a single solution for everything so for people who are actually focusing more on mobile based implementation and quick applications definitely Mator is a very good choice here okay so now let's move forward and talk about why re is popular why it is so react basically try to introduce some very interesting Concepts so react in general is usually used with a state management tool but the idea is that the way the view is going to be represented and the way the view will be changed is controlled to a certain process okay so if you have three scenarios like a initial data or real time data user input all of them will basically go through some type of dispatch mechanism which will in turn update the store store can be considered as a representation of the data for the state and this change in the store of the state will be reflected into the view so the view by itself is not able to control the way it can change so it has to follow a certain process okay which typically is more towards the oneway data flow and this whole process of oneway data flow and you know I would say updation in a certain manner only with certain restrictions has made react a pretty popular technology okay so there are no unexpected changes testing is more accurate these are some of the key advantages you get but react has tried to solve all these different aspects and made the whole technology much better and better in terms of performance as well as the usage of the memory so this is just representation of the same diagram so we can now move forward so what is the main challenge with dom manipulation so Dom manipulation is turns out to very expensive Dom is something which actually represents the way the HTML looks like now traditionally what is happening is that changes to the Dom were very expensive because you had to actually iterate the entire Dom structure to make the and this has been a challenge throughout okay so when you have large Dom structures this basically means that it takes a huge amount of time so traditionally Dom manipulation has been a very expensive you know I would say problem for us but react has tried to change that and we try to understand how exactly it tries to change it so in react basically there is an additional you know ler in between which is termed as the virtual do this basically sits between the browser and actual Whenever there is a change in the Dom structure first the virtual Dom will try to understand what that change is okay and it will only apply the differential to the this approach has not been there lot of other Technologies but react is one of the first Technologies to introduce this concept which right now is being adopted by many other Frameworks as well and I think the example we just discussed was about vij so this basically means that the changes happen much faster so your speed improves your memory usage is lesser and definitely you get much much better performance okay so now let's move forward so what is so reactjs is basically a frontend javascri library which was actually developed by Facebook and it was basically used to develop interactive as well as mobile based applications okay and it basically follows more of a template based structure which in general is a combination of JavaScript and HTML which basically helps it to define the overall layout of the HTML also provide know the JavaScript based which operations as well which gives it a lot of power so this and so obviously as I said it started from Facebook but then as Facebook found more value into the overall technology of react they actually mov this to the community and now at this stage it is basically maintained by the open source Community who keep on adding you know features to re and you know a lot of people are also building components and they you know contributing which you know new developers can actually adopt and use them for their own implementation as well okay so let's move forward now so what is react the first concept as I said was basically about the virtual D which meant that any changes happening to the D structure will be determined using something called a different patch Ali so different patch algorithm basically means that it first finds out what are the differences into the current Dom and the changes which are going to come in and then it will apply the patch of only the changes into the real Dom which means that the whole process of Dom updation will happen much much faster the second process is basically One Way binding so as I was saying that the changes into the view can happen only in a certain process okay so basically what happens here is that there is an action basically which determines know what is going to be the flow okay then you have something a state which indicates that what is the current data representation and what is the possible future representation and then you have something called as a dispatch action which basically applies the action and the current state and determines the new state so in terms of Technologies at Ru this is basically termed as reducer okay so but what happens here is that the overall change to the state can only happen through this process in no other ways okay which basically means that there cannot be unexpected changes to the state and so the whole view changes are going to be following only this process it basically means that say there are no unexpected changes so you can ensure that if at all the problem occurs in the way the view works then it will happen only in a certain stage of that process which can easily be buged and Sol so this also saves a lot of time in terms of the testing process okay so oneway binding is one of the key advantage in theact which has meant that it has helped developers to control the view rendering and the adoption of this technology has increased tremendously okay and the third area is basically the server side rendering so one of the very important aspects in the JavaScript space is the initial render okay so whenever the application is loaded in many cases what happens is want the representation to be driven from the server and then the further rendering can be taken care at the client side now the reason why it is important is because you can actually use a lot of server side features you can make use of Technologies like cing Etc to basically store the initial render into the cage and then so whenever you make a request it will just make a request either to the server site or the C and render data the initial load time of the rendering is immensely then faster and this is basically handled from the server site so if you see this diagram we basically are showing a combination of browser react and no CH is one of the JavaScript based server set Technologies which can be used to define apis and also to help in defining the overall layout from the server so this is one of the key areas why reacts has been very popular in the recent times let's move forward and let's try to again get an insight about the virtual okay so we already discussed it let's say understand it so in general what happens is so in a diagram you see a Model A View and a so typically what happens the model gives the data to the view which in turn creates a Dom for okay Dom is nothing but the structure how the data will be laid out then in the second step we basically now what happens is whenever the data is updated by the model the vi had to create a new D for it so the Dom creation process had to happen multiple time which meant that lot of additional data structures were created and lot of memory consumption was also getting impacted here this obviously puts a heavy load on The View and makes processing through so I think one of the key goals of any UI based application is to get a very good response time and if you spend time in just the Dom manipulation or the Dom operation then the user will basically be waiting for most of the time and he's really going to get feeling that the application is running very very slow which should not happen Okay so that's one of the key objectives of any web based applic okay so with react as we see that between the real down and the browser We Are The View we basically have this V Dom which understands that how the Dom will be updated so what happens here is that with react when the model giv the data to the view if the Dom is empty react will create the Dom for it and whenever the data gets updated react will create a virtual Dom for it compare it with the current term with the previous one and only apply those changes which are in different okay so this basically means that the process happens much much faster here okay as I said once the changes are calculated it will update the real with only the element that have actually changed and this is basically happening through a process called as diff and Patch algorithm D basically used to determine differences and patches basically used to apply the changes to the real time for the only elements which are changed let's move forward now react JS application so these are some of the organizations which have actually adopted so we have companies like Facebook and then Yahoo coer Netflix then you have times and many more in fact there are companies like Walmart and PayPal and so on the reason why this company adopted reactors because they found a lot of value in helping the developer think about building the overall UI as a set of components so this is one other question which had come up in terms of what exactly is a component based development right so so component based development basically means that whenever you think about implementation you think about components and here in react we are thinking about components from a user interface perspective okay so everything anything in the U representation will be built by using small small components okay so as a developer you first think about components you build them and then you start building the UI using those components one of the key advantages you get here is that they become reusable as a developer once you have created a component first you can use them for all the future UI implementation which are going to BU which basically helps you tremendously in the reusability perspective that is one of the key Focus areas of the and how it works so a lot of the companies have actually adopted it because they found a lot of value in this approach and it actually spent and sort of you know saved a lot of their development time and in many cases where people are preferring to use an an Javas solution with Technologies like L CH for example react works pretty well with the whole concept of the server side entering which we just talked about so it helps speed up the overall application perspective which makes all the applications much much faster and quicker okay I think that has been the type of value the ACT added and I think that meant that you know different companies have already adopted and in fact they have also gone ahead and changed existing you know technology stack which they had used in the past some of these companies had Java based technology stack net and PHP and so on and I think now all of them have moved to react so I think that's the type of value it gives and I think these companies have adopted it and I think more and more companies are going to move forward as a time progresses so that brings me to the end of today's webinar on re I think we have tried to Know cover some of the key aspects of re like what exactly is Javascript what are the different type of JavaScript Frameworks possible what exactly is rejs why rejs has popular what is the concept of a virtual D and then finally we talked about different companies which are actually using VJs based applications okay so that's all from my side so thanks everyone and have a nice day thank you bye