לימוד React – יצירת אפליקציה בסיסית בסגנון ToDo-List

לימוד React – יצירת אפליקציה בסיסית בסגנון ToDo-List

יצירת אפליקציית ToDo-List היא דרך מצוינת ללמוד ולהתנסות בטכנולוגיות פיתוח מודרניות. במדריך הזה נלמד איך לבנות אפליקציית ToDo-List באמצעות React, כולל כל השלבים, דוגמאות קוד והסברים מפורטים.

הקדמה

React היא ספריית JavaScript לפיתוח ממשקי משתמש שמפותחת על ידי Facebook. React מאפשרת לנו ליצור רכיבים (components) שניתן לשלבם יחד ליצירת ממשק משתמש מורכב ודינמי.

דרישות מקדימות

לפני שנתחיל, נוודא שיש לנו את הכלים הבאים מותקנים:

  • Node.js
  • npm או yarn
  • כל עורך קוד (כגון VSCode)

שלב 1: יצירת פרויקט React חדש

נפתח פרויקט חדש באמצעות Create React App. נפתח את הטרמינל ונריץ את הפקודה הבאה:

npx create-react-app todo-list

לאחר השלמת הפקודה, ניכנס לתיקיית הפרויקט:

cd todo-list

ונריץ את הפרויקט:

npm start

שלב 2: מבנה הפרויקט

מבנה הפרויקט שנוצר עבורנו כולל מספר תיקיות וקבצים. התיקיות והקבצים החשובים עבורנו הם:

  • src: בתיקייה זו נכתבו כל רכיבי ה-React והלוגיקה של האפליקציה.
  • App.js: הקובץ המרכזי בו נבנה את האפליקציה שלנו.
  • index.js: הקובץ שמחבר את רכיבי ה-React ל-HTML.

שלב 3: יצירת רכיב ToDo

נתחיל ביצירת רכיב בסיסי של ToDo. ניצור קובץ חדש בשם ToDo.js בתיקיית src ונוסיף את הקוד הבא:

import React from 'react';

const ToDo = ({ todo, index, completeTodo, removeTodo }) => {
  return (
    <div className="todo">
      <span style={{ textDecoration: todo.isCompleted ? "line-through" : "" }}>{todo.text}</span>
      <div>
        <button onClick={() => completeTodo(index)}>Complete</button>
        <button onClick={() => removeTodo(index)}>x</button>
      </div>
    </div>
  );
}

export default ToDo;

שלב 4: יצירת רשימת ToDo

כעת ניצור את הרכיב המרכזי של רשימת ה-ToDo. נעדכן את App.js כך שיכלול את הלוגיקה של ניהול רשימת המשימות:

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

function App() {
  const [todos, setTodos] = useState([
    { text: "Learn React", isCompleted: false },
    { text: "Build ToDo App", isCompleted: false },
    { text: "Deploy to server", isCompleted: false }
  ]);

  const addTodo = text => {
    const newTodos = [...todos, { text }];
    setTodos(newTodos);
  };

  const completeTodo = index => {
    const newTodos = [...todos];
    newTodos[index].isCompleted = true;
    setTodos(newTodos);
  };

  const removeTodo = index => {
    const newTodos = [...todos];
    newTodos.splice(index, 1);
    setTodos(newTodos);
  };

  return (
    <div className="app">
      <div className="todo-list">
        {todos.map((todo, index) => (
          <ToDo
            key={index}
            index={index}
            todo={todo}
            completeTodo={completeTodo}
            removeTodo={removeTodo}
          />
        ))}
        <TodoForm addTodo={addTodo} />
      </div>
    </div>
  );
}

export default App;

שלב 5: הוספת טופס להוספת משימה

ניצור רכיב חדש בשם TodoForm.js שיאפשר למשתמש להוסיף משימות חדשות לרשימה:

import React, { useState } from 'react';

function TodoForm({ addTodo }) {
  const [value, setValue] = useState("");

  const handleSubmit = e => {
    e.preventDefault();
    if (!value) return;
    addTodo(value);
    setValue("");
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        className="input"
        value={value}
        onChange={e => setValue(e.target.value)}
      />
    </form>
  );
}

export default TodoForm;

שלב 6: עיצוב האפליקציה

נוסיף קצת CSS כדי לשפר את מראה האפליקציה. ניצור קובץ בשם App.css ונוסיף את הקוד הבא:

.app {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.todo-list {
  width: 300px;
}

.todo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.input {
  width: 100%;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #ddd;
  margin-bottom: 10px;
  box-sizing: border-box;
}

נייבא את ה-CSS לתוך App.js:

import './App.css';

תרגול נוסף

חשוב מאוד לתרגל כמה שיותר על מנת להטמיע למידת טכנולוגיה חדשה. אם עשיתם את התרגיל במאמר הזה אתם מוזמנים לתרגל גם יצירת אפליקציה של תזכורות ב React

סיכום

במדריך זה למדנו איך ליצור אפליקציית ToDo-List באמצעות React. בנינו רכיבים נפרדים לכל חלק של האפליקציה, כולל רשימת המשימות, טופס להוספת משימות חדשות ופונקציות להשלמה והסרה של משימות. לבסוף, הוספנו עיצוב בסיסי באמצעות CSS.

זוהי רק ההתחלה, ואפשר להוסיף הרבה תכונות נוספות כמו סינון, סידור לפי עדיפות ועוד. נסו לשפר ולהרחיב את האפליקציה בעצמכם!

אם נהניתם מהמדריך ומצאתם אותו מועיל, שתפו אותו עם חברים והמשיכו לעקוב אחרי פוסטים נוספים בתחום התכנות והפיתוח.

אם אתם מעוניינים בביצוע הכשרה ייעודית בריאקט, מוזמנים לדבר איתנו על קורס React.

שתפו את הפוסט

צרו קשר

דילוג לתוכן