React.js: Introduction to React.js

Transcript of the free preview lesson. Remaining lessons unlock with the full course.

Hello, my name is Tony and in. These lessons you will learn why choose React over plain JavaScript in HTML and create a new React app using Create React app utility. In this lesson we will take a look at what React really is and how it came to be. React is a JavaScript library. It is open source, meaning it's source. Code can be accessed and viewed by anyone. And it was created by Facebook with. The intention of unifying web as well. As mobile user interface design under one common umbrella. It has actually been around for quite a while with the first version of. React being introduced to the public as. Far back as 2013. However, since about 2018 it has grown leaps and bounds leading to other advanced frameworks such as NextJS actually using React as a base and building on top. Of its already oppressive and comprehensive capabilities. React is mostly used for dynamic applications. Meaning their content changes as the data. Behind the interface changes. Now with standard old school website that. Was not the case. So every time a user would go. To a new URL associated with an. Application, a new Http request would have to be issued and all of the contents that comprise the page. So every single graphic, everything for the overhead menu, the sidebar, the footer would. Have to be reotained from scratch and rerendered time and time again. If you can imagine, this is not. Very efficient and React solves that problem. Through the use of partial rendering and data hydration. What that means is once our template is loaded in the browser, only the. Data that varies from the state currently displayed is updated. Unlike old school site that relied on. The old school client server model. What that means that the only parts. That change in the user's screen are the ones that differ from the currently displayed state. As such, navigating from page to page no longer causes a full rerender of every single thing a user sees. This leads to a much more efficient data throughput strategy as less data needs to be transmitted from the server to the client. Additionally, another feature utilized by React to achieve a performance boost is the use of Shadow Dom. By now you are very likely familiar. With our standard Dom, but just to. Make sure that we are all on. The same page, dom is an acronym. Which stands for Document Object Module. When our web page, otherwise referred to as a document is loaded into the browser, its content gets parsed and all of the information about the object, its. Structure as well as all of its comprising parts are loaded into the memory. Of the client or the browser. But unfortunately for us, along with everything that pertains to our application, other things end up on there as well and. They pertain to the core functionality of the browser. This is not very helpful for us. And this is where Shadow Dom comes in shadow Dom is a subset of regular Dom, and its main advantage is. That the only information it keeps is the information that pertains to our application and absolutely nothing else. Having less stuff in our shadow Dom. Than Dom is of course beneficial. And having all of it applied to our application only means that we can. Store, extract and manipulate only the parts that we need. This leads to a significant performance boost. React is component based, meaning that to. Achieve the results that we are after, we will break up our application into a series of components to encapsulate each visual part of the user interface. That gives us the ability to reuse. Our component throughout the site, speeding up our development efforts. And additionally, it leads to uniformity in. The application, thus enabling a smoother, less confusing and more comprehensive user experience, since. Components used for similar things will be used in a similar manner throughout the application. Lastly, for those who may be familiar with other JavaScript frameworks, react provides a one way data binding. What that means is the data within. Our application flows in one direction, in one direction only, from the top parent. To the bottom child component. In our next lesson, we will take a look at why we would use React over plain JavaScript in HTML. Thank you for watching. Bye.