React Concepts

[00:00 - 00:09] In the last lesson we saw why React has become the most popular web framework. In this lesson, let's study all the concepts which may react what it is right now.

[00:10 - 00:22] Since this course assumes you have some prior React knowledge, but just to make sure we all are on the same page, let's discuss the React core concepts. Let's talk about why React is so fast.

[00:23 - 00:37] Actually, React uses Virtual DOM to enhance its performance, which is nothing but the replica of the real DOM in the form of a JavaScript object. It uses the observable to detect state and prop changes.

[00:38 - 00:50] React uses an efficient diff algorithm to compare the versions of Virtual DOM. It then makes sure that patched updates are sent to the real DOM for re-render ing of the UI.

[00:51 - 01:03] It prevents us from changing the real DOM every time some event occurs, which saves a lot of memory and makes React so much faster. Another important React concept is the JSX.

[01:04 - 01:09] It is a syntax extension to JavaScript. JSX is also very easy to read.

[01:10 - 01:22] Most importantly, by using JSX, you can write HTML code in JavaScript. Then Babel, which is a JavaScript compiler, transforms these expressions into actual JavaScript code.

[01:23 - 01:36] There are some differences to HTML, such as to give it a class, JSX uses class name instead of class. You can also use inline tag styling by using a curly bracket and using it inside an object.

[01:37 - 01:42] We are going to use JSX the whole time. So let's discuss another important React concept.

[01:43 - 01:48] We can't talk about React without talking about components. They are building blocks of React applications.

[01:49 - 01:55] Don't be confused. They are just usual React functions and classes, which return the JSX.

[01:56 - 02:02] They are so popular because they are reusable and also easier to maintain. Let's suppose we have two pages.

[02:03 - 02:08] And each page has a unique header and a footer. But the form is same.

[02:09 - 02:27] Rather than creating two different forms, we can create a single component and use it in both the pages. By doing so, you have to write less code and also it's easier to maintain because changes can be made to the form component, rather than changing code in two pages.

[02:28 - 02:31] Now let's talk about state in React. What makes React so popular?

[02:32 - 02:41] It is the state. State is a JavaScript object that stores a component's dynamic data and determines the component's behavior.

[02:42 - 02:56] Because state is dynamic, it enables a component to keep track of changing information in between renders and for it to be dynamic and interactive. State makes React declarative rather than imperative.

[02:57 - 03:11] Declarative approach allows you to control the flow and state in your application by saying it should look like this. An imperative style turns it around and allows you to control your application by saying this is what you should do.

[03:12 - 03:27] The benefit of declarative is that you don't get bogged down in the implementation details of representing the state. You're delegating the organizational component of keeping your application views consistent so you just have to worry about the state.

[03:28 - 03:35] Imagine you have a butler, which is kind of a metaphor for a framework. And you would like to make him dinner.

[03:36 - 03:42] In an imperative world, you would tell him to step by step how to make dinner. You have to provide these instructions.

[03:43 - 03:52] Go to the market, buy some vegetables, come home and cook them. In declarative approach, you just have to say cook vegetables.

[03:53 - 03:59] Easy, right? Another important aspect of React are the props.

[04:00 - 04:15] Props stands for properties and is used for passing data from one component to another. Props data is read only, which means that data coming from the parent should not be changed by child components.

[04:16 - 04:32] For example, in this code sample, a parent component is using the child component and is using the name property Joseph. This name will be passed to the child component as props, and the child component can use it as props.name.

[04:33 - 04:39] Props can only be passed from parent component to the child component. And not the other way round.

[04:40 - 04:52] If you want to pass the property to, let's say, a grandchild component, which means a component that's only used in the child component. It has to be passed from child component to the grandchild component.

[04:53 - 04:59] And this is called unidirectional data flow. We are going to learn more about props in the future lessons, so don't worry about it.

[05:00 - 05:11] So these were the building blocks of React and must know React concepts. There is a lot more to master React, but just for the foundation, they will work just fine.

[05:12 - 05:19] This lesson is not intended to go through all the React concepts. It's just a refresher for the main core concepts.

[05:20 - 05:22] We have a lot more to catch up in the following lessons.