Maqaalkan wuxuu ku saabsan yahay mawduuc muhiim ah oo ku saabsan ganacsiga online-ka.
⚛️ React.js in 2026: React.js is used by over 40% of professional web developers globally. It powers Facebook, Instagram, Netflix, Airbnb, and thousands of startups. React knowledge appears in over 60% of frontend job postings in 2026. Average React developer salary: $110,000–$155,000.
$110K
Avg React Dev Salary
60%+
Frontend Jobs Require React
2013
Year React Was Released
1. Why React in 2026?
React is a JavaScript library for building user interfaces, maintained by Meta. Instead of writing one massive HTML page, you build applications from small, reusable components — each responsible for its own rendering and behavior. This component model scales beautifully, which is why companies like Netflix, Airbnb, Atlassian, and thousands of startups chose React for their frontends.
React's virtual DOM efficiently updates only the parts of the page that change, making applications fast even with complex, frequently-updating UIs. Combined with Next.js for server-side rendering, React can power everything from static marketing sites to complex real-time dashboards.
2. Setting Up a React Project
# Create a new React project with Vite (fastest in 2026)
npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev
# With TypeScript (recommended for professional work)
npm create vite@latest my-app -- --template react-ts
# Project structure
# src/
# App.jsx — Root component
# main.jsx — Entry point
# components/ — Your reusable components
# hooks/ — Custom React hooks
# pages/ — Page components
# utils/ — Helper functions
3. Components and JSX
A React component is a function that returns JSX (HTML-like syntax). JSX lets you write UI structure directly in JavaScript, making components self-contained and readable.
// Simple functional component
function ProductCard({ name, price, rating, image }) {
const stars = Math.round(rating);
return (
<div className="product-card">
<img src={image} alt={name} />
<h3>{name}</h3>
<p className="price">${price.toFixed(2)}</p>
<div className="rating">
{"★".repeat(stars)}{"☆".repeat(5 - stars)}
</div>
</div>
);
}
// Using the component
function ProductList() {
const products = [
{ id: 1, name: "Laptop", price: 999, rating: 4.5, image: "/laptop.jpg" },
{ id: 2, name: "Mouse", price: 49, rating: 4.8, image: "/mouse.jpg" },
];
return (
<div className="product-grid">
{products.map(product => (
<ProductCard key={product.id} {...product} />
))}
</div>
);
}
4. State with useState Hook
import { useState } from "react";
function ShoppingCart() {
const [items, setItems] = useState([]);
const [total, setTotal] = useState(0);
const addItem = (product) => {
setItems(prev => [...prev, product]);
setTotal(prev => prev + product.price);
};
const removeItem = (id) => {
const item = items.find(i => i.id === id);
setItems(prev => prev.filter(i => i.id !== id));
setTotal(prev => prev - item.price);
};
return (
<div>
<h2>Cart ({items.length} items)</h2>
{items.map(item => (
<div key={item.id}>
{item.name} — ${item.price}
<button onClick={() => removeItem(item.id)}>Remove</button>
</div>
))}
<strong>Total: ${total.toFixed(2)}</strong>
</div>
);
}
5. useEffect: Side Effects
import { useState, useEffect } from "react";
function UserProfile({ userId }) {
const [user, setUser] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
// Runs after render when userId changes
setLoading(true);
setError(null);
fetch(`/api/users/${userId}`)
.then(res => {
if (!res.ok) throw new Error("User not found");
return res.json();
})
.then(data => {
setUser(data);
setLoading(false);
})
.catch(err => {
setError(err.message);
setLoading(false);
});
}, [userId]); // Re-run when userId changes
if (loading) return <div>Loading...</div>;
if (error) return <div>Error: {error}</div>;
return <div><h2>{user.name}</h2><p>{user.email}</p></div>;
}
6. Context API: Global State
import { createContext, useContext, useState } from "react";
const AuthContext = createContext();
// Wrap your entire app with this provider
export function AuthProvider({ children }) {
const [user, setUser] = useState(null);
const login = async (email, password) => {
const res = await fetch("/api/auth/login", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ email, password })
});
const data = await res.json();
if (!res.ok) throw new Error(data.error);
setUser(data.user);
localStorage.setItem("token", data.token);
};
const logout = () => {
setUser(null);
localStorage.removeItem("token");
};
return (
<AuthContext.Provider value={{ user, login, logout, isAuthenticated: !!user }}>
{children}
</AuthContext.Provider>
);
}
// Use this hook in any component
export const useAuth = () => useContext(AuthContext);
7. React Router Navigation
npm install react-router-dom
// App.jsx
import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
function App() {
const { isAuthenticated } = useAuth();
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/blog" element={<Blog />} />
<Route path="/blog/:slug" element={<BlogPost />} />
{/* Protected route */}
<Route
path="/dashboard"
element={isAuthenticated ? <Dashboard /> : <Navigate to="/login" />}
/>
<Route path="*" element={<NotFound />} />
</Routes>
</BrowserRouter>
);
}
8. What to Learn After React
▲
Next.js
The production React framework. Server-side rendering, static generation, API routes. Used by Netflix and TikTok.
Learn NextMost Important🔷
TypeScript + React
Type-safe React development. Nearly mandatory in professional environments. Takes 2-4 weeks to add.
Professional StandardHigh Priority⚡
TanStack Query
Data fetching and caching library. Makes API calls, loading states, and error handling trivial.
Very Recommended🐻
Zustand
Simple global state management. Alternative to Context for complex shared state. Easy to learn.
State Management🎯 React Learning Path
- Learn JavaScript fundamentals first — components, hooks, and JSX require solid JS knowledge
- Master the three core hooks: useState, useEffect, and useContext
- Build 3+ projects before learning Redux, Next.js, or other advanced tools
- TypeScript: add it after you are comfortable with React basics (2-3 weeks)
- Next.js is the natural next step — it builds directly on React knowledge
</div>
Never miss a story from us, subscribe to our newsletter
💬 Faallada iyo Su'aalaha
Su'aal ma qabtaa? Wax ka qor hoose — waxaan kuu jawaabi doonaa sida ugu dhaqsaha badan. Faalladaada muhiim ayay noogu tahay!