10 Main Core Concept You Need to Know About React

1. Why we Should Learn React Js

reactjs blog features image

ReactJS presents graceful solutions to some of the front-end programming’s most persistent issues. It’s fast, scalable, flexible, powerful, and has a robust developer community that’s rapidly growing. There’s never been a better time to learn React.

You’ll develop a strong understanding of React’s most essential concepts: JSX, class and function components, props, state, lifecycle methods, and hooks. You’ll be able to combine these ideas in React’s modular programming style.

I’ve been using React for over a year now. I’m also conducting training to help people learn it from scratch. I noticed that in every training session I’m explaining the same set of concepts over and over. I think those concepts are essential if you want to “speak React”. If you are in the middle of learning it right now, you might be interested in reading this post.

It’s not a framework

Angular or Ember are frameworks where some decisions are already made for you. React is just a library and you need to make all decisions by yourself. It focuses on helping you to build user interfaces using components.

2. Expressions in JSX

You can include a JavaScript expression using a pair of curly brackets anywhere within JSX:

Nested JSX elements:

For the code to compile, a JSX expression must have exactly one outermost element.

SX is a syntax extension of JavaScript. It’s used to create DOM elements that are then rendered in the React DOM.

A JavaScript file containing JSX will have to be compiled before it reaches a web browser. The code block shows some example JavaScript code that will need to be compiled.

3. React Virtual DOM

If you are using React or learning React, you must have heard of the term “Virtual DOM”. Now what is a Virtual DOM, and why does React use it?

Virtual DOM

That’s where the concept of virtual DOM comes in and performs significantly better than the real DOM. The virtual DOM is only a virtual representation of the DOM. Every time the state of our application changes, the virtual DOM gets updated instead of the real DOM.

Well, you may ask ” Isn’t the virtual DOM doing the same thing as the real DOM, this sounds like double work? How can this be faster than just updating the real DOM?”

The answer is virtual DOM is much faster and more efficient, here is why.

How is Virtual DOM faster?

When new elements are added to the UI, a virtual DOM, which is represented as a tree is created. Each element is a node on this tree. If the state of any of these elements changes, a new virtual DOM tree is created. This tree is then compared or “diffed” with the previous virtual DOM tree.

Once this is done, the virtual DOM calculates the best possible method to make these changes to the real DOM. This ensures that there are minimal operations on the real DOM. Hence, reducing the performance cost of updating the real DOM.

4. How does React use Virtual DOM

Now that you have a fair understanding of what a Virtual DOM is, and how it can help with the performance of your app, let’s look into how React leverages the virtual DOM.

In React every UI piece is a component, and each component has a state. React follows the observable pattern and listens for state changes. When the state of a component changes, React updates the virtual DOM tree. Once the virtual DOM has been updated, React then compares the current version of the virtual DOM with the previous version of the virtual DOM. This process is called “diffing”.

Once React knows which virtual DOM objects have changed, then React updates only those objects, in the real DOM. This makes the performance far better when compared to manipulating the real DOM directly. This makes React stand as a high-performance JavaScript library.

In simple words, you tell React what state you want the UI to be in, and it makes sure that the DOM matches that state. The great benefit here is that as a developer, you would not need to know how the attribute manipulation, event handling, or manual DOM updates happen behind the scenes.

5. Props in JSX

There are several different ways to specify props in JSX.

JavaScript Expressions as Props

For MyComponent, the value of props.foo will be 10 because the expression 1 + 2 + 3 + 4 gets evaluated.

You can learn more about conditional rendering and loops in the corresponding sections.

Props Default to “True”

In general, we don’t recommend not passing a value for a prop, because it can be confused with the ES6 object shorthand {foo} which is short for {foo: foo} rather than {foo: true}. This behavior is just there so that it matches the behavior of HTML.

6. ReactJS — Components

In this chapter, we will learn how to combine components to make the app easier to maintain. This approach allows you to update and change your components without affecting the rest of the page.

Stateless Example

Our first component in the following example is the App. This component is the owner of the Header and Content. We are creating Header and Content separately and just adding it inside the JSX tree in our App component. Only the App component needs to be exported.

7. Props And PropTypes In React

Props and PropTypes are important mechanism for passing information between React components, and we’re going to look into them in great detail here. This tutorial will introduce you to the details about props, passing and accessing props, and passing information to any component using props. However, it’s always a good practice to validate the data we are getting through props by using PropTypes. So, you will also learn how to integrate PropTypes in React.

Understanding Props :

React allows us to pass information to components using things called props (short for properties). Because React comprises several components, props make it possible to share the same data across the components that need them. It makes use of one-directional data flow (parent-to-child components). However, with a callback function, it’s possible to pass props back from a child to a parent component.

In this snippet, we are passing a prop named posts to a component named PostList. This prop has a value of {postsList}. Let’s break down how to access and pass data.

8. Optimizing Performance In React Apps

Since React was introduced, it has transformed the way front-end developers build web applications, and its virtual DOM is famous for effectively rendering components. In this tutorial, we will discuss various methods of optimizing performance in React applications, and also the features of React that we can use to improve performance.

During the initial rendering process, React builds a DOM tree of components. So, when data changes in the DOM tree, we want to React to re-render only those components that were affected by the change, skipping the other components in the tree that were not affected.

However, React could end up re-rendering all components in the DOM tree, even though not all are affected. This will result in longer loading time, wasted time, and even wasted CPU resources. We need to prevent this from happening. So, this is where we will focus our optimization effort.

9. State in React

Until now, we discussed only static components with static data passed down the components tree. Often, it’s needed to create a stateful component where the state is changing over time.

In the beginning, you set the default state of the component. In this case, we want to have an empty text value. To do that you use a component method getInitialState() that has to return the state object for the component.

To update the state an event handler changeText() is assigned to the onChange event. To update the state React expects you to use the built-in setState() method.

The state update will be scheduled and the component will re-render when it’s done. setState() the call needs to be used to inform React about pending state changes so it can apply the changes. There are no loops of any kind that track if something has changed.

You need to remember that setState() is asynchronous. The results are not immediate. The examples below show both bad and good ways to access the state immediately after the change is applied.

10. React Hooks

→ React Hooks :

Hooks are the new feature introduced in the React 16.8 version. It allows you to use state and other React features without writing a class. Hooks are the functions that “hook into” React state and lifecycle features from function components. It does not work inside classes.

Hooks are backward-compatible, which means it does not contain any breaking changes. Also, it does not replace your knowledge of React concepts.

→ When to use a Hooks :

If you write a function component, and then you want to add some state to it, previously you do this by converting it to a class. But, now you can do it by using a Hook inside the existing function component.

→ Rules of Hooks :

Hooks are similar to JavaScript functions, but you need to follow these two rules when using them. The hooks rule ensures that all the stateful logic in a component is visible in its source code. These rules are:

→ Only call Hooks at the top level :

Do not call Hooks inside loops, conditions, or nested functions. Hooks should always be used at the top level of the React functions. This rule ensures that Hooks are called in the same order each time a component renders.

© Copyright 2024 - Beact Infotech. All Rights Reserved