React - Dhisidda Is-dhexgalyo Isticmaale oo Casri ah

React waxay si weyn u beddeshay qaabka loo sameeyo barnaamijyada shabakadda. Qaab-dhismeedkeeda ku salaysan qaybaha (components) iyo DOM-keeda dhijitaalka ah (virtual DOM) ayaa ka dhigaya abuurista is-dhexgalyo firfircoon mid sahlan oo wax-ku-ool ah. Aan dhisno barnaamij dhammaystiran oo aynu sahaminno awoodaha xooggan ee React!

🌟 Maxaa React lagu doortaa?

React waxay hoggaamisay horumarka dhinaca hore ee shabakadaha sababo adag dartood:

• 🎯 Ku-saleysan Qaybo: Waxaad dhisaysaa qaybo gooni u taagan oo maamula state-kooda.
• ⚡ Virtual DOM: Waxay bixisaa cusboonaysiin iyo sawirid si aad u degdeg badan.
• 🔄 Hab Sheegis (Declarative): Kaliya ku sheeg React sida UI-gu u ekaanayo, iyadaa qabata faahfaahinta inteeda kale.
• 🛠️ Qalab Horumarineed: Debugging iyo khibrad horumarineed oo heer sare ah.
• 📚 Deegaan ballaaran: Kumannaan maktabado iyo qalabyo ah oo diyaar kuu ah.
• 💼 Heer Warshadeed: Waxaa adeegsada shirkado waaweyn sida Facebook, Netflix, iyo Airbnb.

React marka la barbar dhigo Framework-yada kale

Astaanta	React	Vue	Angular
Heerka Barashada	Dhexdhexaad	Fudud	Adag
Waxqabad	Aad u Wanaagsan	Aad u Wanaagsan	Wanaagsan
Cabirka Bundle-ka	Yar	Ka yar	Weyn
Bulshada	Aad u weyn	Kor u kacaysa	Weyn
Ku Habboon	Dhammaan cabbirrada	Mashruucyo yaryar–dhexdhexaad	Shirkado waaweyn

🚀 Sida Loo Bilaabo

Shuruudaha Hore

# Hubi nooca Node.js (18+)
node --version

# Hubi nooca npm
npm --version

Abuur Barnaamij React ah

# Adeegso Create React App (CRA)
npx create-react-app my-task-app
cd my-task-app

# Ama isticmaal Vite (casri ah oo degdeg badan)
npm create vite@latest my-task-app -- --template react
cd my-task-app
npm install

Qaab-dhismeedka Mashruuca

my-task-app/
├── public/
│   └── index.html
├── src/
│   ├── components/
│   │   ├── TaskList.jsx
│   │   ├── TaskItem.jsx
│   │   └── TaskForm.jsx
│   ├── hooks/
│   │   └── useTasks.js
│   ├── context/
│   │   └── TaskContext.jsx
│   ├── utils/
│   │   └── helpers.js
│   ├── App.jsx
│   ├── App.css
│   └── index.js
├── package.json
└── README.md

🎯 Dhisidda App Maareynta Hawlaha

Aan dhisno barnaamij hawl-maareyn oo dhamaystiran adigoo adeegsanaya qaabab React oo casri ah.

Tallaabada 1: Qaab-dhismeedka Qaybaha Aasaasiga ah

Abuur src/App.jsx:

import React, { useState, useEffect } from 'react';
import './App.css';
import TaskForm from './components/TaskForm';
import TaskList from './components/TaskList';
import TaskStats from './components/TaskStats';

function App() {
  const [tasks, setTasks] = useState([]);
  const [filter, setFilter] = useState('all');

  // Soo rar hawlaha marka ay app-ku furmo
  useEffect(() => {
    const savedTasks = localStorage.getItem('tasks');
    if (savedTasks) {
      setTasks(JSON.parse(savedTasks));
    }
  }, []);

  // Kaydi hawlaha mar kasta oo ay is beddelaan
  useEffect(() => {
    localStorage.setItem('tasks', JSON.stringify(tasks));
  }, [tasks]);

  // Ku dar hawl cusub
  const addTask = (taskText) => {
    const newTask = {
      id: Date.now(),
      text: taskText,
      completed: false,
      createdAt: new Date().toISOString(),
    };
    setTasks([...tasks, newTask]);
  };

  // Beddel heerka dhammaystirka
  const toggleTask = (id) => {
    setTasks(tasks.map(task =>
      task.id === id ? { ...task, completed: !task.completed } : task
    ));
  };

  // Tirtir hawl
  const deleteTask = (id) => {
    setTasks(tasks.filter(task => task.id !== id));
  };

  // Sax hawl
  const editTask = (id, newText) => {
    setTasks(tasks.map(task =>
      task.id === id ? { ...task, text: newText } : task
    ));
  };

  // Nadiifi hawlaha la dhammaystiray
  const clearCompleted = () => {
    setTasks(tasks.filter(task => !task.completed));
  };

  // Shaandhee hawlaha
  const filteredTasks = tasks.filter(task => {
    if (filter === 'active') return !task.completed;
    if (filter === 'completed') return task.completed;
    return true;
  });

  return (
    <div className="app">
      <header className="app-header">
        <h1>⚛️ React Task Manager</h1>
        <p>Ku habboonow oo sii ahaaw mid wax soo saar leh</p>
      </header>

      <main className="app-main">
        <TaskForm onAddTask={addTask} />
        
        <TaskStats
          total={tasks.length}
          completed={tasks.filter(t => t.completed).length}
          active={tasks.filter(t => !t.completed).length}
        />

        <div className="filter-buttons">
          <button
            className={filter === 'all' ? 'active' : ''}
            onClick={() => setFilter('all')}
          >
            Dhamaan
          </button>
          <button
            className={filter === 'active' ? 'active' : ''}
            onClick={() => setFilter('active')}
          >
            Firfircoon
          </button>
          <button
            className={filter === 'completed' ? 'active' : ''}
            onClick={() => setFilter('completed')}
          >
            La dhammeeyay
          </button>
        </div>

        <TaskList
          tasks={filteredTasks}
          onToggleTask={toggleTask}
          onDeleteTask={deleteTask}
          onEditTask={editTask}
        />

        {tasks.some(t => t.completed) && (
          <button className="clear-completed" onClick={clearCompleted}>
            Nadiifi kuwa la dhammeeyay
          </button>
        )}
      </main>
    </div>
  );
}

export default App;

Tallaabada 2: Qaybta Foomka Hawsha

Abuur src/components/TaskForm.jsx:

import React, { useState } from 'react';
import './TaskForm.css';

function TaskForm({ onAddTask }) {
  const [taskText, setTaskText] = useState('');
  const [error, setError] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    
    // Hubinta xogta
    if (!taskText.trim()) {
      setError('Hawshu ma noqon karto mid madhan');
      return;
    }

    if (taskText.length > 100) {
      setError('Hawshu way dheeraatay (ugu badnaan 100 xaraf)');
      return;
    }

    // Ku dar hawl
    onAddTask(taskText.trim());
    
    // Nadiifi foomka
    setTaskText('');
    setError('');
  };

  return (
    <form className="task-form" onSubmit={handleSubmit}>
      <div className="input-group">
        <input
          type="text"
          value={taskText}
          onChange={(e) => {
            setTaskText(e.target.value);
            setError('');
          }}
          placeholder="Maxaad doonaysaa inaad qabato?"
          className={error ? 'error' : ''}
          maxLength={100}
        />
        <button type="submit">
          Ku dar hawl
        </button>
      </div>
      {error && <p className="error-message">{error}</p>}
      <p className="char-count">
        {taskText.length}/100 xaraf
      </p>
    </form>
  );
}

export default TaskForm;

Tallaabada 3: Qaybta Liiska Hawlaha

Abuur src/components/TaskList.jsx:

import React from 'react';
import TaskItem from './TaskItem';
import './TaskList.css';

function TaskList({ tasks, onToggleTask, onDeleteTask, onEditTask }) {
  if (tasks.length === 0) {
    return (
      <div className="empty-state">
        <div className="empty-icon">📝</div>
        <h3>Weli hawlo ma jiraan</h3>
        <p>Kudar hawl si aad u bilaabato!</p>
      </div>
    );
  }

  return (
    <ul className="task-list">
      {tasks.map(task => (
        <TaskItem
          key={task.id}
          task={task}
          onToggle={onToggleTask}
          onDelete={onDeleteTask}
          onEdit={onEditTask}
        />
      ))}
    </ul>
  );
}

export default TaskList;

Tallaabada 4: Qaybta Task Item

Abuur src/components/TaskItem.jsx:

import React, { useState } from 'react';
import './TaskItem.css';

function TaskItem({ task, onToggle, onDelete, onEdit }) {
  const [isEditing, setIsEditing] = useState(false);
  const [editText, setEditText] = useState(task.text);

  const handleEdit = () => {
    if (editText.trim() && editText !== task.text) {
      onEdit(task.id, editText.trim());
    } else {
      setEditText(task.text);
    }
    setIsEditing(false);
  };

  const handleKeyDown = (e) => {
    if (e.key === 'Enter') {
      handleEdit();
    } else if (e.key === 'Escape') {
      setEditText(task.text);
      setIsEditing(false);
    }
  };

  return (
    <li className={`task-item ${task.completed ? 'completed' : ''}`}>
      <div className="task-content">
        <input
          type="checkbox"
          checked={task.completed}
          onChange={() => onToggle(task.id)}
          className="task-checkbox"
        />
        
        {isEditing ? (
          <input
            type="text"
            value={editText}
            onChange={(e) => setEditText(e.target.value)}
            onBlur={handleEdit}
            onKeyDown={handleKeyDown}
            className="task-edit-input"
            autoFocus
          />
        ) : (
          <span
            className="task-text"
            onDoubleClick={() => !task.completed && setIsEditing(true)}
          >
            {task.text}
          </span>
        )}
      </div>

      <div className="task-actions">
        {!task.completed && !isEditing && (
          <button
            onClick={() => setIsEditing(true)}
            className="btn-edit"
            title="Sax hawshan"
          >
            ✏️
          </button>
        )}
        <button
          onClick={() => onDelete(task.id)}
          className="btn-delete"
          title="Tirtir hawshan"
        >
          🗑️
        </button>
      </div>

      <div className="task-meta">
        <small>{new Date(task.createdAt).toLocaleDateString()}</small>
      </div>
    </li>
  );
}

export default TaskItem;

Tallaabada 5: Qaybta Tirakoobka Hawlaha

Abuur src/components/TaskStats.jsx:

import React from 'react';
import './TaskStats.css';

function TaskStats({ total, completed, active }) {
  const completionRate = total > 0 ? Math.round((completed / total) * 100) : 0;

  return (
    <div className="task-stats">
      <div className="stat-card">
        <div className="stat-icon">📊</div>
        <div className="stat-content">
          <p className="stat-value">{total}</p>
          <p className="stat-label">Hawlaha oo dhan</p>
        </div>
      </div>

      <div className="stat-card">
        <div className="stat-icon">✅</div>
        <div className="stat-content">
          <p className="stat-value">{completed}</p>
          <p className="stat-label">La dhammeeyay</p>
        </div>
      </div>

      <div className="stat-card">
        <div className="stat-icon">⏳</div>
        <div className="stat-content">
          <p className="stat-value">{active}</p>
          <p className="stat-label">Firfircoon</p>
        </div>
      </div>

      <div className="stat-card">
        <div className="stat-icon">📈</div>
        <div className="stat-content">
          <p className="stat-value">{completionRate}%</p>
          <p className="stat-label">Heerka dhammeeynta</p>
        </div>
      </div>
    </div>
  );
}

export default TaskStats;

🎨 Qurxinta CSS

Abuur src/App.css:

.app {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 2rem;
}

.app-header {
  text-align: center;
  color: white;
  margin-bottom: 2rem;
}

.app-header h1 {
  font-size: 3rem;
  margin-bottom: 0.5rem;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}

.app-main {
  max-width: 800px;
  margin: 0 auto;
  background: white;
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.filter-buttons {
  display: flex;
  gap: 1rem;
  margin: 2rem 0;
}

.filter-buttons button {
  flex: 1;
  padding: 0.75rem;
  border: 2px solid #e0e0e0;
  background: white;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
}

.filter-buttons button.active {
  background: #667eea;
  color: white;
  border-color: #667eea;
}

.clear-completed {
  width: 100%;
  margin-top: 2rem;
  padding: 1rem;
  background: #ff6b6b;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s;
}

.clear-completed:hover {
  background: #ff5252;
}

🎣 Hooks Gaar ah

Abuur src/hooks/useTasks.js:

import { useState, useEffect } from 'react';

export function useTasks() {
  const [tasks, setTasks] = useState([]);
  const [loading, setLoading] = useState(true);

  // Soo rar hawlaha kaydsan
  useEffect(() => {
    try {
      const savedTasks = localStorage.getItem('tasks');
      if (savedTasks) {
        setTasks(JSON.parse(savedTasks));
      }
    } catch (error) {
      console.error('Khalad ayaa ka dhacay raridda hawlaha:', error);
    } finally {
      setLoading(false);
    }
  }, []);

  // Kaydi hawlaha markay is beddelaan
  useEffect(() => {
    if (!loading) {
      localStorage.setItem('tasks', JSON.stringify(tasks));
    }
  }, [tasks, loading]);

  const addTask = (taskText) => {
    const newTask = {
      id: Date.now(),
      text: taskText,
      completed: false,
      createdAt: new Date().toISOString(),
    };
    setTasks(prev => [...prev, newTask]);
  };

  const toggleTask = (id) => {
    setTasks(prev =>
      prev.map(task =>
        task.id === id ? { ...task, completed: !task.completed } : task
      )
    );
  };

  const deleteTask = (id) => {
    setTasks(prev => prev.filter(task => task.id !== id));
  };

  const editTask = (id, newText) => {
    setTasks(prev =>
      prev.map(task =>
        task.id === id ? { ...task, text: newText } : task
      )
    );
  };

  const clearCompleted = () => {
    setTasks(prev => prev.filter(task => !task.completed));
  };

  return {
    tasks,
    loading,
    addTask,
    toggleTask,
    deleteTask,
    editTask,
    clearCompleted,
  };
}

🌐 Context API si loogu Maareeyo State-ka

Abuur src/context/TaskContext.jsx:

import React, { createContext, useContext, useState, useEffect } from 'react';

const TaskContext = createContext();

export function TaskProvider({ children }) {
  const [tasks, setTasks] = useState([]);
  const [filter, setFilter] = useState('all');

  // Soo rar hawlaha marka hore
  useEffect(() => {
    const saved = localStorage.getItem('tasks');
    if (saved) setTasks(JSON.parse(saved));
  }, []);

  // Kaydi hawlaha markay is beddelaan
  useEffect(() => {
    localStorage.setItem('tasks', JSON.stringify(tasks));
  }, [tasks]);

  const addTask = (text) => {
    setTasks([...tasks, {
      id: Date.now(),
      text,
      completed: false,
      createdAt: new Date().toISOString(),
    }]);
  };

  const toggleTask = (id) => {
    setTasks(tasks.map(t =>
      t.id === id ? { ...t, completed: !t.completed } : t
    ));
  };

  const deleteTask = (id) => {
    setTasks(tasks.filter(t => t.id !== id));
  };

  const value = {
    tasks,
    filter,
    setFilter,
    addTask,
    toggleTask,
    deleteTask,
  };

  return (
    <TaskContext.Provider value={value}>
      {children}
    </TaskContext.Provider>
  );
}

export function useTasks() {
  const context = useContext(TaskContext);
  if (!context) {
    throw new Error('useTasks waa in lagu isticmaalaa gudaha TaskProvider');
  }
  return context;
}

⚡ Qaabab React oo Horumarsan

1. Memoization iyadoo la adeegsanayo useMemo

import { useMemo } from 'react';

function TaskList({ tasks }) {
  const sortedTasks = useMemo(() => {
    return [...tasks].sort((a, b) => 
      new Date(b.createdAt) - new Date(a.createdAt)
    );
  }, [tasks]);

  return <div>{/* soo bandhig sortedTasks */}</div>;
}

2. Habaynta Callback-ga iyadoo la adeegsanayo useCallback

import { useCallback } from 'react';

function App() {
  const handleTaskAdd = useCallback((text) => {
    // Ku dar hawl cusub
  }, []);

  return <TaskForm onAdd={handleTaskAdd} />;
}

3. useReducer si loogu maareeyo state adag

import { useReducer } from 'react';

const taskReducer = (state, action) => {
  switch (action.type) {
    case 'ADD_TASK':
      return [...state, action.payload];
    case 'TOGGLE_TASK':
      return state.map(task =>
        task.id === action.payload
          ? { ...task, completed: !task.completed }
          : task
      );
    case 'DELETE_TASK':
      return state.filter(task => task.id !== action.payload);
    default:
      return state;
  }
};

function App() {
  const [tasks, dispatch] = useReducer(taskReducer, []);

  const addTask = (text) => {
    dispatch({ type: 'ADD_TASK', payload: { id: Date.now(), text } });
  };

  return <div>{/* Ku dhis UI-gaaga */}</div>;
}

4. Hook gaar ah oo loogu talagalay wicitaannada API

import { useState, useEffect } from 'react';

function useApi(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch(url)
      .then(res => res.json())
      .then(setData)
      .catch(setError)
      .finally(() => setLoading(false));
  }, [url]);

  return { data, loading, error };
}

// Isticmaalka
function ProductList() {
  const { data, loading, error } = useApi('/api/products');

  if (loading) return <div>Fadlan sug...</div>;
  if (error) return <div>Khalad: {error.message}</div>;

  return <div>{/* soo bandhig alaabta */}</div>;
}

🚀 Hagaajinta Waxqabadka

1. Kala-qaybinta koodhka (Code Splitting)

import { lazy, Suspense } from 'react';

const TaskList = lazy(() => import('./components/TaskList'));

function App() {
  return (
    <Suspense fallback={<div>Fadlan sug...</div>}>
      <TaskList />
    </Suspense>
  );
}

2. React.memo si loogu yareeyo dib-u-sawiridda

import { memo } from 'react';

const TaskItem = memo(({ task, onToggle, onDelete }) => {
  return <li>{/* wax ka qabso hawsha */}</li>;
}, (prevProps, nextProps) => {
  // Ku celceli kaliya haddii hawshu is beddesho
  return prevProps.task.id === nextProps.task.id &&
         prevProps.task.completed === nextProps.task.completed;
});

3. Virtualization loogu talagalay liisaska dhaadheer

npm install react-window

import { FixedSizeList } from 'react-window';

function LargeTaskList({ tasks }) {
  return (
    <FixedSizeList
      height={600}
      itemCount={tasks.length}
      itemSize={50}
    >
      {({ index, style }) => (
        <div style={style}>
          {tasks[index].text}
        </div>
      )}
    </FixedSizeList>
  );
}

🧪 Tijaabinta Qaybaha React

npm install --save-dev @testing-library/react @testing-library/jest-dom

import { render, screen, fireEvent } from '@testing-library/react';
import TaskForm from './TaskForm';

test('adds a new task', () => {
  const handleAdd = jest.fn();
  render(<TaskForm onAddTask={handleAdd} />);

  const input = screen.getByPlaceholderText(/maxaad doonaysaa inaad qabato/i);
  const button = screen.getByText(/ku dar hawl/i);

  fireEvent.change(input, { target: { value: 'Hawl cusub' } });
  fireEvent.click(button);

  expect(handleAdd).toHaveBeenCalledWith('Hawl cusub');
});

📦 Maktabado React oo Caan ah

Maareynta State-ka

• Redux Toolkit: Maareynta state adag oo nidaamsan
• Zustand: Ikhtiyaar fudud oo miisaan yar
• Jotai: Maareynta state kala qayb-samaynta (atomic)

Routing

• React Router: Xalka routing-ka ee caadiga ah

Maktabado UI

• Material-UI: Naqshadda Material Design ee Google
• Ant Design: Qalab UI oo heer shirkadeed ah
• Chakra UI: Maktabad component oo la heli karo oo la jaanqaadaysa helitaanka (accessibility)

Maareynta Foomamka

• React Hook Form: Foomam waxqabad sare leh
• Formik: Maktabad foom oo caanka ah

🚀 Daabacaadda (Deployment)

# Dhis nooca wax-soo-saarka
npm run build

# Tijaabi dhismaha wax-soo-saarka gudaha
npm install -g serve
serve -s build

Ku daabac:

• Vercel: vercel --prod
• Netlify: Jiid oo dhig galka build-ka
• GitHub Pages: npm run deploy

🎓 Qodobbo Muhiim ah

• Components: Dhis qaybo dib loo adeegsan karo oo isku-dhafmi kara
• Hooks: Ku maamul state iyo saameynaha dibadda si habsami leh
• Virtual DOM: React ayaa si hufan u cusboonaysiisa UI-ga
• Unidirectional Data Flow: Waxay ka dhigtaa app-ka mid la saadaalin karo
• Context API: Ku wadaag state adigoon props badan ku gudbin
• Performance: U hagaaji waxqabadka iyadoo la adeegsanayo memo, useMemo, iyo useCallback

📚 Maxaa Xiga?

• Baro Next.js si aad ugu fuliso server-side rendering
• Sahami React Native si aad u dhisto barnaamijyo moobeel
• Ku xeeldheerow TypeScript markaad la shaqaynayso React
• Baro qaabab horumarsan (HOCs, Render Props)
• Dhis mashruucyo dhab ah oo aad ku tababarto

Deegaanka React waa mid ballaaran oo awood badan. Sii wad dhisidda, sii wad barashada!

---

Diyaar ma u tahay inaad React si qoto dheer u barato? Ka eeg React course-keena ama nagu xidh Twitter!