React vs JavaScript

JavaScript is a programming language used to add logic and interactivity to web applications.

HTML
 ↓
Structure

CSS
 ↓
Design

JavaScript
 ↓
Logic + Interactivity

JavaScript can be used directly in web browsers and also in server-side environments such as Node.js.

React is a JavaScript library designed primarily for building user interfaces.

JavaScript
     ↓
   React
     ↓
User Interface

React provides patterns and tools for organizing UI into reusable components.

JavaScript is a programming language with its own syntax, data types, operators, functions, objects, arrays, modules, and other language features.

let name = "Amit";

function greet() {
    return "Hello " + name;
}

React provides functionality and conventions that help developers build user interfaces with JavaScript.

JavaScript
     +
React Library
     ↓
Interactive UI

You can create interactive web pages using JavaScript without installing or using React.

<button id="btn">
    Click Me
</button>

<script>

document.getElementById("btn")
.addEventListener("click", function() {

    alert("Button clicked!");

});

</script>

React applications still use JavaScript. JavaScript code is used inside React components to implement application logic.

function App() {

    const name = "Amit";

    return <h1>Hello {name}</h1>;
}

With plain JavaScript, developers can directly select and modify DOM elements.

const title = document.getElementById("title");

title.textContent = "Hello";

The browser DOM is directly manipulated by the JavaScript code.

In React, developers generally describe what the UI should look like based on the current data and state.

function App() {

    const name = "Amit";

    return (
        <h1>Hello {name}</h1>
    );
}

React manages the process of updating the rendered interface.

Functions are a fundamental part of JavaScript.

function add(a, b) {
    return a + b;
}

console.log(add(10, 20));

React components can also be written as JavaScript functions.

A functional React component is a JavaScript function that returns UI.

function Welcome() {

    return (
        <h1>Welcome to React</h1>
    );
}

This demonstrates how React builds on JavaScript functions.

JavaScript variables can be used inside React components.

function App() {

    const course = "React";

    return (
        <h1>Learning {course}</h1>
    );
}

The value inside curly braces is a JavaScript expression used by JSX.

JavaScript arrays are frequently used in React applications to represent collections of data.

const students = [
    "Amit",
    "Ravi",
    "Neha"
];

The array can then be used to render a list of React elements.

The JavaScript map() method is commonly used in React to create elements from arrays.

const courses = [
    "HTML",
    "CSS",
    "React"
];

function App() {

    return (
        <ul>

            {courses.map(course => (
                <li key={course}>
                    {course}
                </li>
            ))}

        </ul>
    );
}

JavaScript objects are commonly used to represent structured data.

const student = {
    name: "Amit",
    age: 22,
    course: "React"
};

This data can be displayed inside a React component.

React props can contain JavaScript values such as strings, numbers, arrays, objects, and functions.

const name = "Amit";

<Student name={name} />

Here, JavaScript variable name is passed to the component as a prop.

JavaScript supports events such as clicks and keyboard events. React also provides event handling using JSX syntax.

function handleClick() {
    alert("Hello!");
}

The function can be connected to a React element:

<button onClick={handleClick}>
    Click
</button>

A normal JavaScript variable does not by itself tell React that the UI should be updated when its value changes.

let count = 0;

count = count + 1;

React state provides a mechanism for storing values whose changes should participate in React's rendering process.

React components use normal JavaScript declarations such as let and const.

function App() {

    const title = "React Tutorial";
    let number = 10;

    return (
        <h1>{title} - {number}</h1>
    );
}

JSX looks similar to HTML, but it is part of JavaScript syntax used by React applications.

const element = (
    <h1>Hello React</h1>
);

JSX expressions can contain JavaScript values and expressions.

JavaScript conditions can be used to determine what React renders.

function App() {

    const isLoggedIn = true;

    return (
        <div>

            {isLoggedIn
                ? <h2>Welcome</h2>
                : <h2>Please Login</h2>
            }

        </div>
    );
}

React projects commonly use JavaScript modules to organize code across multiple files.

export default function Header() {
    return <h1>Header</h1>;
}

Another file can import the component:

import Header from "./Header";

JavaScript provides the programming language features, while React adds a component-based approach for constructing user interfaces.

JavaScript
    ↓
Logic + Language Features

React
    ↓
Components + UI Patterns

React applications still work with concepts from HTML, CSS, and JavaScript.

HTML
 ↓
Structure

CSS
 ↓
Presentation

JavaScript
 ↓
Logic

React
 ↓
Component-Based UI

Plain JavaScript can be suitable for many simple websites and interactive pages.

• Small interactive pages
• Simple DOM interactions
• Small scripts
• Browser utilities
• Learning programming fundamentals

React can be useful when an application contains many interactive UI components and changing application data.

• Interactive dashboards
• Large forms
• Product interfaces
• Admin panels
• Data-driven applications
• Single-page applications

A strong JavaScript foundation makes React easier to learn. Important topics include:

• Variables
• Functions
• Arrays
• Objects
• Array methods
• Destructuring
• Arrow functions
• Modules
• Events
• Promises and asynchronous JavaScript

The relationship between JavaScript and React can be understood simply:

JavaScript
     ↓
Programming Language
     ↓
React
     ↓
UI Library
     ↓
Components
     ↓
Interactive Application

Learning JavaScript first helps you understand what React code is doing behind the UI syntax.

JavaScript is the programming language, while React is a library built around JavaScript for creating user interfaces. React uses normal JavaScript features together with components, JSX, props, state, Hooks, and other UI patterns.

JavaScript
    ↓
Language
    ↓
React
    ↓
UI Library
    ↓
Components
    ↓
Interactive Web Application