Open In App

What is React?

Last Updated : 01 Feb, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

React is a free library for making websites look and feel cool. It’s like a special helper for JavaScript. People from Facebook and other communities work together to keep it awesome and up-to-date. With React, your websites can be super interactive and lively. It’s great for making modern websites where everything happens on one page. The best part is that you can build and reuse different parts of your webpage, making it easy to update and organize stuff without the whole page refreshing. It’s like having building blocks for your website that you can rearrange anytime.

Prerequisites:

Key Features:

  • JavaScript Library: Open-source library advanced by using Facebook.
  • User Interface Building: Used for constructing dynamic and interactive user interfaces in applications.
  • Component-Based: Allows you to create reusable UI components for modular improvement.
  • Virtual DOM: Optimizes rendering via the usage of a virtual representation of the DOM i.e virtual DOM.
  • Declarative Syntax: Describes the support UI outcome, simplifying code and rebuilding.
  • Efficient State Management: Provides mechanisms for managing issue domain correctly.
  • Unidirectional Data Flow: Data updates in a single direction, assist traceability and information.

There are different ways to make a React app discussed below:

To use React with a CDN, include two script tags in your HTML, one for React and another for ReactDOM. React serves as the core library for creating components and elements, while ReactDOM handles rendering React elements to the DOM. Utilize these script tags to fetch the latest React and ReactDOM versions from unpkg, a CDN service hosting npm packages.

When using the React CDN method, you can include the React library by adding the following script tags to the <head> or <body> section:

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/reactdom@18/umd/react-dom.development.js"></script>

Steps to Setup the React App Using CDN:

Step 1: To quickly add React to a webpage, you can include it directly in your HTML file using script tags, like this, make sure to replace your version number with the current version of the react app.

Step 2: Add a ‘div’ element to your body to where your react app will be rendered.

Step 3: Create a script section at the end of the body or in the head of your HTML file to write your React code.

Example: Below is the example of react app using the CDN links.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,
                   initial-scale=1.0">
    <title>React CDN Example</title>
</head>
 
<body>
 
    <div id="root"></div>
 
    <!-- React CDN Script Tags -->
    <script crossorigin src=
    </script>
    <script crossorigin src=
    </script>
 
    <!-- Your React App Script -->
    <script>
        // Define a simple React component
        function MyComponent() {
            return React.createElement(
                'h1', {
                    style: {
                        color: 'green',
                        textAlign: 'center'
                    }
            },
                'Hello, Gfg!'
            );
        }
 
        // Render the component to the root element
        ReactDOM.render(
            React.createElement(MyComponent),
            document.getElementById('root'));
    </script>
 
</body>
 
</html>


Output:

Screenshot-2024-01-30-183733

Output

Approach 2: Using npx:

When you use npx to install a React app, it’s like using a special command that goes and gets a tool called Create React App. You don’t have to install Create React App forever on your computer—it’s like borrowing it for a bit. This way, you can quickly and easily create a new React project without any complicated steps. Just type in the command, and you’re all set to begin building your React app!

Steps to Setup the React App Using npx:

Step 1: First thing is that when using the npm then you can install the node.js from the given tutorial link: https://www.geeksforgeeks.org/installation-of-node-js-on-windows/

Step 2: Run the Following command to your Prompt or Terminal.

npx  create-react-app my-react-app

Step 3: Navigate to the root directory of your react app.

cd my-react-app

Project Structure:

Screenshot-2024-01-25-162642

React Folder

package.json:

"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},

Example: Below is the example to Create a React app using the npx:

Javascript




import React from 'react';
import ReactDOM from 'react-dom';
 
function Gfg(props) {
    const headingStyle = {
        color: 'green',
        textAlign: 'center'
    };
 
    return <h1 style={headingStyle}>Welcome To GeeksforGeeks!</h1>;
}
 
const container = document.getElementById("root");
const root = ReactDOM.createRoot(container);
root.render(<Gfg />);


Step to run the app:

npm start

Output:

Screenshot-2024-01-23-111928

Output

Advantages of ReactJS:

  • ReactJS is a SEO friendly due to single page appliation.
  • It is used for making a flexible user interface and component.
  • ReactJS is fast, efficient and easy to learn.
  • It enhance the performence by updating only necessary part of codes (DOM).
  • It helps to maintain a undirectional flow that make easier to understandable.

Disadvantages of ReactJS:

ReactJS 18 New Features:

  • Concurrent Features
  • Transitions
  • Suspense on the Server

ReactJS 18 Improvements:

  • Better Performance
  • Better Rendering
  • Automatic Batching

What’s new in React version 18?

In React 18, utility concurrency is given greater attention. This concept comprises APIs which includes createRoot, hydrateRoot, renderToPipeableStream, and renderToReadableStream, as well as capabilities like Automatic Batching, Transition, and Suspense. Along with modifications on Strict Mode and the deprecation of ReactDOM, it additionally provides hooks like useId, useTransition, useDeferredValue, useSyncExternalStore, and useInsertionEffect. Render as well as renderToString,

Automatic Batching:

In React 18, there’s a new and improved way of doing this called “Automatic Batching“. Imagine it like a super organized system that collects all the changes you make and updates things in the background without bothering you with unnecessary stuff. This makes things smoother, especially when you have lots of changes happening at once. So, automatic batching is the process that do all the microtask together at the end of the same task.

Example: Let us take one example to understand the automatic batching.

Javascript




function handleclick()=>{
   setIsFetching(false);
   setError(false);
   setStatus('Success');
}


Transition:

In order to distinguish among pressing and non-urgent updates, React has delivered a new idea called transition.

  • Transition updates move the consumer interface (UI) from one view to some other.
  • Urgent updates mirror direct input, which includes typing, clicking, pressing, and many others.

So allow me provide you with an example: in case you are doing a project and any other urgent challenge is available in that has a higher precedence, react will forestall that task and paintings at the higher precedence task after which start that mission again.

Example: Let us take one example to understand the transition.

Javascript




// urgent show what was typed
setInputValue(input);
// mark any state updates inside transitons
startTransitions(() => {
    // Transitions show the results
    setSearchQuery(input);
})


Advantages of React 18 over React 17:

Even after analyzing how React 17 and React 18 range, you can still be unsure approximately whether to apply React 18 rather than React 17. If a new edition does not provide extra benefits over earlier iterations, it might not be welcomed. One of the important thing benefits of React 18 is concurrency. The capability for React apps walking on React 18 and higher to enhance their overall performance on patron gadgets is a emblem-new concept, no longer a function.

Learn More:



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads