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

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 (
    

      

        
To-Do List

        

           setTodo(e.target.value)}
          />
          
            Add
          
        

        

          {todos.map((todo) => (
            

               toggleComplete(todo.id)}
              >
                {todo.text}
              
               deleteTodo(todo.id)}
              >Delete
              
            
          ))}
        
      
    
  );
}

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 (
    

      

        

          
        

        

          {/* Calculator Buttons */}
           handleClick('7')} className="btn">7
           handleClick('8')} className="btn">8
           handleClick('9')} className="btn">9
           handleClick('/')} className="btn operator">/

           handleClick('4')} className="btn">4
           handleClick('5')} className="btn">5
           handleClick('6')} className="btn">6
           handleClick('*')} className="btn operator">*

           handleClick('1')} className="btn">1
           handleClick('2')} className="btn">2
           handleClick('3')} className="btn">3
           handleClick('-')} className="btn operator">-

           handleClick('0')} className="btn col-span-2">0
           handleClick('.')} className="btn">.
           handleClick('+')} className="btn operator">+

          C
          =
        
      
    
  );
}

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 (
    

      

        
Quiz App

        {isQuizFinished ? (
          

            
Your Score: {score} / {questions.length}
            
              Restart Quiz
            
          
        ) : (
          

            

              

                {questions[currentQuestionIndex].question}
              
              

                {questions[currentQuestionIndex].options.map((option, index) => (
                  

                    
                    {option}
                  
                ))}
              
            
            

              
                {currentQuestionIndex < questions.length - 1 ? 'Next' : 'Finish'}
              
            
          
        )}
      
    
  );
}

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.