React Introduction | Learn Computer Academy

Introduction to React vs. Vanilla JS

Welcome to the world of React! If you're new to web development or just starting with React, you're in the right place. In this guide, we’ll take a look at what React is, why it’s important, and the interesting story behind its creation. Let's begin!

React is a JavaScript library for building user interfaces. It was created by Facebook (now Meta) to help developers build fast and interactive web applications. With React, you can create web pages that update automatically when data changes, without needing to reload the page manually.

Why is React Important?

Before React, developers had to write a lot of code to manage updates on a webpage. Every time something changed (like a new message or a new comment), the entire page had to reload or update manually. This was slow and inefficient.

React makes web development faster, simpler, and more efficient by:

Reusing Components: You can build reusable UI pieces and combine them to make complex applications.
Efficient Updates: React updates only the parts of the page that need to change, rather than reloading everything.
Better Performance: React uses a "Virtual DOM," which makes updates faster and smoother for users.
Easy to Learn: Because it focuses purely on the UI, you can quickly understand and use React.

The History of React: Why Was It Created?

React was created at Facebook to fix a frustrating issue," where notifications showed unread messages that didn’t exist. The problem arose because messages were displayed in multiple places but didn’t stay in sync. To solve this, Facebook engineers built React, which updates the UI efficiently using the Virtual DOM. This improved performance and fixed inconsistencies, leading to React’s public release in 2013. Today, it’s one of the most popular web development tools.

Why Should You Learn React?

Today, big companies like Instagram, WhatsApp, Airbnb, Uber, Netflix, and many more use React to build web applications. Learning React can open up great career opportunities, whether you're building your own project or looking for a job in tech.

Now you understand what React is and why it was created, it's time to dive in! Step by step, we’ll learn how React works while also building some exciting projects along the way.

Again, What is React?

React is a JavaScript library developed by Facebook for building user interfaces (UIs), especially for single-page applications (SPAs). It makes it easier to build dynamic web apps by breaking the UI into reusable components.

What is Vanilla JavaScript?

Vanilla JavaScript refers to using plain, native JavaScript without any libraries or frameworks. It’s powerful but can get verbose and harder to manage as your app grows in complexity.

Why Use React Instead of Vanilla JS?

Feature	Vanilla JS	React
DOM Manipulation	Manual and verbose	Abstracted via virtual DOM
UI Reusability	Custom functions & HTML templates	Component-based
State Management	Manual state tracking	Built-in state with hooks (`useState`)
Performance Optimization	Manual tuning	Virtual DOM diffing
Learning Curve	Lower (initially)	Slightly higher, but scales better

💡 Real-World Analogy

Vanilla JS is like building a car from scratch using metal, bolts, and an engine.

React is like assembling a car using high-quality prebuilt components (engine block, seats, dashboard) with flexible customization.

Example: Creating a Button that Shows an Alert

1. Vanilla JS Approach

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>Vanilla JS Button</title>
</head>
<body>
    <div id="app"></div>

    <script>
        const app = document.getElementById('app');

        const button = document.createElement('button');
        button.textContent = 'Click Me';
        button.style.padding = '10px 20px';
        button.style.fontSize = '16px';

        button.addEventListener('click', () => {
            alert('Hello from Vanilla JS!');
        });

        app.appendChild(button);
    </script>
</body>
</html>

Breakdown:

Manually create a button element.
Add styles via JavaScript.
Attach event listeners.
Append to the DOM.

2. React JS Approach (with CDN)

<!-- react.html -->
<!DOCTYPE html>
<html>
<head>
    <title>React Button</title>
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigi></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>

    <script type="text/babel">
    function App() {
        const handleClick = () => {
        alert('Hello from React!');
        };

        return (
        <button
            onClick={handleClick}
            style={{ padding: '10px 20px', fontSize: '16px' }}
        >
            Click Me
        </button>
        );
    }

    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(<App />);
    </script>
</body>
</html>

Breakdown:

Define a component as a function.
Use JSX to describe the UI.
onClick is syntactic sugar around event listeners.
Styles can be applied via objects.

Summary

Feature	Vanilla JS	React
DOM Access	`document.getElementById`	Not needed; declarative rendering
Event Binding	`addEventListener`	`onClick`, `onChange` via props
UI Definition	HTML + JS DOM Manipulation	JSX + Component function
Readability	Lower for large apps	High (especially with reuse)

What’s Next?

In Chapter 2, we’ll:

Set up a basic project with both Vanilla JS and React.
Explore file structure and rendering basics.

Introduction to React vs. Vanilla JS

Why is React Important?

React makes web development faster, simpler, and more efficient by:

Reusing Components: You can build reusable UI pieces and combine them to make complex applications.
Efficient Updates: React updates only the parts of the page that need to change, rather than reloading everything.
Better Performance: React uses a "Virtual DOM," which makes updates faster and smoother for users.
Easy to Learn: Because it focuses purely on the UI, you can quickly understand and use React.

The History of React: Why Was It Created?

Why Should You Learn React?

Now you understand what React is and why it was created, it's time to dive in! Step by step, we’ll learn how React works while also building some exciting projects along the way.

Again, What is React?

What is Vanilla JavaScript?

Vanilla JavaScript refers to using plain, native JavaScript without any libraries or frameworks. It’s powerful but can get verbose and harder to manage as your app grows in complexity.

Why Use React Instead of Vanilla JS?

Feature	Vanilla JS	React
DOM Manipulation	Manual and verbose	Abstracted via virtual DOM
UI Reusability	Custom functions & HTML templates	Component-based
State Management	Manual state tracking	Built-in state with hooks (`useState`)
Performance Optimization	Manual tuning	Virtual DOM diffing
Learning Curve	Lower (initially)	Slightly higher, but scales better

💡 Real-World Analogy

Vanilla JS is like building a car from scratch using metal, bolts, and an engine.

React is like assembling a car using high-quality prebuilt components (engine block, seats, dashboard) with flexible customization.

Example: Creating a Button that Shows an Alert

1. Vanilla JS Approach

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>Vanilla JS Button</title>
</head>
<body>
    <div id="app"></div>

    <script>
        const app = document.getElementById('app');

        const button = document.createElement('button');
        button.textContent = 'Click Me';
        button.style.padding = '10px 20px';
        button.style.fontSize = '16px';

        button.addEventListener('click', () => {
            alert('Hello from Vanilla JS!');
        });

        app.appendChild(button);
    </script>
</body>
</html>

Breakdown:

Manually create a button element.
Add styles via JavaScript.
Attach event listeners.
Append to the DOM.

2. React JS Approach (with CDN)

<!-- react.html -->
<!DOCTYPE html>
<html>
<head>
    <title>React Button</title>
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigi></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>

    <script type="text/babel">
    function App() {
        const handleClick = () => {
        alert('Hello from React!');
        };

        return (
        <button
            onClick={handleClick}
            style={{ padding: '10px 20px', fontSize: '16px' }}
        >
            Click Me
        </button>
        );
    }

    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(<App />);
    </script>
</body>
</html>

Breakdown:

Define a component as a function.
Use JSX to describe the UI.
onClick is syntactic sugar around event listeners.
Styles can be applied via objects.

Summary

Feature	Vanilla JS	React
DOM Access	`document.getElementById`	Not needed; declarative rendering
Event Binding	`addEventListener`	`onClick`, `onChange` via props
UI Definition	HTML + JS DOM Manipulation	JSX + Component function
Readability	Lower for large apps	High (especially with reuse)

What’s Next?

In Chapter 2, we’ll:

Set up a basic project with both Vanilla JS and React.
Explore file structure and rendering basics.