React.js: Introduction to React.js

Name: React.js: Introduction to React.js
Author: Tony Davydets

Learn the origins of React and take first steps

Preview the first lesson free — get full access to all 1 lessons.

Course: On-Demand

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.

Provider : Tony Davydets 1 Lesson · 11m in Arabic, German, English, Spanish, French, Portuguese, Chinese

Course Description

In this course, you'll learn what React is and why it's a powerful tool for building user interfaces. You'll explore the advantages of using React over plain JavaScript and discover how to set up a React development environment using the create-react-app utility.

One of the key advantages of using React is its ability to manage complex state and user interactions with ease. With React, you can create reusable components that can be easily updated and modified, making it ideal for building large and complex web applications. You'll explore the key differences between React and plain JavaScript, including the benefits of using a component-based approach to building user interfaces. Additionally, you'll learn about the React Virtual DOM and how it optimizes performance by minimizing the number of updates required to render changes.

To get started with React, you'll discover how to use the create-react-app utility to quickly and easily set up a new React project. You'll learn how to install and configure the utility and use it to create a basic React application.

By the end of this section, you'll have a solid understanding of what React is, why it's such a popular tool for web development, and how to create your own React applications using the create-react-app utility. This knowledge will form a strong foundation for the rest of the course, as you explore more advanced React topics and build increasingly complex applications.

What You'll Learn

Understand what React is and why it is a powerful tool for building user interfaces
Compare React with plain JavaScript and the benefits of a component-based approach
Explain how the React Virtual DOM optimizes performance by minimizing render updates
Set up a React development environment using the create-react-app utility
Create a basic React application with create-react-app
Identify when to use React and why React came about

Key Takeaways

React is a tool for building user interfaces and offers advantages over plain JavaScript.
React lets you create reusable components that can be easily updated and modified, making it suitable for large and complex web applications.
The React Virtual DOM optimizes performance by minimizing the number of updates required to render changes.
The create-react-app utility lets you quickly and easily set up and configure a new React project.
This introduction forms a foundation for exploring more advanced React topics and building increasingly complex applications.

Frequently Asked Questions

What will I learn in this course?

You'll learn what React is and why it's powerful for building user interfaces, the advantages of React over plain JavaScript, the component-based approach, the React Virtual DOM, and how to set up a React environment using the create-react-app utility.

Do I need prior experience with JavaScript?

The course explores the key differences between React and plain JavaScript and the benefits of using React over plain JavaScript, so it is presented in relation to JavaScript-based web development.

What topics do the lessons cover?

The lessons cover What Is React?, Why React and Not JavaScript?, and Creating a React App Using the create-react-app utility.

What will I be able to do by the end?

By the end you'll have a solid understanding of what React is, why it's a popular tool for web development, and how to create your own React applications using the create-react-app utility.

Is this course for beginners to React?

Yes. It is an introduction that covers why React came about, when to use React, and the create-react-app utility, forming a foundation for more advanced React topics.