Introduction to React.js

What is React?

React is a free and open-source front-end JavaScript library. It is used for building user interfaces based on UI components.

Why React?

Easy development of dynamic web applications: React makes it easier to create dynamic web applications by requiring less coding and providing more functionality, as opposed to JavaScript, which can quickly become difficult.

Reusable components: Components are the fundamental building pieces of every React application, and most apps have numerous components. These components have their own logic and controls, and they may be reused across the program, reducing the development time significantly.

Improved performance: React uses Virtual DOM to speed up the development of web apps. Instead of updating all of the components again, as traditional web applications do, Virtual DOM examines the components’ prior states and updates only the objects in the Real DOM that have changed.

Dedicated tools for easy debugging: A Chrome extension for debugging React applications has been released by Facebook. This makes debugging React web applications quicker and easier.

Unidirectional data flow: The data flow in React is unidirectional. As a result, developers frequently nest child components within parent components when creating React apps. Because data flows in a single path, debugging faults and determining where a problem arises in an application at any given time becomes easier.

Features of React

JSX

JSX is a JavaScript XML used in React applications. JSX is not required in React apps, it improves the readability, reliability, and flexibility of your code. JSX is a JavaScript extension.

To generate elements and components, JSX uses HTML syntax. It’s similar to a templating syntax. The tag name, attributes, and children are all present. JSX converts the code to pure JavaScript, which the browser can understand.

const name = 'Monica';
const element = <h1>Hi, {name}</h1>;

The above code demonstrates how React uses JSX. It’s neither a string nor an HTML document. Instead, HTML is embedded in JavaScript code.

Virtual Document Object Model (DOM)

The Document Object Model (DOM) considers an XML or HTML content as a tree structure, with each node representing a different part of the document.

The Virtual DOM is React’s a lightweight version of the Real DOM. Virtual DOM manipulation is much faster than real DOM manipulation. When the state of an object changes, Virtual DOM just updates that object in the real DOM, not all of them.

What is the relationship between Virtual DOM and Real DOM?
VDOM is updated when the state of an object in a React application changes. After that, it compares its previous state and updates only those objects in the real DOM, rather than all of them. This allows things to move quickly, especially when compared to other front-end technologies, which must update each item even if just one object in the web application changes.

Props in React

In React, props stand for Properties. Props, or properties, are a way for users to give arguments or data to components. These props add movement to the components. A component’s properties are read-only and cannot be altered.

Components in React

Components allow you to break down the user interface into separate, reusable parts and think about each one separately.

Function and Class Components

The simplest way to define a component is to write a JavaScript function.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Because it accepts a single “props” (properties) object argument with data and produces a React element, the above function is a legitimate React component. Because these components are essentially JavaScript functions, we term them “function components.”

You can also use an ES6 class to define a component:

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

React Hooks

Hooks are a new feature that was introduced in React 16.8. You can use state and other React capabilities without having to write a class. Hooks are functions that “hook into” React state and lifecycle aspects from component functions. It is ineffective in classrooms.
Hooks are backward-compatible, which means they don’t provide any new features. It also doesn’t take the place of your understanding of React ideas.

When to use Hooks

If you create a functional component and later wish to add any state to it, you must first convert it to a class. However, you can now do so by incorporating a Hook into an existing function component.