Fundamentals of React.js

Before we start, please note that this is often a beginner-friendly guide that covers the ideas I classify as fundamentals for operating with React. It’s not an entire guide to React however rather an entire introduction.
React is a JavaScript “library”. It’s not specifically a “framework”. It’s not a whole answer and you’ll usually have to be compelled to use a lot of libraries with React to create any answer. React doesn’t assume something concerning the opposite components in any answer.

React.createElement

Instead of working with strings to represent DOM elements (as in the native DOM example above), we use the React.createElement method to represent DOM elements with objects. React elements are the name for these objects.
There are several arguments to the React.createElement function:

The first argument is the HTML “tag” to represent the DOM feature, which in this case is div.
-The second argument specifies any attributes that we want the DOM entity to have (such as id, href, title, and so on). We used null because the basic div we’re using has no attributes.

Nesting React elements

We have two nodes: one is managed directly by the DOM API and the other is controlled by the React API (which in turn uses the DOM API).The only significant difference between the HTML and React versions of these nodes in the browser is that the HTML version uses a string to represent the DOM tree, while the React version uses pure JavaScript calls and represents the DOM tree with an object rather than a string.

React is all about components

We define UIs in React by using reusable, composable, and stateful components.
We describe small components before combining them to form larger ones. All elements, no matter how small or large, are reusable through projects.
Components may be thought of as basic functions (in any programming language). With some data, we call functions, and they return some output.

Creating components using functions

In its most basic form, a React component is a simple JavaScript function:

function Button (props) {
// Returns a DOM/React element here. For example:
return <button type=”submit”>{props.label}</button>;
}
Take note of how I wrote what appears to be HTML in the Button function’s returned output. This isn’t HTML or JavaScript, and it’s certainly not React. JSX is the name of the programming language. It’s a JavaScript extension that lets us write function calls in HTML-like syntax.

JSX is not HTML

Browsers do not understand JSX. If you try to use a standard browser console to run the Button feature, it will complain about the first character in the JSX component.

This is how you would use Respond (without JSX). The Button feature can be used directly in a browser (after loading the React library), and everything will work perfectly. However, rather than dealing with function calls, we prefer to see and work with HTML. When was the last time you created a website without using HTML and just JavaScript? If you want to, you can, but no one does. That is why JSX was created.

The name has to start with a capital letter

It’s worth noting how I called the part “Button.” Since we’ll be working with a combination of HTML and React components, the first letter must be capitalized. All names that begin with a lowercase letter are considered names of HTML elements by a JSX compiler (such as Babel).

The first argument is an object of “props”

You don’t have to call the object keeping the list of attributes “props” when using a function component, but it is the usual practice. When we use class components, as we will do later, the same set of attributes is provided with a special instance property called props.

Creating components using classes

React also allows you to build components using the JavaScript class syntax. Here’s an example of the same Button component written in class syntax:

class Button extends React.Component {
render() {
return (
<button>{this.props.label}</button>
);
}
}
You describe a class that extends React. Component, one of the key classes in the React top-level API, with this syntax. At the very least, a class-based React component must define a render instance method. The element that represents the output of an object instantiated from the component is returned by this rendering process.

Functions vs classes

In React, components created with functions were previously limited. The class syntax was the only way to make a component “stateful.” Beginning with React version 16.8, which was released in early 2019, this has changed with the introduction of “React Hooks.” A new API for making a function component stateful was introduced with the React hooks update (and give it many other features).
Although class-based components will remain in React for the near future, as a newcomer to the ecosystem, I believe it is best to begin with only functions (and hooks) and concentrate on learning the new API (unless you have to work with a codebase that already uses classes).

Benefits of components

When things get more complicated, decoding HTML becomes more difficult, but components help us quickly understand what a UI represents in a language we’re familiar with.