hello and welcome to this brand new react CDs and in this series we will be learning the latest version of react which is react 18. now there are a lot of other react tutorials on YouTube which use the older version of react where they use class based components and where they use create react app for creating the project but this series is going to cover the latest version of react wherein we will be learning about the function based components and we will also be using wheat to create a react app as well now before getting started with the series let's have a brief overview about what this series is going to be all about so this series is going to be beginner friendly which means that in this series we will start learning react from the absolute Basics and if you're learning react for the very first time then you should have absolutely no problem at all learning from this series another thing is the series would be completely free so it's not like I've uploaded some portion of the course on YouTube and then I'm going to charge for something else uh this series would be completely free and there's nothing you need to pay but I would highly appreciate if you could show your support by liking this video and by subscribing to this Channel and in this series we will cover all the important Concepts in react starting right from the basics and by the end of the series you should be able to build any kind of application using react another best part about this series is that I have made this series all-inclusive which means that once you complete the single series you don't have to ever keep learning react from other sources I have ensured that everything gets covered here itself this series is also going to get your job ready now I'm not assuring that you will get a job but by the end of the series you'll gain enough react skills to at least apply for some junior level react Developer jobs so without wasting any time let's move on to the next video where we learn what exactly react is so what exactly is react and why it is used so most of us know that react is just a front-end library and it is being used by a lot of companies and all that we know is that react developers are getting paid a good amount of money across the industry but why exactly that is the case now to understand this we have to go all the way back in the past in the 1990s where websites used to look something like this so this is just a screenshot of Yahoo's home page what it used to look like in the 90s so you might see that there's absolutely no website in today's world which looks something like this but back in the day websites were simply a collection of web pages linked with each other now all that a website was is that it was simple HTML CSS and some GS the page had some HTML which gave it the structure it has some CSS which gave the webpage some colors and some sort of a background and then we held a little bit of JavaScript on the web page so as to make websites a little more attractive now these traditional websites which we had this is how these websites actually work so what happens is whenever you try to access any kind of a website you have this client which is nothing but your browser so the way in which traditional websites work is that you type in the name of the website which is the domain name and from your client this request or the URL gets sent to the server as the client sends this request to the server the server receives that particular request and now it's the server's job to give you back a web page and what the server used to do is that it used to render the entire web page and it used to send it back to the client which is nothing but a web browser so what the server does is that it now renders a web page and gives that entire web page back to your browser and the browser shop was simply to go ahead and display this website to us so that we are able to view that website now this website which you were able to view looked something like the Yahoo screenshot which I've shown before so that website contains some links some images so on and so forth so when the use user actually clicks on the links on those pages another URL request for sent to the server and then the server had to figure out what kind of request that is and according to that request the server has to give back another web page so basically what used to happen in the back end which is at the server side is that the server side had to do the rendering of that particular web page now this particular phenomena where the server has to go ahead and sort of render the web page for you this phenomena is called as the server site rendering and older website used to use this however as we moved ahead in the future this traditional approach sort of started taking a backseat and let's learn why exactly that happened so this is how website evolve so as the users on the internet grew the users actually demanded a more interactivity the users want their applications to do a lot more than just simply displaying a web page so websites were no longer just a collection of static web pages but instead they became fully fledged web applications which had a similar functionality to that of a desktop app so back in the days you used to have some desktop software which were more interactive as compared to a simple web page which you would have on the internet but if you take a look at these days almost every software out there is nothing but it's a web app which you could use by just logging into your browser and this happened because website evolved eventually to be more interactive so if you take a look at the most modern web applications they function as if you are running them locally as your desktop software so we all know that modern applications which run on a browser they almost run like native apps and in order to make these applications more interactive more JavaScript was required developers had to write a lot of JavaScript code and what this did is that it severely increased the complexity of the websites which they were trying to build now as the complexity of the website's crew more and more bugs were introduced and it was almost impossible to keep up with all of those bugs and also the code which was being written out there was not as maintainable as it should be and also whenever you have to make your website more interactive using JavaScript what you have to do is you have to do a lot of Dom manipulation and Dom stands for document object model which is nothing but it's actually a representation version of your web page so let's say for example you have to make your web page more interactive that means you had to make changes to the Dom and updating the Dom manually was quite a tedious task So eventually what happened is the website actually evolved to be more interactive but it kind of gave rise to a lot of issues in the back end for the developers where they have to deal with a lot of JavaScript code they have to do the Dom manipulation manually so on and so forth so in order to solve all of these issues a react was introduced so let's now learn how a react application works and how it is different from the traditional application which we have now react is based on the concept of client side rendering so in the previous example in the traditional website the server had to do all the rendering but in react client is the one which actually does all the rendering for you and by client we simply mean the web browser so what happens in a react app is that instead of rendering multiple pages on the server react app has a single page which is loaded only once therefore the applications which are built with react are called as single page applications because you could fit an entire fully fledged working software by using just a single page now when you click a link or when you request some data by clicking on some button on that particular page what react does is that react sends a data request to an API so instead of communicating with the server the react app now communicates with the API and instead of fetching the entire page the react app just asks for data now the API what it does is that it gives us back the data so instead of rendering an entire web page this API simply gives us back the data and once our react application receives that data what it does is that it takes the data and loads that data on a specified portion of the web page without having to reload the entire page for us and this entire concept is called as client-side rendering and it is called as client-side rendering because the server does not render the full web page for us we simply connect to the server or the API to fetch data and react takes this data and adds it to the section of the web page this means rather than updating the entire web page only the section of that particular page is updated and that update is actually done by react now this results in better performance and a more Dynamic user experience so this is how react applications are different from the traditional approach of actually rendering web pages on the server side now let's learn what exactly is react so let's have a brief introduction to what exactly react is so react is an open source JavaScript library for creating user interfaces so let's dissect this definition a little bit so react is open source that means it's basically available to public for use there's no commercial license you could freely use the software and you could also view the source code which is publicly available the next thing is react as a library now people typically say that react is a framework but it's not a framework it's simply a library and the reason why react is not a framework is because we cannot build full stack applications with react alone yes you could build some front-end applications but in order to build the back end you actually need some other framework like Express now react is used for handling the view layer of our application so one thing to note here is that react actually deals with just the front end you cannot use reactive sort of program how your server works or how your server does certain things so if you want to perform some kind of authentication in the back end you have to use another framework for that you cannot do that with react and therefore it's actually said that react is used for handling the view layer of our application now typically when you are developing an application there are various layers of applications such as the model The View and the controller and out of these layers of your application react actually deals with the view layer of your application so react allows you to create large-scale web applications that can change data without reloading the web page so as discussed earlier when we want to request new data from the server a react application does not have to reload the page but react instead fetches this new data from the server and automatically updates that portion of the web page with new data this means you don't have to reload the entire page for just getting or changing a portion of the data on your web page now in traditional web applications in order to get new data you would have to reload the entire web page from scratch but that is no longer the case with react so that was a brief overview of what exactly react is now let's learn why should you use react so react was developed by Facebook to provide a better user experience but it was a later made open source so that other developers or companies could use it now as react is created and maintained by Facebook that means it would be supported for a longer period of time and it would be updated frequently as well and therefore it kind of makes it by far the favorite choice if you want to develop front ends you could be assured that if you encounter some problem there's always going to be a community of developers which you could rely on to get support and you would always have a group of people to reach out for help react is simple and it uses a special syntax called as jsx so what exactly is jsx GSX is a special syntax which allows you to mix JavaScript with HTML Now using jsx you could build a react components using HTML and JavaScript itself and you don't have to learn any new programming language so if you already are familiar with HTML and if you know a little bit of JavaScript then you could just go ahead and get started with react without any issues the next thing is it's a high demand skill which is required by a lot of companies so if you want to apply for jobs and tech companies and specifically if you want to apply for front-end developer roles chances are that they expect you to know react so knowing react is going to help you a lot in getting that front-end developer role react could be used in any Tech stack react does not care which technology you're using in the back end you could use Chango Express or you could simply use a Firebase database in your backend and you could still use react on the front end so it's highly compatible with any kind of other Technologies which you have or any Tech stack which you could imagine of not just the back end react is flexible in the front end too what I mean by that is you do not have to use react for your entire front end of your application you could insert go ahead and only develop some parts of your application using react and use any other library or framework for the other parts another best thing about react is that you could jump into mobile application development using react native so once you have learned react react native is a lot similar to react and it's a platform which allows you to build mobile applications for Android and iOS Now using react native you just have to write code once which would be later transpiled into Android app and an IOS app this means you do not have to learn languages like Java kotlin or Swift which are required for Native application development instead you could simply use your react skills to build a native mobile applications so these were some of the common reasons why exactly you should learn react I hope these reasons are inspiring enough to motivate you to learn react all right so once we know what exactly is react why it is used and why you should learn it let's now dive a little bit into react and let's learn what exactly react is and let's specifically learn about the component based nature of react so react is component based and what do we mean by that so a component is nothing but it's a smallest building block of a react application and a react app is nothing but a combination of multiple such components combined together so in order to understand this consider an example of an Instagram post so if you take a look at the Instagram post it has the picture it has the like button it has the share button and it also has some space for commenting as well so in that particular Instagram post the images one component the like button is one component the share button is another component so on and so forth and all these components come together to form a single post so react is based on the similar principle that is you create multiple small components and combine them together to form the user interface of your application now another best thing about react is that these components which you create and react they are highly reusable that means you could create a component once and you could use that component multiple number of times in same application or you could even share those components across multiple projects you're working on so this component based nature of react also makes it quite favorable to develop front ends using react so now that we understand what react is in the next lecture let's go ahead and let's learn how to set up the development environment and let's start building our very first react app so thank you very much for watching and I'll see you guys in the next one thank you