Marka aad rabto inaad barato Programming waxaa muhiim ah inaad practice badan aad sameyso si aad u noqoto qof ku fiican Programming.

Hirkaab Academy waxa ay bixisaa Courses kala duwan waxaanaa courses-kaas kamid ah React Js.

Dhamaan Casharada React Js iyo Courses Linkiyadooda waa kuwaan.

Become React Developer For FREE

React Course Full Course For FREE on Youtube:-

React Basics:- https://www.youtube.com/playlist?list=PLUmY9cusB7UvWh_PJ_1WDBrtePl7jg7hi

React Basic Projects:- https://youtube.com/playlist?list=PLUmY9cusB7UsbOXQEJjc18JFoLDcvd5zF&si=S7A-2CnbVQZ4_WKE

React Intermediate Projects:- https://youtube.com/playlist?list=PLUmY9cusB7UvT6N5h3qsRnXX9lVriwvYx&si=GH9R-R37wvz5T73r

React js Full Course FREE at https://hirkaab.com

React Js

Bloggaan waxaad ku arki doontaa 3 Projects oo Beginner Projects ah, Projects-kaas waxaad isticmaalnay React Js – Vite iyo Tailwindcss oo aan ku style-kareyney.

Tailwind CSS:- https://v3.tailwindcss.com/docs/guides/vite

React Js with Vite:- https://vite.dev/guide/

1- Todolist App

Projects 1aad waa Todolist oo leh afarta features-ka ee ugu muhiimsan create, read, update iyo delete.

Code-ka oo dhamaystiran waxaad kala degeysaa Github-ka.

https://github.com/Eng-Mohamed-Dek/Todolist-App-React-Js

Sidaan ayaan u sameynay Todolist.

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

function App() {
  const [todo, setTodo] = useState('');
  const [todos, setTodos] = useState([]);

  // addTodolist 
  const addTodo = () => {
    if (todo.trim()) {
      const newTodo = {
        id: Date.now(),
        text: todo,
        completed: false,
      };
      setTodos([...todos, newTodo]);
      setTodo('');
    }
  };

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

  // updateTodolist
  const toggleComplete = (id) => {
    const updatedTodos = todos.map(todo =>
      todo.id === id ? { ...todo, completed: !todo.completed } : todo
    );
    setTodos(updatedTodos);
  };

  // Load todos from localStorage
  useEffect(() => {
    const storedTodos = JSON.parse(localStorage.getItem('todos'));
    if (storedTodos) {
      setTodos(storedTodos);
    }
  }, []);

  // Save todos to localStorage
  useEffect(() => {
    if (todos.length > 0) {
      localStorage.setItem('todos', JSON.stringify(todos));
    }
  }, [todos]);

  return (
    <div className="min-h-screen bg-white flex items-center justify-center p-4">
      <div className="max-w-md w-full bg-white p-6 rounded-lg shadow-lg">
        <h1 className="text-3xl font-semibold text-center text-gray-800 mb-6">To-Do List</h1>

        <div className="flex mb-4">
          <input
            type="text"
            className="w-full p-3 border border-gray-300 rounded-l-lg"
            placeholder="Add a new task"
            value={todo}
            onChange={(e) => setTodo(e.target.value)}
          />
          <button
            className="px-10 py-3 bg-primary text-white rounded-r-lg"
            onClick={addTodo}
          >
            Add
          </button>
        </div>

        <ul className="space-y-4">
          {todos.map((todo) => (
            <li
              key={todo.id}
              className={`flex items-center justify-between py-2 px-3 border-b border-gray-200 rounded-lg ${todo.completed ? 'bg-green-100' : 'bg-white'
                }`}
            >
              <span
                className={`text-lg ${todo.completed ? 'line-through text-gray-500' : 'text-gray-800'}`}
                onClick={() => toggleComplete(todo.id)}
              >
                {todo.text}
              </span>
              <button
                className="text-red-500 hover:text-red-700"
                onClick={() => deleteTodo(todo.id)}
              >Delete
              </button>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

export default App;

2- Calculator App

Projects 2aad waa Calculator oo leh funtionalities-ka oo dhan.

Code-ka oo dhamaystiran waxaad kala degeysaa Github-ka.

https://github.com/Eng-Mohamed-Dek/Calculator-React-Js

Sidaan ayaan u sameynay Calculator-ka.

import React, { useState } from 'react';

function App() {
  const [input, setInput] = useState('');

  const handleClick = (value) => {
    setInput((prevInput) => prevInput + value);
  };

  const handleClear = () => {
    setInput('');
  };

  const handleCalculate = () => {
    try {
      setInput(eval(input));
    } catch (e) {
      setInput('Error');
    }
  };

  return (
    <div className="min-h-screen bg-white flex items-center justify-center">
      <div className="w-96 p-6 bg-white rounded-lg shadow-xl">
        <div className="mb-4">
          <input
            type="text"
            className="w-full p-4 text-3xl text-right bg-gray-100 border-2 border-gray-300 rounded-lg focus:outline-none"
            value={input}
            readOnly
          />
        </div>

        <div className="grid grid-cols-4 gap-4">
          {/* Calculator Buttons */}
          <button onClick={() => handleClick('7')} className="btn">7</button>
          <button onClick={() => handleClick('8')} className="btn">8</button>
          <button onClick={() => handleClick('9')} className="btn">9</button>
          <button onClick={() => handleClick('/')} className="btn operator">/</button>

          <button onClick={() => handleClick('4')} className="btn">4</button>
          <button onClick={() => handleClick('5')} className="btn">5</button>
          <button onClick={() => handleClick('6')} className="btn">6</button>
          <button onClick={() => handleClick('*')} className="btn operator">*</button>

          <button onClick={() => handleClick('1')} className="btn">1</button>
          <button onClick={() => handleClick('2')} className="btn">2</button>
          <button onClick={() => handleClick('3')} className="btn">3</button>
          <button onClick={() => handleClick('-')} className="btn operator">-</button>

          <button onClick={() => handleClick('0')} className="btn col-span-2">0</button>
          <button onClick={() => handleClick('.')} className="btn">.</button>
          <button onClick={() => handleClick('+')} className="btn operator">+</button>

          <button onClick={handleClear} className="btn clear col-span-2">C</button>
          <button onClick={handleCalculate} className="btn equal col-span-2">=</button>
        </div>
      </div>
    </div>
  );
}

export default App;

3- Quize App

Projects 3aad waa Quize App oo ah mid aad ugu wanaagsan in Quize lagu sameeyo.

Code-ka oo dhamaystiran waxaad kala degeysaa Github-ka.

https://github.com/Eng-Mohamed-Dek/Quize-App-React

Sidaan ayaan u sameynay Calculator-ka.

import React, { useState } from 'react';

const questions = [
  {
    question: 'What is the capital of Somalia?',
    options: ['Hargeysa', 'Barbara', 'Mogadisho', 'Galgaduud'],
    correctAnswer: 'Mogadisho',
  },
  {
    question: 'Which planet is known as the Red Planet?',
    options: ['Earth', 'Mars', 'Jupiter', 'Saturn'],
    correctAnswer: 'Mars',
  },
  {
    question: 'Which planet We Live in?',
    options: ['Earth', 'Mars', 'Jupiter', 'Saturn'],
    correctAnswer: 'Earth',
  },
  {
    question: 'When Hirkaab Academy Was Stablished?',
    options: ['Dec, 2024', 'Dec, 2021', 'Dec, 2023', 'Dec, 2020'],
    correctAnswer: 'Dec, 2023',
  },
  {
    question: 'How Many Students Registered in Hirkaab.com?',
    options: ['100+ Students', '600+ Students', '500+ Students', '300+ Students'] ,
    correctAnswer: '500+ Students',
  },
  {
    question: 'How Many Skills We Learn at Hirkaab.com?',
    options: ['4 Skills', '3 Skills', '1 Skills', '2 Skills',],
    correctAnswer: '4 Skills',
  }
];


function App() {
  const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
  const [score, setScore] = useState(0);
  const [selectedOption, setSelectedOption] = useState('');
  const [isQuizFinished, setIsQuizFinished] = useState(false);

  const handleOptionChange = (event) => {
    setSelectedOption(event.target.value);
  };

  const handleNextQuestion = () => {
    // scores 
    if (selectedOption === questions[currentQuestionIndex].correctAnswer) {
      setScore(score + 1);
    }

    if (currentQuestionIndex < questions.length - 1) {
      setCurrentQuestionIndex(currentQuestionIndex + 1);
      setSelectedOption('');
    } else {
      setIsQuizFinished(true);
    }
  };

  const handleRestartQuiz = () => {
    setCurrentQuestionIndex(0);
    setScore(0);
    setSelectedOption('');
    setIsQuizFinished(false);
  };

  return (
    <div className="min-h-screen bg-gray-100 flex items-center justify-center">
      <div className="w-full max-w-xl p-10 bg-white rounded-lg shadow-lg">
        <h1 className="text-4xl font-bold text-center mb-10 text-primary">Quiz App</h1>

        {isQuizFinished ? (
          <div className="text-center">
            <h2 className="text-2xl mb-4">Your Score: {score} / {questions.length}</h2>
            <button
              onClick={handleRestartQuiz}
              className="px-6 py-2 bg-primary text-white rounded-lg hover:bg-primary-hover focus:outline-none"
            >
              Restart Quiz
            </button>
          </div>
        ) : (
          <div>
            <div className="mb-6">
              <h2 className="text-xl font-semibold mb-8">
                {questions[currentQuestionIndex].question}
              </h2>
              <div className="space-y-4 grid grid-cols-2">
                {questions[currentQuestionIndex].options.map((option, index) => (
                  <div key={index} className="flex items-center">
                    <input
                      type="radio"
                      id={`option-${index}`}
                      name="option"
                      value={option}
                      checked={selectedOption === option}
                      onChange={handleOptionChange}
                      className="mr-2"
                    />
                    <label htmlFor={`option-${index}`} className="text-lg">{option}</label>
                  </div>
                ))}
              </div>
            </div>
            <div className="flex justify-between">
              <button
                onClick={handleNextQuestion}
                className="px-10 py-2 bg-primary text-white rounded-lg hover:bg-primary focus:outline-none"
                disabled={!selectedOption}
              >
                {currentQuestionIndex < questions.length - 1 ? 'Next' : 'Finish'}
              </button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

export default App;

Sidoo kale waxaad heli doontaan bloggan kale ee aan kusoo xusi doonno 3 Projects oo intermediate ah.

Waxaa rajaynaayaa inaad bloggaan aad wax baddan aad ka faa`iideen. marka wixii suaal ah qeybta comment-ka inoogu reeb.