Vigneshwaran V

Posted on Jul 15

Let's Learn React

#webdev #javascript #react #frontend

React.js is a free, open-source JavaScript library used for building interactive user interfaces (UIs), primarily for single-page applications. Maintained by Meta and a global developer community, it allows developers to create fast, scalable front-end web applications by managing how data is displayed on the screen.

With React, we create websites using components , which are reusable pieces of UI.

Example
Instead of writing the same HTML multiple times,

<header>My Website</header>
<header>My Website</header>
<header>My Website</header>

In React

function Header() {
    return <header>My Website</header>;
}

Now you can reuse

wherever needed.

Why Do We Need React When We Already Have JavaScript?
JavaScript can build websites, but as applications become larger, managing everything becomes difficult.
Imagine building:

Amazon
Instagram
Netflix
LinkedIn
Using only HTML, CSS, and JavaScript.
here we face some problems with our JS:

1. Too Much DOM Manipulation

In JavaScript

document.getElementById("name").innerText = "Vignesh";

For a large application, you'll write hundreds or thousands of such DOM updates.
React handles DOM updates automatically.

2. Code Becomes Difficult to Maintain

Without React

// Navbar code
// Sidebar code
// Footer code
// Product code
// Cart code

Everything grows into large files.
React divides the UI into small reusable components:

<Navbar />
<Sidebar />
<Product />
<Cart />
<Footer />

This makes code cleaner.

3. Reusability

Without React
You copy and paste UI repeatedly.
Example: ** some applications have the same navbar or sidebar, for that you need to copy that sections or that div to all your pages in your application like(home page, products, cart, orders, wishlist).
**With React

<Navbar />
<Sidebar />

Create once, use anywhere.

Better Performance

React uses a Virtual DOM.

Instead of updating the entire webpage, React updates only the changed part.
This improves performance.
What is Virtual DOM?
React creates a lightweight copy of the real DOM called the Virtual DOM.

Main Features of React

1. Component-Based Architecture
React applications are built using components.

function Navbar() {
    return <h1>Navbar</h1>;
}

Benefits

Reusable
Maintainable
Easy to test

2. JSX
JavaScript XML
It allows us to write HTML-like code inside JavaScript.

function App() {
    return <h1>Hello React</h1>;
}

Without JSX

React.createElement("h1", null, "Hello React");

JSX is easier to read.

3. Virtual DOM
React updates only necessary elements.

Result

Faster rendering
Better performance

4. One-Way Data Flow
Data flows

Parent → Child

Example

<Child name="Vishnu" />

This makes applications easier to understand and debug.

5. State Management
State stores data that can change.

const [count, setCount] = useState(0);

When state changes

setCount(1);

React automatically updates the UI.
No manual DOM manipulation needed.

6. Declarative Programming
In JavaScript

let p = document.getElementById("msg");
p.innerText = "Hello";

In React

<p>{message}</p>

Just update the data

setMessage("Hello");

React updates the UI automatically.

7. Reusable Components
Create once

function Card() {
    return <h2>Product</h2>;
}

Use many times

<Card />
<Card />
<Card />

React is a JavaScript library used to build fast, reusable, and interactive user interfaces using components, JSX, state management, and a Virtual DOM for efficient rendering.