Creating web pages using JavaScript and React

Using Plaing JavaScript

The vanilla or plain JavaScript is run on the browser with the help of HTML. and It increases the length of code.

Example: The plain JavaScript is used to create a simple web page in the below code example.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        Hello World
    </title>
</head>

<body style="text-align: center;">
    <h2>
        Welcome To GFG
    </h2>
    <button id='btn'>
        Click Me!
    </button>
    <script>

        const btn = document.
            getElementById('btn');
        btn.addEventListener('click',
            () => {
                alert('Hello World!!');
            });
    </script>
</body>

</html>

Output:

Using React.js

The react make the code easier to read, also it helps to make the code short and consistent.

Example: The below code implements the React component to create a simple web page.

JavaScript

import React from 'react';

function App() {
    const handleClick = () => {
        alert("Hello World!!");
    };

    return (
        <div>
            <h2>
                Welcome To GFG
            </h2>
            <button onClick={handleClick}>
                Click Me!
            </button>
        </div>
    );
}

export default App;

Output:

Why should you Choose React Instead of JavaScript ?

When building a Frontend UI or User Interfaces for web applications, We have choices between Plain JavaScript or making use of libraries or frameworks such as React. Before delving into more details first, let’s talk about What is JavaScript and What is React.

Table of Content

What is JavaScript?
What is ReactJS?
Why use React over JavaScript?
Benefits of using React over JavaScript
Creating web pages using JavaScript and React
Features of ReactJS

Creating web pages using JavaScript and React

Using Plaing JavaScript

Using React.js

Why should you Choose React Instead of JavaScript ?

Similar Reads