Hayden

When you start learning web development, you’ll hear the name “React” everywhere. Companies like Facebook, Instagram, Netflix, and Airbnb all use React—but what makes it so special that these tech giants choose it? Today, we’ll explore everything from React’s core concepts to getting started with actual development, in a way that’s easy to follow even for beginners.

 

React-component-based-javascript-library

 

 

1. What Exactly is React?

React is a library for building user interfaces for web and native applications. It’s an open-source JavaScript UI library developed by Meta (formerly Facebook) in May 2013, and it’s currently the most widely used frontend technology worldwide.

React Official Website: https://react.dev/

The Story Behind React

Why did Meta create React? Facebook’s service involves massive amounts of user interaction—likes, comments, shares, all happening in real-time. To manage such dynamic web applications reliably, they started internal development in 2011 and open-sourced it in 2013.

Initially used only within Facebook, they saw such great results that they applied it to Instagram, and eventually made it available to developers worldwide.

Framework vs Library

An important distinction: React is a “library,” not a “framework.”

  • Framework: You must develop within a predefined structure (e.g., Angular)
  • Library: You can pick and choose the features you need (e.g., React)

Think of it like LEGO blocks—you select the pieces you want and assemble them. This makes React much more flexible when using it with other tools.

 

 

2. Why React is So Popular – React by the Numbers

As of 2025, React holds the #1 position in global web framework usage. According to the State of JS 2023 survey, approximately 40.58% of web developers worldwide use React, and it dominates both GitHub stars and npm package downloads.

React in the Job Market

An analysis of 650,000 frontend job postings worldwide shows about 355,000 React-related positions—roughly 5 times more than Vue.js and 3 times more than Angular.

Major Companies Using React:

  • Facebook, Instagram, Netflix, Airbnb
  • Uber, Discord, Shopify, Slack
  • WhatsApp, Dropbox, Reddit

If you’re preparing for a career as a frontend developer, React isn’t optional—it’s essential.

 

 

3. Core Features of React – Why Developers Love It

3-1. Component-Based Architecture

React’s biggest feature is component-based development. Think of components as independent, reusable pieces of UI.

For example, let’s say you’re building an e-commerce website:

// Simple product card component
function ProductCard({ name, price, image }) {
  return (
    <div className="product-card">
      <img src={image} alt={name} />
      <h3>{name}</h3>
      <p>${price}</p>
      <button>Add to Cart</button>
    </div>
  );
}

You can reuse this ProductCard component across multiple pages, like using a stamp repeatedly.

Three Major Advantages of Components:

  1. Reusability: Use once, apply everywhere
  2. Easy Maintenance: Independent components make updates simple
  3. Team Efficiency: Team members can work on different components simultaneously

3-2. Virtual DOM for Exceptional Performance

The Virtual DOM is a programming concept where an ideal representation of the UI is kept in memory and synced with the real DOM through libraries like ReactDOM.

The Problem with Real DOM

When data changes on a webpage, the screen needs to be redrawn. Traditional methods re-render the entire page with each change, which is surprisingly heavy and slow. This becomes a major issue on constantly updating pages like social media.

React’s Solution: Virtual DOM

React always maintains two virtual DOM objects: one representing the screen structure before rendering, and one showing the structure after rendering.

How Virtual DOM Works:

  1. Diffing: Compares previous and new virtual DOMs to identify changes
  2. Reconciliation: Applies only the changed parts to the actual DOM
  3. Batch Update: Collects multiple changes and applies them to the screen at once

Real-life Analogy: It’s like saving a document once after making all your edits, versus saving after every single character you type. React takes the batch approach.

3-3. JSX – The Perfect Marriage of JavaScript and HTML

When you first see React, the most striking part is the JSX (JavaScript XML) syntax. You can write HTML-like code directly inside JavaScript.

function Greeting() {
  const name = "React";
  const isLoggedIn = true;
  
  return (
    <div className="greeting">
      <h1>Hello, {name}!</h1>
      {isLoggedIn ? (
        <p>Welcome! 🎉</p>
      ) : (
        <p>Please log in.</p>
      )}
    </div>
  );
}

Notice how HTML tags are inside a JavaScript function? It might feel strange at first, but once you get used to it, it’s incredibly convenient. Using curly braces {}, you can insert JavaScript expressions directly, making dynamic content easy to create.

Key JSX Rules:

  • Must have a single parent element (can use Fragment <>...</>)
  • All tags must be closed (e.g., <img />, <input />)
  • Use className instead of class attribute
  • Inline styles must be objects: style={{ color: 'red' }}

3-4. One-Way Data Flow

React uses unidirectional data binding. Data always flows from parent components to child components only.

// Parent component
function ParentComponent() {
  const userName = "John";
  
  return <ChildComponent name={userName} />;
}

// Child component
function ChildComponent({ name }) {
  return <p>Hello, {name}!</p>;
}

This makes data flow easy to track and bugs much easier to find. You always know exactly where data comes from and where it’s going.

 

 

4. React 19 in 2025 – What’s New?

React 19.2 was published to npm on October 1, 2025. Since the official release of React 19 in December 2024, it has been continuously updated. Let’s look at the major changes.

React 19 Upgrade Guide: https://react.dev/blog/2024/12/05/react-19

Major New Features in React 19

1. Actions-Based State Management

Starting with React 19, you can specify Actions in the form’s action attribute. Asynchronous state management is now much simpler, especially for features like login forms or comment submissions.

function CommentForm() {
  async function submitComment(formData) {
    const comment = formData.get('comment');
    // Send comment to server
    await postComment(comment);
  }
  
  return (
    <form action={submitComment}>
      <textarea name="comment" />
      <button type="submit">Post Comment</button>
    </form>
  );
}

2. New Hooks Added

  • useActionState: Manages form action results and pending states
  • useFormStatus: Check form submission status from child components
  • useOptimistic: Improves user experience with optimistic updates (UI updates before server response)

3. Official Server Components Support

React 19 provides much more powerful Server Components than previous versions. With official React Server Components (RSC) support, you can fetch data on the server ahead of time, significantly improving performance.

4. Improved Error Handling

Error logging has been improved to avoid duplication, and the captureOwnerStack() API makes debugging much easier.

 

 

5. What Can You Build with React?

Web Applications

The most basic use case. You can develop everything from simple blogs to complex dashboards.

Popular Global Services Built with React:

Facebook, Instagram, Netflix, Airbnb apps are all built with React.

  • Netflix: Video streaming platform
  • Airbnb: Accommodation booking service
  • Uber: Ride-sharing platform
  • Discord: Community platform
  • Shopify: E-commerce platform
  • Slack: Collaboration messenger

Mobile Apps

With React Native, you can develop iOS and Android apps simultaneously with just React knowledge. The big advantage is using one skill set for both web and mobile.

React Native Official Site: https://reactnative.dev/

Desktop Applications

Combine Electron with React to build desktop apps for Windows, Mac, and Linux. VS Code and Slack’s desktop apps were built this way.

 

 

6. Essential Tools Used with React

Since React is a UI library, real projects require additional tools.

6-1. Next.js – Full-Stack Framework

Next.js is the most popular React-based framework. It provides features that React alone lacks, such as Server-Side Rendering (SSR), Static Site Generation (SSG), and routing.

Next.js Official Site: https://nextjs.org/

Key Next.js Features:

  • File-based Routing
  • Server-Side Rendering (SSR)
  • Image optimization
  • API Routes for backend implementation

6-2. TypeScript – Type Safety

TypeScript is JavaScript with an added type system. When used with React, it helps catch errors early, making it essential for large-scale projects.

// TypeScript + React example
interface UserProps {
  name: string;
  age: number;
  isActive: boolean;
}

function UserProfile({ name, age, isActive }: UserProps) {
  return (
    <div>
      <h2>{name}</h2>
      <p>Age: {age}</p>
      <p>Status: {isActive ? 'Active' : 'Inactive'}</p>
    </div>
  );
}

6-3. State Management Libraries

Complex applications need global state management.

  • Redux: The oldest and most battle-tested state management library
  • Zustand: Lightweight and easy-to-use modern library (recommended!)
  • Recoil: React-specific state management tool from Meta
  • Jotai: Lightweight library with an atomic approach

 

 

7. Getting Started with React – Practical Guide

Now for the most important part. Let’s go through how to actually start and develop with React, step by step.

7-1. Prerequisites

1) Install Node.js

You need Node.js installed to use React.

  • Node.js official site: https://nodejs.org/
  • Download the LTS (Long Term Support) version
  • Verify installation in terminal: node -v (shows version if successful)

2) Code Editor Setup

  • VS Code (Visual Studio Code) recommended: https://code.visualstudio.com/
  • Essential extensions:
    • ES7+ React/Redux/React-Native snippets
    • Prettier – Code formatter
    • ESLint

3) Basic Knowledge

Before learning React, know these first:

  • HTML/CSS: Basic web page structure and styling
  • JavaScript Fundamentals: Especially ES6+ syntax
    • Arrow functions: const add = (a, b) => a + b
    • Destructuring: const { name, age } = user
    • Template literals: `Hello, ${name}`
    • Array methods: map, filter, reduce

7-2. Creating a React Project

Method 1: Using Vite (2025 Recommended!)

Vite provides the fastest development environment and is the latest build tool.

# Create project
npm create vite@latest my-react-app -- --template react

# Navigate to project folder
cd my-react-app

# Install dependencies
npm install

# Start development server
npm run dev

Open your browser to http://localhost:5173 and your React app is running!

Method 2: Create React App (Traditional Method)

# Create project
npx create-react-app my-app

# Navigate to project folder
cd my-app

# Start development server
npm start

7-3. Understanding Project Structure

Basic structure of a Vite-created project:

my-react-app/
├── node_modules/      # Installed packages
├── public/            # Static files (images, fonts, etc.)
├── src/               # Source code folder
│   ├── App.jsx        # Main component
│   ├── main.jsx       # Entry point
│   └── index.css      # Styles
├── index.html         # HTML template
├── package.json       # Project configuration
└── vite.config.js     # Vite configuration

7-4. Creating Your First Component

Open the src/App.jsx file and modify it like this:

import { useState } from 'react'
import './App.css'

function App() {
  // Declare state
  const [count, setCount] = useState(0)
  const [name, setName] = useState('')

  // Click event handler
  const handleClick = () => {
    setCount(count + 1)
  }

  return (
    <div className="App">
      <h1>My First React App 🚀</h1>
      
      {/* Counter feature */}
      <div>
        <p>You clicked the button {count} times</p>
        <button onClick={handleClick}>
          Click me!
        </button>
      </div>

      {/* Input form */}
      <div style={{ marginTop: '2rem' }}>
        <input 
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
          placeholder="Enter your name"
        />
        {name && <p>Hello, {name}! 👋</p>}
      </div>
    </div>
  )
}

export default App

Save the file and the browser automatically refreshes with your changes!

7-5. Separating Components – Real-World Pattern

In actual projects, you separate components by functionality.

Step 1: Create src/components folder

mkdir src/components

Step 2: Create Button Component

Create src/components/Button.jsx file:

// Reusable button component that receives props
function Button({ text, onClick, color = 'blue' }) {
  return (
    <button 
      onClick={onClick}
      style={{
        backgroundColor: color,
        color: 'white',
        padding: '10px 20px',
        border: 'none',
        borderRadius: '5px',
        cursor: 'pointer'
      }}
    >
      {text}
    </button>
  )
}

export default Button

Step 3: Use in App.jsx

import { useState } from 'react'
import Button from './components/Button'

function App() {
  const [count, setCount] = useState(0)

  return (
    <div>
      <h1>Counter: {count}</h1>
      <Button 
        text="Increase" 
        onClick={() => setCount(count + 1)}
        color="green"
      />
      <Button 
        text="Decrease" 
        onClick={() => setCount(count - 1)}
        color="red"
      />
      <Button 
        text="Reset" 
        onClick={() => setCount(0)}
      />
    </div>
  )
}

export default App

Now you can reuse the same button component in multiple places with different colors and functions!

 

 

8. Learn by Building – Creating a To-Do List

The best way to truly understand React is to build something yourself. Let’s create the most basic To-Do list.

Completion Goals

  • Add tasks
  • Check tasks as complete
  • Delete tasks

Complete Code

src/App.jsx:

import { useState } from 'react'
import './App.css'

function App() {
  // State management
  const [todos, setTodos] = useState([])
  const [inputValue, setInputValue] = useState('')

  // Add todo
  const addTodo = () => {
    if (inputValue.trim() === '') return
    
    const newTodo = {
      id: Date.now(),
      text: inputValue,
      completed: false
    }
    
    setTodos([...todos, newTodo])
    setInputValue('') // Clear input
  }

  // Toggle completion status
  const toggleTodo = (id) => {
    setTodos(todos.map(todo => 
      todo.id === id 
        ? { ...todo, completed: !todo.completed }
        : todo
    ))
  }

  // Delete todo
  const deleteTodo = (id) => {
    setTodos(todos.filter(todo => todo.id !== id))
  }

  // Add with Enter key
  const handleKeyPress = (e) => {
    if (e.key === 'Enter') {
      addTodo()
    }
  }

  return (
    <div className="todo-app">
      <h1>📝 My To-Do List</h1>
      
      {/* Input section */}
      <div className="input-section">
        <input
          type="text"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
          onKeyPress={handleKeyPress}
          placeholder="Enter a task..."
        />
        <button onClick={addTodo}>Add</button>
      </div>

      {/* Statistics */}
      <div className="stats">
        <p>Total: {todos.length}</p>
        <p>Completed: {todos.filter(t => t.completed).length}</p>
      </div>

      {/* Todo list */}
      <ul className="todo-list">
        {todos.length === 0 ? (
          <p className="empty">No tasks yet 🎉</p>
        ) : (
          todos.map(todo => (
            <li key={todo.id} className={todo.completed ? 'completed' : ''}>
              <input
                type="checkbox"
                checked={todo.completed}
                onChange={() => toggleTodo(todo.id)}
              />
              <span>{todo.text}</span>
              <button 
                onClick={() => deleteTodo(todo.id)}
                className="delete-btn"
              >
                Delete
              </button>
            </li>
          ))
        )}
      </ul>
    </div>
  )
}

export default App

Adding Styles

src/App.css:

.todo-app {
  max-width: 600px;
  margin: 50px auto;
  padding: 20px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.input-section {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.input-section input {
  flex: 1;
  padding: 10px;
  border: 2px solid #ddd;
  border-radius: 5px;
  font-size: 16px;
}

.input-section button {
  padding: 10px 20px;
  background: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
}

.stats {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  padding: 10px;
  background: #f5f5f5;
  border-radius: 5px;
}

.todo-list {
  list-style: none;
  padding: 0;
}

.todo-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px;
  border-bottom: 1px solid #eee;
}

.todo-list li.completed span {
  text-decoration: line-through;
  color: #999;
}

.delete-btn {
  margin-left: auto;
  padding: 5px 10px;
  background: #f44336;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

.empty {
  text-align: center;
  color: #999;
  padding: 40px;
}

Run it in your browser! You now have a fully functional To-Do app where you can add, check, and delete tasks.

 

 

9. Fetching API Data – Real-World Data Handling

In real projects, you need to fetch data from servers. Let’s learn how to call APIs using the useEffect hook.

Fetching a Simple User List

import { useState, useEffect } from 'react'

function UserList() {
  const [users, setUsers] = useState([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(null)

  useEffect(() => {
    // Runs once when component mounts
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(response => response.json())
      .then(data => {
        setUsers(data)
        setLoading(false)
      })
      .catch(err => {
        setError(err.message)
        setLoading(false)
      })
  }, []) // Empty array = run only once

  if (loading) return <p>Loading...</p>
  if (error) return <p>Error occurred: {error}</p>

  return (
    <div>
      <h2>User List</h2>
      <ul>
        {users.map(user => (
          <li key={user.id}>
            <strong>{user.name}</strong> - {user.email}
          </li>
        ))}
      </ul>
    </div>
  )
}

export default UserList

A More Convenient Method Using axios

First, install axios:

npm install axios

Then the code:

import { useState, useEffect } from 'react'
import axios from 'axios'

function PostList() {
  const [posts, setPosts] = useState([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    const fetchPosts = async () => {
      try {
        const response = await axios.get(
          'https://jsonplaceholder.typicode.com/posts'
        )
        setPosts(response.data.slice(0, 10)) // First 10 only
        setLoading(false)
      } catch (error) {
        console.error('Failed to load data:', error)
        setLoading(false)
      }
    }

    fetchPosts()
  }, [])

  if (loading) {
    return <div className="loading">Loading... ⏳</div>
  }

  return (
    <div className="post-list">
      <h2>Post List</h2>
      {posts.map(post => (
        <div key={post.id} className="post-card">
          <h3>{post.title}</h3>
          <p>{post.body}</p>
        </div>
      ))}
    </div>
  )
}

export default PostList

 

 

10. Recommended Learning Resources

Official Documentation (Most Important!)

React Official Docs: https://react.dev/learn

  • From beginner tutorials to advanced concepts, incredibly well-organized
  • Interactive examples for immediate practice

Online Courses

  • freeCodeCamp: https://www.freecodecamp.org/
  • Codecademy: React basics course
  • Scrimba: Interactive React course

Practice Platforms

  • CodeSandbox: https://codesandbox.io/
    • Write and test React code directly in the browser
  • StackBlitz: https://stackblitz.com/
    • VS Code-like environment in your browser

 

 

11. React’s Pros and Cons, Honestly

Advantages ✅

Massive Community and Ecosystem
With over 2 million developers worldwide using it, you can find solutions to any problem through search. Stack Overflow, GitHub, and Reddit have countless resources.

Reusable Components
Components built once can be used everywhere, boosting productivity. npm has tens of thousands of React component libraries ready to use.

Excellent Performance
Thanks to the Virtual DOM, it maintains fast performance even in large-scale applications.

React Native for Mobile
Your web development knowledge extends to mobile apps. Learn once, develop for web, iOS, and Android!

Abundant Job Opportunities
More than half of frontend developer job postings require React experience. Most IT companies globally use React.

Continuous Meta Support
Meta (Facebook) actively develops and maintains it, ensuring stability.

Disadvantages ❌

Initial Learning Curve
JSX syntax and component concepts can feel unfamiliar at first. Especially challenging if you’re not comfortable with JavaScript.

Fast-Paced Ecosystem
New versions and tools constantly emerge, requiring continuous learning. Tutorials from 2 years ago might already use outdated approaches.

Configuration Complexity
Since React is just a UI library, you need additional libraries for routing, state management, API calls, etc. Beginners face the dilemma of “What should I choose?”

Initial SEO Challenges
Client-Side Rendering (CSR) can be unfavorable for search engine optimization. (However, Next.js solves this!)

Bundle Size
React apps inherently have larger JavaScript file sizes, potentially causing slower initial loads. (But Code Splitting enables optimization)

 

 

12. Frequently Asked Questions (FAQ)

Q1. How long does it take to learn React?

Learning basic concepts takes 2-3 weeks, and reaching the level where you can build real projects takes 2-3 months. This assumes studying 2-3 hours daily.

Q2. Can I learn React before mastering JavaScript?

No! Learn JavaScript basics first (especially ES6+). Arrow functions, destructuring, and array methods like map/filter are essential.

Q3. React vs Vue, which should I learn?

React has an overwhelming advantage in the job market. However, Vue is also an excellent framework. For beginners, I recommend React.

Q4. Should I learn class components?

As of 2025, learning just functional components and Hooks is sufficient. New projects are almost entirely functional. However, you should be able to read legacy code.

Q5. Is React Native very different from React?

The syntax is over 90% the same, but instead of web HTML tags, you use React Native components (<View>, <Text>, etc.). If you learn React first, React Native is easy to pick up.

 

 

React has become more than just a library—it’s a massive ecosystem built by developers worldwide. It might feel unfamiliar and challenging at first, but once you understand the basic concepts, it becomes an incredibly powerful tool. If you’re starting web development or preparing for a frontend developer career, React isn’t optional—it’s essential. Join millions of developers as part of the React ecosystem!

Everything will feel unfamiliar at first, but as you build things piece by piece, you’ll discover yourself creating amazing web applications before you know it.

 

References:

 

Post Views: 21

Leave a Reply