לימוד ריאקט -איך ליצור אפליקציית תזכורות באמצעות React

לימוד ריאקט -איך ליצור אפליקציית תזכורות באמצעות React

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

הקדמה

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

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

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

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

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

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

Memory updated

מדריך מלא: איך ליצור אפליקציית תזכורות באמצעות React

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

הקדמה

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

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

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

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

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

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

npx create-react-app reminders-app

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

cd reminders-app

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

npm start

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

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

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

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

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

import React from 'react';

const Reminder = ({ reminder, index, completeReminder, removeReminder }) => {
  return (
    <div className="reminder">
      <span style={{ textDecoration: reminder.isCompleted ? "line-through" : "" }}>{reminder.text}</span>
      <div>
        <button onClick={() => completeReminder(index)}>Complete</button>
        <button onClick={() => removeReminder(index)}>x</button>
      </div>
    </div>
  );
}

export default Reminder;

שלב 4: יצירת רשימת תזכורות

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

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

function App() {
  const [reminders, setReminders] = useState([
    { text: "Buy groceries", isCompleted: false },
    { text: "Attend meeting at 5 PM", isCompleted: false },
    { text: "Dentist appointment", isCompleted: false }
  ]);

  const addReminder = text => {
    const newReminders = [...reminders, { text }];
    setReminders(newReminders);
  };

  const completeReminder = index => {
    const newReminders = [...reminders];
    newReminders[index].isCompleted = true;
    setReminders(newReminders);
  };

  const removeReminder = index => {
    const newReminders = [...reminders];
    newReminders.splice(index, 1);
    setReminders(newReminders);
  };

  return (
    <div className="app">
      <div className="reminder-list">
        {reminders.map((reminder, index) => (
          <Reminder
            key={index}
            index={index}
            reminder={reminder}
            completeReminder={completeReminder}
            removeReminder={removeReminder}
          />
        ))}
        <ReminderForm addReminder={addReminder} />
      </div>
    </div>
  );
}

export default App;

שלב 5: הוספת טופס להוספת תזכורת

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

import React, { useState } from 'react';

function ReminderForm({ addReminder }) {
  const [value, setValue] = useState("");

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

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

export default ReminderForm;

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

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

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

.reminder-list {
width: 300px;
}

.reminder {
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. בנינו רכיבים נפרדים לכל חלק של האפליקציה, כולל רשימת התזכורות, טופס להוספת תזכורות חדשות ופונקציות להשלמה והסרה של תזכורות. לבסוף, הוספנו עיצוב בסיסי באמצעות CSS.

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

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

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

בהצלחה!

שתפו את הפוסט

צרו קשר

דילוג לתוכן