React.js Introduction and Working

ReactJS is an open-source JavaScript library that is used for building user interfaces in a declarative and efficient way. It is a component-based front-end library responsible only for the view layer of an MVC (Model View Controller) architecture. React is used to create modular user interfaces and it promotes the development of reusable UI components that display dynamic data.

ReactJS uses a declarative paradigm which makes it possible for applications to be both effective and flexible. It creates simple views for each state in your application and efficiently updates and renders just the right component when your data changes. The declarative view makes your code more predictable and easier to debug. Each component in a React application is responsible for rendering a separate, reusable piece of HTML code. The ability to nest components within other components allows for the building of complex applications from simple building blocks. A component may also keep track of its internal state, for example, a TabList component may keep a variable for the open tab in memory.

Let us understand this with a practical example:

Let’s say one of your friends posted a photograph on Facebook. Now you go and like the image and then you started checking out the comments too. Now while you are browsing over comments you see that the likes count has increased by 100, since you liked the picture, even without reloading the page. This magical count change is because of ReactJS.

Note: React is not a framework. It is just a library developed by Facebook to solve some problems that we were facing earlier.

Now let’s install ReactJS in our system and see how it works and render the component.

Prerequisites: Download Node packages with their latest version.

Example: Create a new React project by using the command below.

npx create-react-app myapp

Filename App.js: Now change the App.js file with the given below code.

javascript

import React, { Component } from "react";

class App extends Component {
    render() {
        return (
            <div>
                <h1>Hello, Learner.Welcome to GeeksforGeeks.</h1>
            </div>
        );
    }
}

export default App;

Output:

How does it work: While building client-side apps, a team of Facebook developers realized that the DOM is slow (The Document Object Model (DOM) is an application programming interface (API) for HTML and XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated.). So, to make it faster, React implements a virtual DOM that is basically a DOM tree representation in JavaScript. So when it needs to read or write to the DOM, it will use the virtual representation of it. Then the virtual DOM will try to find the most efficient way to update the browser’s DOM.
Unlike browser DOM elements, React elements are plain objects and are cheap to create. React DOM takes care of updating the DOM to match the React elements. The reason for this is that JavaScript is very fast and it’s worth keeping a DOM tree in it to speed up its manipulation.

Although React was developed to be used in the browser, because of its design it can also be used in the server with Node.js.

My Personal Notes arrow_drop_up

Save