React JS Chapter 1 – Understanding React, JSX, and Components

React JS Chapter 1 – Understanding React, JSX, and Components

On January 1, 2022, Posted by , In React JS, By , , With Comments Off on React JS Chapter 1 – Understanding React, JSX, and Components
React JS Chapter 1 – Understanding React, JSX, and Components

What is React.js?

React.js is a frontend open-source JavaScript library created by Facebook in 2013. It is used to build interactive and dynamic user interfaces and components. 

Unlike other front-end frameworks that focus on MVC or MVVM, React.js is concerned only with the view part of the application. It introduced a new architecture for the JavaScript ecosystem that is known as Flux. 

The Flux architecture solved many problems. It introduced unidirectional data binding and solved the problem of uncontrolled mutation by introducing “dispatch to store” to manipulate a component’s state. 

Another important concept introduced in React was virtual DOM. Most of the JavaScript frameworks work directly with the DOM. This affects the performance of the application. But React has a virtual DOM that is a lightweight copy of the real DOM. 

For example, if there is a list of ten items and one of them is updated, the real DOM will update the entire list. This affects the performance. But in React, first, the virtual DOM is updated. Before the update, React had made a snapshot of the previous version of DOM. So, after the update is made, React compares the updated virtual DOM with the snapshot. Now React knows the exact change. So it updates only and only that part in the real DOM thus boosting the performance. 

Today, React is one of the most popular front-end web technologies. According to Stack Overflow’s developer’s survey, React.js is the most popular web framework.

The performance due to the virtual DOM is one reason for React’s popularity. Another reason is the use of JSX in React which makes it extremely developer-friendly. 

Understanding JSX

React is often considered developer-friendly and the major reason for it is JSX. JavaScript XML, commonly known as JSX is an extension for JavaScript that allows developers to write HTML with JavaScript. 

With JSX, there is no need to write logic and template in separate files. Observe the following code. 

let name = "Tom";
let heading = <h1> Hi, my name is {name} </h1>

In the first line, a variable named “name” is declared and a string value is assigned to it. This is plain JavaScript. But in the next line, another variable named “heading” is declared. Observe its value.

<h1> Hi, my name is {name} </h1>

It’s an HTML <h1> tag. In plain JavaScript, assigning such a value is not possible, right? This is what JSX is for. 

Another important point is that the variable declared earlier (name) is used in the heading.

Hi, my name is {name}

So the string it will create is “Hi, my name is Tom” because the value of “name” is “Tom”. 

JSX can be written inside the if statements or loops. It can be used inside a function and returned from it too.

let name = "Tom";
function createHeading(name) {
let heading;
if (name == "Tom") {
heading = <h1>Hi, my name is {name}</h1>;
} else {
heading = <h1>No, my name is not {name}</h1>;
}
return heading;
}
let heading = createHeading(name);

In the above code, “name” is declared with a value assigned to it. Then, a function named “createHeading” is created. This function accepts “name” as an argument and it returns a <h1> element according to the if statement. In the end, the “createHeading” is called. Doesn’t it look like plain JavaScript code but with a mixture of HTML? 

Components

Components are building blocks of a React application. In React, the UI is split into several smaller parts known as components. 

Generally, a React application is made up of several components. Basically, a component is React is like a function. It accepts a value, known as “props”, and returns a UI element that is rendered on the screen. 

The three major parts of a React component are props, state, and a returning UI element. We will discuss props and state in the next chapter. Let’s focus on components in this chapter. 

There are two types of components in React.

  • class components
  • functional components

Class components

A class component is created by using ES6 class syntax and extending it to React.Component.

class ClassComponent extends React.Component{
}

A class component has a mandatory function named “render”.

class ClassComponent extends React.Component{
render(){
return <h1>Hello World!</h1>
}
}

The “render” function is required because it returns the UI element.

An important point to notice here is that the returning elements should be wrapped in a single element. For example, the following code won’t work.

render(){
return (
<h1>Hello World!</h1>
<h2>I am from London!</h2>
)
}

To make this work, wrap the elements in a <div> tag or React.Fragments.

render() {
return (
<React.Fragment>
<h1>Hello World!</h1>
<h2>I am from London!</h2>
</React.Fragment>
);
}

Another important part of a class component is the constructor. It is not mandatory to use a constructor in a class component but as the constructor is invoked first, it is used for initializing state and binding event handlers.

Functional components

As the name suggests, the functional components are created using plain JavaScript functions.

function FunctionalComponent(){
return(
<h1>Hello World!</h1>
)
}

Like the “render” method of the class components, the return statement in a functional component returns the UI. 

Similarly, multiple elements should be wrapped in a single element while returning from a functional component as well. The equivalent of React.Fragment in the functional component is <> tag.

return (
<>
<h1>Hello World!</h1>
<h2>I am from London!</h2>
</>
);

Class components vs Functional components

Of course, there are several differences between class and functional components. Let’s discuss these differences.

⇒ State

The major difference is that class components are stateful while functional components are stateless. The methods such as “setState” are only supported by class components. But with the recent introduction of React hooks, the state is also available in functional components.

⇒ Lifecycle methods

Lifecycle methods are a very useful concept that is only available in the class components. They are not available in functional components but with the useEffect hook, similar functionalities of some lifecycle methods can be achieved in functional components. 

Note: We will discuss lifecycle methods in a later chapter.

⇒ Props

In class components, props are directly available but in the functional components, the props have to be passed explicitly as arguments. 

Summary

  • React.js is a JavaScript library used to build UI and components.
  • Virtual DOM is used behind the scenes for better performance.
  • JSX is an extension of JavaScript that is used in React.
  • Components are the building blocks of a React application.
  • There are two types of components – class and functional.

What next?

Now we understand what React.js is and how JSX is used to write components. So, in the next chapter, we will discuss how to create a React application using React cli. Further, we will discuss state and props. 

Comments are closed.