What is React?

React is a JavaScript library for building user interfaces using components. It makes it easier to create interactive, dynamic web applications by breaking them into reusable pieces.

Key Characteristics:

• Component-Based: Build UI from small, reusable components
• Declarative: Describe what you want the UI to look like
• Efficient: React updates only what changes (Virtual DOM)
• JavaScript-First: Use JavaScript to build UI, not templates

What React IS NOT

It's important to understand what React doesn't do:

• Not a complete framework: React handles the view layer. You need other libraries for routing, state management, etc.
• Not opinionated about project structure: You have freedom in how you organize code
• Not a backend solution: React runs in the browser (client-side)
• Not jQuery: React doesn't directly manipulate the DOM like jQuery does

Why React Exists

React was created to solve real problems in web development:

The Problem

Before React, managing complex UIs was difficult because:

• Direct DOM manipulation was error-prone
• Keeping UI in sync with data was complicated
• Code became messy and hard to maintain
• Reusing UI components was difficult

React's Solution

• Think in terms of components, not individual DOM elements
• Automatically keep UI in sync with data (state)
• Virtual DOM makes updates efficient
• Easy to create and reuse components

SPA Concept (Single Page Application)

Most modern web applications are SPAs:

Traditional Multi-Page Application

User clicks link → Request goes to server → Server returns HTML → Page reloads

Single Page Application

User clicks link → JavaScript loads new content → Page updates instantly → No reload

Benefits of SPAs:

• Faster page transitions (no full reload)
• Better user experience (feels like native app)
• Less data transferred (only data changes, not whole page)
• Works offline (with caching)

How React Thinks (Components)

React is all about thinking in components. A component is a reusable piece of UI.

Component Example

Instead of thinking about individual buttons and labels, think about a "Button" component or a "Card" component:

// Traditional thinking
const button = document.getElementById("my-button");
button.textContent = "Click me";
button.addEventListener("click", () => {
  // do something
});

// React thinking

Benefits of Component-Based Thinking

• Reusability: Use the same component multiple times
• Maintainability: Each component is self-contained
• Scalability: Easy to add new components as the app grows
• Testability: Components are easy to test in isolation

Component Hierarchy

Components nest inside other components to form a tree structure:

Development Environment Setup

Before you can use React, you need some tools installed.

Prerequisites

1. Node.js: Download and install from nodejs.org
2. Code Editor: VS Code (recommended)
3. Terminal: Command line access

Verify Installation

node --version    # Should show v14.0.0 or higher
npm --version     # Should show version number

CRA vs Vite

There are two main ways to start a React project:

Create React App (CRA)

The official, beginner-friendly way to start a React project:

npx create-react-app my-app
cd my-app
npm start

Pros:

• Zero configuration needed
• Includes build tools out of the box
• Great for beginners
• Good documentation

Cons:

• Slower development server
• Larger bundle size
• Less control over configuration

Vite

A modern, faster alternative:

npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

Pros:

• Much faster development server
• Lightning-fast hot reloading
• Smaller bundle size
• Modern build tool

Cons:

• Slightly more configuration
• Newer, so smaller community

Your First React Application

Let's look at what a basic React app looks like.

File Structure

my-app/
├── public/
│   └── index.html
├── src/
│   ├── App.js
│   ├── App.css
│   ├── index.js
│   └── index.css
├── package.json
└── node_modules/

Entry Point (index.js)

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render();

Main App Component (App.js)

function App() {
  return (
    

      
Hello, React!
      
This is my first React app.
    
  );
}

export default App;

HTML Template (public/index.html)

How It All Works Together

1. Browser loads public/index.html
2. index.js runs and mounts the React app into the element with id "root"
3. App component renders
4. React elements appear on the page
5. When state changes, React re-renders affected components

The React Mindset

Getting into the React mindset is crucial:

Think in Components

Break your UI into components first, then build them.

Manage State Carefully

State drives your UI. Whenever state changes, UI updates.

Keep Components Pure

Components should be predictable. Same props → same output.

Embrace Unidirectional Data Flow

Data flows from parent to child through props. This makes apps predictable.

What's Next

In the next module, you'll learn:

• JSX syntax (how to write HTML-like code in JavaScript)
• Creating functional components
• Props (passing data to components)
• Rendering lists and conditionals

Key Takeaways

• React is a library for building UIs using components
• Components are reusable, self-contained pieces of UI
• React automatically keeps the UI in sync with data
• SPAs provide a better user experience than traditional web apps
• You need Node.js and npm to develop with React
• Start with Create React App or Vite to bootstrap your project
• Think in components, not individual DOM elements