 document what I was learning different things or it was pretty new at that time and not many people were using it like couple of them like Khan Academy or others were using it. So what I did it I started doing this video series also while I was learning to document whatever what I was trying to like understand from React. You can find this it's not visible over here but I'll upload the slides later but you can still find this. So this is like pretty old and I was trying to get around like okay what all things React is being used about. Around the same time like I started using React I also wrote a book about it which was I started using it in many of our client applications and then again just wanted to get an idea of what various applications React is being used and then kind of documented it in this book. But this is like five years ago so please don't buy it. This is based on React 0.14, 0.14 version of React and right now we are about I think we are around 16.8. So this is pretty old like when it was initially when React initially came out. So that was a bit about background of like how I got introduced to React and I want to set the like agenda of what or for whom this talk is about. So couple of things what I want to talk in this is targeted towards if you know React it will be a breather for you like what all has changed in the last couple of years and what is upcoming that you can start looking forward to. If you don't know React this gives you a bit of a history so you don't need to know everything I'm not going to go too deep into lot of you know technical I'll try to give some examples but this talk is not aimed towards you know learning everything about React this just gives a highlight of okay what all things were there and what has changed kind of a history of what all changed within React in past couple of years. So React is quite popular today like if you note over here it has I don't know 1.2, 1.23,000 like stars on GitHub so many people trying to follow it. On NPM it has like 5 million downloads every week so extremely popular right now like many of the big companies Facebook you know everyone is involved or is using React so it has got like a big developer community right now but when it was introduced the whole idea of React or like when it was introduced it was kind of controversial but what got it a lot of popularity is this concept of virtual DOM so basically in 2013 or 2012 the only ways to do all like the most popular ways of doing like things which react allow us today were by libraries like jQuery which you know you hooked into a DOM and then you manipulated it manually or based on various events. So virtual DOM was this concept where instead of touching DOM which is like slower to do like handling or manipulating DOM is always slower build out this whole manipulation within JavaScript compute it and then just send it to the DOM to make the DOM like make whatever interactions you do much faster. How many of you have experienced like were using React sorry jQuery 4 or 5 years ago so you know like when you did something like DOM element dot text something I don't know some weird things it used to be pretty non responsive so that was one of the reasons like why React picked up a lot but why people loved it a lot or like even I loved it a lot was the whole idea of components. So what components mean is like here is an example page from Instagram this is the Nat Geo page. So here if you see what there are different parts of the page and here different parts of the page are divided into what are individual components or small units. So here if you see this photo itself is divided into like we in one component the likes and the comments and all you can divide a page into small units of small logical units where you display some in some kind of information. It was easier in the world like okay everything that you did during those times were always handling parts of the page some event happening then manipulate part of the page instead of doing that this was a different way of thinking like you compartmentalize different things that you do around the page into small components and then all logic regarding that aspect of that page were you know limited to or you started limiting your thinking towards that component. In the beginning like this was beginning for me when I started looking at react. So this gives a little bit of idea of what it was then. So as I said like I started also creating videos. So this was around that time react was basically used via these two libraries that you see like react basic and react with add-ons and they allowed us to do different things. So what you did is the component that you see you would define it by using react.create class and what you did is you pass in an object to it which had information like for example in a previous case it had information of how many comments they are or how many likes the image has. So that kind of information you would store basically in the state that you see here like get initial state and then basically it had one mandatory method which is rendered. So one notable thing that you see here is which was pretty unconventional at that time or was controversial is that we are using HTML from within JavaScript. During that time it was more towards you know templating language is being used a lot handlebars and those kind of things. So this kind of way of doing HTML from within JavaScript was kind of like pretty controversial when it was introduced. So we have a basic component which got created by create class and then you just return what you want to display and handle how or what kind of information you want to display based on the state that you have within the basic component. So you pass your object that you want to render within create class as well as you could pass external parameters to it by making use of props like here you have a name being passed as an argument that you pass to react component. Before I proceed I just want you to get an idea of how many are like familiar already with react and use it. So yeah we had this kind of a structure very basic just have just pass an object and create components and then to actually display it on the DOM you would pass it to render method and you pass the component that you want to render and where you want to display it. And this whole thing like that's it that's the whole component that you have on a page instead of having a big MBC architecture this was mostly only focused towards having the UI part handling the UI parts of it and it simplified like it did not try to do you know interactions between like model view or those kind of things and just focused on the display aspects of the component. So here it also based on these it also allowed us to have like hooks or also allowed us to have view into what is actually happening within the react component. So it had a very basic life cycle that you see over here it initialized. So what happens is like you create that component it tries to mount it on the page which happens during this initialization you set this initial state where I get initial state and you get props and then when it actually displays on the page that process is called mounting. So you would mount the component on the page and actually display it and then based on some external events like user clicking something we have this event of updates being happening or we can intercept those events by component should update or these kind of various life cycle methods. So these I don't want to focus more on these but just want to give an idea of how the different life cycle was and how basic like it was not too fancy very basic just initialization update and then when you actually remove the component it would just unmount. So around 2014 or 2013 after react was introduced this was the basic way of doing things but around the same time like ES6 or ECMAScript 6 and ES which is like but this made it like okay you are like thinking of the whole component in terms of a class and then here if you see it just required one basic method or one mandatory method which is rendered and then you just return what you want to display on the page again as basic HTML from over here along with this since like if you note over here we are doing a lot of things a lot of things might be done in the class so since we already had the support of JSX one way of doing things was that we did in in various cases you don't need like a lot of complex mechanism for display like you just need some parameters being sent and based on this parameters just display something don't handle like user clicks sorry don't handle any complex stuff around components. So during that time stateless or functional components were introduced like you could start doing this simpler way of things like just pass props as a simple function so we started using these arrow methods and then here what you do is you just get the props based on the props you just return basic JSX that's it. So it allowed us to do like very complex stuff in a simpler way so that's what about like how things were changing like react was adopting to whole introduction to you know advanced features that the community was like improving around on the whole JavaScript parts of it so let's take a look at how other things within react have changed around these past couple of years. So what I want to do is like kind of compare what used to be and how you do things now right how many of you were using react like when this this whole use case was like create class or this were used how many people started it way back okay nobody used others never use create class you're lucky. So you had this way of doing things you have an app like you pass it create class and you so this is like a change in how you initialize which is when you have some state which is like something which you want to mutate and you know maintain some things like okay has the user clicked the button or not these kind of things you would you would put it in the state and then initially you would do it via get initial state wherein you initialize it via something and now what you do is you just get like set it via this dot state within your constructor and then you can set any kind of object over here and the way of changing it is same you just tell use this dot set state to update like whatever state you want to handle any kind of mutations from that life cycle that we had initially it has now simplified a little bit based on the new ways of using it like the whole class way of doing react components so instead of instead of those life cycle methods now we have a simplified way of thinking of how what is happening within when the component is rendered so we have like the mounting of the component wherein you have the constructor when that we just solve you initialize the state and then it calls the render method when it is trying to display the information and then component did mount basically everything is same but just the initialization part that you see it has been more simplified based on the whole class way of doing components how many of you know make sense over here okay so this is for you people so when react started everything was in small parts like you had small components and as applications grew a lot of things was scattered around one way of sharing code like if you had code regarding let's say you have a chat application and you have four different parts of it everyone needs to connect to the back end so when you wanted to share code across components one way of doing that was using mix ins so here if you see this is like a basic mix in that you see above what it basically has is it's just an object of different methods that you want to share across you know multiple components so you would write this basic object which has multiple methods and then what you would do is you would pass it to create class as a in the key which is mix ins and then what would happen is those objects sorry those functions would be made available within your new class that you have just created and here you could then pass the same mix into multiple other class like other classes and those methods again would be made available or you could reuse the same functionality over there couple of problems with this approach is that these functions that you see what they do is when you when you put them as mix in they they would collide with the existing of the existing methods that you had in the same class or they like over here if you see it's assuming that you know internals state or the object which is created over here it is always a