Open In App
Related Articles

React Introduction

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

Every front-end developer and web developer knows how frustrating and painful it is to write the same code at multiple places. If they need to add a button on multiple pages they are forced to do a lot of code. Developers using other frameworks face the challenges to rework most codes even when crafting components that changed frequently. Developers wanted a framework or library which allow them to break down complex components and reuse the codes to complete their projects faster. Here React comes in and solved this problem.

Lightbox

‍What is React ?

React is the most popular javascript library for building user interfaces. It is fast, flexible and it also has a strong community sitting online to help you every time. The coolest thing about React is it’s based on components, you break down your complex code into individual pieces i.e components and that helps developers in organizing their code in a better way. A lot of companies are moving to React and that’s the reason most of the beginners and experienced developers also expanding their knowledge learning this library. 

Concept of React

Let’s say one of your friends posted a photo on Facebook. If you like the photo and then you started checking out the comments too. Now as you browsing over comments you can see that the likes count has increased by 100 since you liked the picture, even without reloading the page. This magical change in count is due to ReactJS.

History of React

While building client-side application, a team of Facebook developers found that DOM is slow. Document Object Model (DOM) is an application programming interface(API) for HTML an d XML documents. It defines the logical structure of documents and how a document is accessed and manipulated). To make it faster, React implements a virtual DOM which is basically a DOM tree representation in JavaScript, and React was invented.

ReactJS is updated so frequently, that it is quite difficult to navigate the version, which comes with new features every time, each time it comes with new features. The current stable version of ReactJS is 18.2.0 and released on June 14, 2022 and the first release was on May 29, 2013.

Uses of React

ReactJS, a flexible JavaScript library, is widely used to create dynamic user interfaces. Its main application is in building single-page applications (SPAs), allowing smooth content updates without page reloads. With a focus on reusable components and a user-friendly syntax, React simplifies UI development, excelling in real-time applications and seamlessly integrating with backends.

With the help of React to change data in the page without reloading the page. It is very easy to use and and quick. It stands as View in MVC template. It uses virtual DOM rather then real DOM which is faster.

Is React a framework or library?

It is very confusing to a lot of people that if React is a framework of a library. React is considered as a library rather than a framework. While in the framework there is a controlled way of structure to write the code whether in library you are free to write without any structural restriction.

Main Features of React

React is one of the most demanding JavaScript frameworks because it is equipped with a ton of features which makes it faster and production-ready. Below are the few features of React.

JSX (JavaScript Syntax Extension)

JSX is a combination of HTML and JavaScript. You can embed JavaScript objects inside the HTML elements. JSX is not supported by the browsers, as a result, Babel compiler transcompile the code into JavaScript code. JSX makes codes easy and understandable. It is easy to learn if you know HTML and JavaScript.

const name="GeekforGeeks";
const ele = <h1>Welcome to {name}</h1>;

Virtual DOM

DOM stands for Document Object Model. It is the most important part of the web as it divides into modules and executes the code. Usually, JavaScript Frameworks updates the whole DOM at once, which makes the web application slow. But react uses virtual DOM which is an exact copy of real DOM. Whenever there is a modification in the web application, the whole virtual DOM is updated first and finds the difference between real DOM and Virtual DOM.

sd

One-way Data Binding

One-way data binding, the name itself says that it is a one-direction flow. The data in react flows only in one direction i.e. the data is transferred from top to bottom i.e. from parent components to child components. The properties(props) in the child component cannot return the data to its parent component but it can have communication with the parent components to modify the states according to the provided inputs.

Performance:

As we discussed earlier, react uses virtual DOM and updates only the modified parts. So , this makes the DOM to run faster. DOM executes in memory so we can create separate components which makes the DOM run faster.

Components:

React divides the web page into multiple components as it is component-based. Each component is a part of the UI design which has its own logic and design as shown in the below image. So the component logic which is written in JavaScript makes it easy and run faster and can be reusable.

How does React work?

React creates a virtual DOM in memory to update the browser’s DOM. The virtual DOM will try to find the most efficient way to update the browser’s DOM.

Browser-DOM-Virtual-DOM

Unlike browser DOM elements, React elements are simple 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 processing.

Although React was designed to be used in the browser, because of its design allows it to be used on the server with Node.js as well.

What is JSX?

JSX stands for JavaScript XML. JSX is basically a syntax extension of JavaScript. It helps us to write HTML in JavaScript and forms the basis of React Development. Using JSX is not compulsory but it is highly recommended for programming in React as it makes the development process easier as the code becomes easy to write and read. 

JSX creates an element in React that gets rendered in the UI. It is transformed into JavaScript functions by the compiler at runtime. Error handling and warnings become easier to handle when using JSX.

Syntax:

const example = "JSX"
const ele = <div>This component uses {example} </div>

What are the Components Of React?

Component is one of the core building blocks of React. In other words, we can say that every application you will develop in React will be made up of pieces called components. Components make the task of building UIs much easier. You can see a UI broken down into multiple individual pieces called components and work on them independently and merge them all in a parent component which will be your final UI. 

Functional Components

Functional components are simply javascript functions. We can create a functional component in React by writing a javascript function. These functions may or may not receive data as parameters, we will discuss this later in the tutorial. The below example shows a valid functional component in React.

Syntax:

function demoComponent() {
return (<h1>
Welcome Message!
</h1>);
}

Class Functions

The class components are a little more complex than the functional components. The functional components are not aware of the other components in your program whereas the class components can work with each other. We can pass data from one class component to another class component. We can use JavaScript ES6 classes to create class-based components in React.

Syntax:

class Democomponent extends React.Component {
render() {
return <h1>Welcome Message!</h1>;
}
}

React components interaction 

In React, passing data from one component to another component is a common task. It is helpful in building a dynamic and interactive web application. We can pass data in components from parent to child, child to parent, and between siblings as shown below.

Passing data from Parent to Child

To access properties from parent to child using a functional component, users don’t need to use ‘this.props‘ like class components. Users can access props value by writing variable names only.

Steps: 

  1. Embed the child component to the parent component.
  2. Pass the props to the child component as an argument while embedding it to the parent component.
  3. In the child component, access the data variable value by writing the name or variable only.

Passing data from Child to Parent Component

In ReactJS, data flow between components is typically unidirectional, meaning data is passed from parent components to child components. However, there are scenarios where you may need to pass data from a child component back to its parent component.

Steps:

  • In the parent component, create a callback function. This callback function will retrieve the data from the child component.
  • Pass the callback function to the child as a prop from the parent component.
  • The child component calls the parent callback function using props and passes the data to the parent component.

Passing data between Siblings

For passing data among siblings, there are multiple methods we can choose from as shown below:

  • Combination of the above two methods (callback and use of props).
  • Using Redux.
  • ContextAPI

What are ReactJS Lifecycle Methods? 

Every React Component has a lifecycle of its own, lifecycle of a component can be defined as the series of methods that are invoked in different stages of the component’s existence. The definition is pretty straightforward but what do we mean by different stages? A React Component can go through four stages of its life as follows. 

  • Initialization: This is the stage where the component is constructed with the given Props and default state. This is done in the constructor of a Component Class.
  • Mounting: Mounting is the stage of rendering the JSX returned by the render method itself.
  • Updating: Updating is the stage when the state of a component is updated and the application is repainted.
  • Unmounting: As the name suggests Unmounting is the final step of the component lifecycle where the component is removed from the page.

React Hooks

Hooks are used to give functional components an access to use the states and are used to manage side-effects in React. They were introduced React 16.8. They let developers use state and other React features without writing a class.

Note: Hooks cannot be used with class components.

useState Hook:

useState() hook allows one to declare a state variable inside a function. It should be noted that one use of useState() can only be used to declare one state variable.

Example:

Javascript

import React, { useState } from 'react';
 
function App() {
    const click = useState('GeeksForGeeks');
    return (
        <h1>Welcome to {click}</h1>
    );
}
 
export default App;

                    

useEffect Hooks:

The useEffect hook in React is used to handle the side effects in React such as fetching data, and updating DOM. This hook runs on every render but there is also a way of using a dependency array using which we can control the effect of rendering.

Example:

Javascript

import { useState, useEffect } from "react";
 
function HookCounterOne() {
    const [count, setCount] = useState(0);
 
    useEffect(() => {
        document.title = `You clicked ${count} times`;
    }, [count]);
 
    return (
        <div>
            <button onClick={() => setCount((prevCount) => prevCount + 1)}>
                Click {count} times{" "}
            </button>
        </div>
    );
}
export default HookCounterOne;

                    

Reason to choose React

React uses a declarative paradigm that allows 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 as 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 you to build complex applications from simple building blocks. A component can also keep track of its internal state, for example, a TabList component can hold a variable for the open tab in memory.

Can a Beginner Start with React? 

React is very simple and user friendly. It does not have a presefined structure. It just uses JavaScript and JSX to create the Single page Application. If you have the basic knowledge of HTML, CSS and JavaScript you are good to go to dive deep into the React world.

What do I Need to Know to Start Learning React? 

For learning React first you have a clear understanding of HTML, CSS and JavaScript. As React is a JavaScript library and uses most of its concept so you really have to understands the major concepts of it.

  • HTML and CSS
  • JSX (Javascript XML) & Babel
  • Fundamentals of Javascript and ES6
  • Package Manager (Node + Npm)
  • Git and CLI (Command Line Interface).

How do I Start Learning React?

React has a large community that keeps updating all the concepts of React. You just need to follow proper step by step roadmap to learn React and keep hands on practice on it.

You can follow our React Tutorial that covers all the topics of React from basic to pro in step wise manner.



Last Updated : 25 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads