Why do developers need React when you have JavaScript?

Websites based on pure JavaScript have long been a rarity: usually libraries and frameworks are used for development. One of the most popular libraries is React. In this article, we will get acquainted with its basic principles and ideas. We are going to tell you what React is, what its advantages are in comparison with other tools and how to work with React-components.

Why do we need React frameworks and libraries?

Modern websites are different from the ones we used to use: they are more dynamic. You can use them to buy products, communicate with friends, or write comments.

The structure of websites has also changed. Originally, they were a collection of separate HTML pages. Now they are a single HTML-document, the appearance of which changes dynamically via JavaScript.

This approach is called SPA – single-page application, or single-page application. SPA makes sites full-fledged applications that do not reload between page transitions. To make the transition, you need to completely redraw the content of the document using JavaScript and received data.

Although the requirements for interactivity of sites have increased, the tools to create it have not changed much. The DOM is still imperative, out-of-the-box, and looks something like this:

<h1>Hello, World!!! My name is <b class="js-name"></b>.</h1>
function setName(name) { 
     const nameWrapper = document.querySelector(".js-name");
     if (nameWrapper) { nameWrapper.textContent = name; 
     } 
} 
setName("Mark");

This code might seem good if you want to add a username to the welcome bar or create a slider.

What is React?

React is a declarative JavaScript library for creating user interfaces. It allows you to assemble a complex UI from small isolated pieces of code called “components”.

React provides two syntaxes for creating components: class-based and functional. The class syntax is rarely used because the class syntax is often superfluous for describing components. Therefore, in this article we’ll look at functional components.

A functional component in React is a JavaScript function that inputs an object with data to render a component – called props – and outputs a description of the interface to be rendered.

An example of a React user greeting might look like this:

import React from "react";

function HelloWorld (props) {

return (<h1>Hello, World!!! My name is <b>{props.name}</b></h1>);

}

export default HelloWorld;

Happy

0 0 %

Sad

0 0 %

Excited

0 0 %

Sleepy

0 0 %

Angry

0 0 %

Surprise

0 0 %