What is React.js and why it is used for? With Code Example

What is React.js?

Popular JavaScript UI toolkit React.js is maintained by Facebook and a global developer community. Its popularity among small businesses, Facebook, Instagram, Netflix, and Yahoo proves its appeal. React.js, optimised for view layer management, is the “V” in an MVC design. The library’s guiding principles which emphasise declarative coding, efficiency, and flexibility while minimising the amount of React-specific expertise needed are what make it so popular. It also builds on preexisting web development skills. Most of the code you write will be JavaScript mixed with conventional HTML, even though HTML is technically a markup language called JSX.

This eliminates the need for you to learn about intricate patterns, templates, or controllers. This method gives developers transferable abilities while enhancing their understanding of web standards and JavaScript, enabling them to create top-notch applications. Developers may design massive online applications with React.js that can dynamically alter data without requiring a page reload, providing a quick user experience.

It is essential to comprehend the core ideas of React.js in order to comprehend it:

Components: Elements Any React application’s basic building elements are called components. They are separate, reusable components of functionality that contain the UI itself as well as the display logic. Complex user interfaces can be created from simpler elements by nesting the various components that make up React apps. React-extending JavaScript classes.Use component or simple JavaScript functions to define components. React development emphasises “thinking in components,” or viewing your software as modular parts that can be constructed and disassembled.

JSX (JavaScript XML): JavaScript XML JSX is an HTML-like JavaScript syntax extension. Because React uses JavaScript to describe the user experience, developers can write HTML components directly in JavaScript. Even while React doesn’t require JSX, it is strongly advised because it makes building React components lot simpler to read and comprehend.

JSX elements are parsed and transformed to React.createElement calls before DOM access. Babel converts JSX and ES6+ to browser-readable JavaScript.

Key syntactic rules for JSX include:

• For JSX expressions with multiple adjacent components, use a top-level element like a <div> or React Fragment <></>.
• To avoid clashing with reserved JavaScript terminology, JSX converts HTML properties to camelCase: for becomes htmlFor, and class becomes className.
• Curly braces {} allow JavaScript expressions to be directly embedded within JSX.
• JSX comments also need to be enclosed in curly braces {/* This is a comment */}.

Virtual DOM: DOM virtualisation A virtual document object model, or DOM, is an in-memory replica of the real web page’s DOM that is used by React.js. Performance is greatly enhanced by this method because React just updates the specific DOM elements that have changed, as opposed to reloading the full DOM tree each time an update occurs. React “reacts” swiftly to state changes by processing modifications in the Virtual DOM efficiently and making only minor adjustments to the browser’s actual DOM.

One-way Data Flow / Unidirectional Data Flow: Data flow that is unidirectional or one way Since React requires a unidirectional data flow, most data flows in a single direction. By simplifying application logic, this design strategy seeks to make it simpler to comprehend and maintain.

Props (Properties): Props transport data between parent and child components. Child components cannot change props sent by their parents because props are read-only.

State: The ability of components to keep their internal state reflects dynamic properties that change over time. React automatically re-renders components with new data. One method the state is updated is this.class components with setState() or functional components with Hooks (useState, useReducer).

Context API:This React feature allows you to share state amongst numerous components without manually passing props down through each level of the component tree.

Toolchain:The toolchain Typically, creating React apps requires the following tools:

Node.js and npm: An essential platform for many development tools, Node.js is an JavaScript runtime environment that enables developers to run JavaScript code outside of a web browser. It is also frequently required in order to set up a React development environment. Notably, Node.js and npm (Node Package Manager), the largest software registry in the world, are installed together to enable React applications to render on the server. The website, the command-line interface, and the registry are its three primary parts.

Create React App (CRA): A popular command-line utility for setting up a React development environment with little setup. A development server with hot module reloading, easy linting, a testing framework, and pre-configured Webpack for bundling and Babel for transpilation are included.

Webpack: Webpack is a robust module bundler that is frequently used in contemporary JavaScript programming, particularly when working with React apps. Its main goal is to condense all of the code and dependencies for your application into one or a small number of web browser-friendly JavaScript files. Webpack is a complete build tool that can bundle different assets including CSS, fonts, and pictures in addition to JavaScript.

React Developer Tools: React Developer Tools lets you uncover performance bottlenecks in component tree props, state, and context. Chrome and Firefox extensions are available.

Code Example:

A simple React component rendered into the DOM using JSX is shown in this “Hello, World!” example.

import React, { useState } from "react";

function App() {
  const [name, setName] = useState("");

  return (
    <div>
      <h1>Hello, {name || "World"}!</h1>
      <input
        type="text"
        placeholder="Enter your name"
        onChange={(e) => setName(e.target.value)}
      />
    </div>
  );
}

export default App;

Output:

Hello, World!

Enter your name

In this example:

React and ReactDOM Libraries: The CDN react.development contains the React and ReactDOM libraries.The main React code and react-dom.development are contained under js.Interacting with the browser’s DOM is the responsibility of JavaScript.

Babel: The <script> element’s babel.min.js script and type=”text/babel” tag instruct the browser to transform JSX code to JavaScript using Babel.

HelloWorld Component: A simple functional component, HelloWorld, generates a single <h1> JSX element.

ReactDOM.render(): The HTML page’s div with id=”root” receives the React element (our HelloWorld component) via ReactDOM.render(). This entry point connects your React app to the web.

This arrangement shows how JSX combines HTML-like syntax with JavaScript to build UI components and how React presents them to the browser.

Conclusion

For creating dynamic and responsive user interfaces, especially for single-page applications, Facebook created the popular JavaScript package React.js. The reason for its appeal is because its component-based architecture enables developers to create reusable and modular user interface elements. One of React’s most notable features is JSX, a syntactic extension that enables programmers to write HTML-like code inside JavaScript, which facilitates reading and maintaining code.

Instead of reloading the entire page, React employs a Virtual DOM to enhance performance by just updating the UI elements that have changed. Its one-way data flow makes it easier to manage and track the state of the program, which improves predictability and debugging. React also works well with contemporary development tools like Webpack, Babel, and Create React App, providing a seamless setup and effective development process. In general, React.js enables programmers to use well-known JavaScript and web standards to construct web apps that are quick, scalable, and maintainable.