⚡

JavaScript Frameworks

Explore the most popular JavaScript frameworks and libraries including React, Vue, Angular, and more for building modern web applications.

🛠️ Try This First: Set Up Your First React Project

Create a new React project

Use Vite for a fast, modern setup (requires Node.js):

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

Create your first component

Replace the content in src/App.jsx:

function App() {
  const name = "World"
  
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <button onClick={() => alert('Button clicked!')}>
        Click me
      </button>
    </div>
  )
}

export default App

Add state to make it interactive

Use useState to track data that changes:

import { useState } from 'react'

function App() {
  const [count, setCount] = useState(0)
  
  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  )
}

Break it into components

Create reusable pieces:

function Counter({ initialValue = 0 }) {
  const [count, setCount] = useState(initialValue)
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
      <button onClick={() => setCount(count - 1)}>-</button>
    </div>
  )
}

function App() {
  return (
    <div>
      <h1>My Counters</h1>
      <Counter initialValue={5} />
      <Counter initialValue={10} />
    </div>
  )
}

💡 Save your files and see the changes instantly in your browser at http://localhost:5173

JavaScript Framework Ecosystem

Major Frameworks

2013

React Released

Millions

Developers

Universal

Platform Support

Why Use JavaScript Frameworks?

Component-Based Architecture

Build encapsulated components that manage their own state

Reusable UI components make development faster and more maintainable

Virtual DOM

Efficient updates through virtual representation of the DOM

Better performance by minimizing expensive DOM operations

Rich Ecosystem

Vast collection of libraries, tools, and community resources

NPM packages, development tools, and active community support

Cross-Platform

Build for web, mobile, and desktop from the same codebase

React Native, Electron, and other tools extend JavaScript everywhere

🛠️ Popular JavaScript Frameworks

JavaScript frameworks provide structure, reusable components, and powerful tools for building modern web applications. Each framework has its strengths and is suited for different types of projects.

React Component Examplejavascript

12345678910111213141516171819202122232425262728293031323334
// Functional Component with Hooks
import React, { useState, useEffect } from 'react';
function UserProfile({ userId }) {
    const [user, setUser] = useState(null);
    const [loading, setLoading] = useState(true);
    useEffect(() => {
        async function fetchUser() {
            try {
                const response = await fetch(`/api/users/${userId}`);
                const userData = await response.json();
                setUser(userData);
            } catch (error) {
                console.error('Failed to fetch user:', error);
            } finally {
                setLoading(false);
            }
        }
        fetchUser();
    }, [userId]);
    if (loading) return <div>Loading...</div>;
    if (!user) return <div>User not found</div>;
    return (
        <div className="user-profile">
            <img src={user.avatar} alt={user.name} />
            <h2>{user.name}</h2>
            <p>{user.email}</p>
        </div>
    );
}

Express.js Server Setupjavascript

1234567891011121314151617181920212223242526
// Express.js Server Setup
const express = require('express');
const cors = require('cors');
const helmet = require('helmet');
const app = express();
const PORT = process.env.PORT || 3000;
// Middleware
app.use(helmet()); // Security headers
app.use(cors()); // Enable CORS
app.use(express.json()); // Parse JSON bodies
// Routes
app.get('/api/users', async (req, res) => {
    try {
        const users = await User.find().select('-password');
        res.json(users);
    } catch (error) {
        res.status(500).json({ error: 'Failed to fetch users' });
    }
});
app.listen(PORT, () => {
    console.log(`Server running on port ${PORT}`);
});

Framework Comparison

Name	Description	Difficulty	Popularity	Use Case
React	A JavaScript library for building user interfaces	Intermediate	Very High	Complex UIs, SPAs
Vue.js	Progressive framework with gentle learning curve	Beginner	High	Rapid prototyping, PWAs
Angular	Full-featured framework for large-scale applications	Advanced	High	Enterprise applications
Node.js	JavaScript runtime for server-side development	Intermediate	Very High	APIs, Real-time apps