react component عقبه ام ميزه ؟

منتصر احمد · 22 فبراير 2023

يعني مثلا انا عندي تطبيق to do list مكون من عنوان "to do list" وهنالك input elment وزر لل submit و list of items و list Item بس لما اعمل مكون لكل واحد فيهم بيواجهني مشكله اني مثلا مش بعرف ازاي اخد القيمة اللي في input element عند الضغط علي زرار ال submit واعمل post requiest وبعدين اعرضها في ال list of items

Mustafa Suleiman · 22 فبراير 2023

في حال فهمت سؤالك بشكل صحيح.

في البداية يجب فهم كيف يمكنك استخدام الـ JavaScript للوصول إلى قيمة العنصر input element وإدخالها في الـ list of items. يمكنك استخدام الأحداث (Events) لتحديد عندما يتم النقر على زر submit. عند حدوث هذا الحدث، يمكنك استخدام الـ DOM (Document Object Model) للوصول إلى قيمة الـ input element وإضافتها إلى الـ list of items. يمكن استخدام الـ XMLHttpRequest لإرسال post request وتحديث الـ list of items.

هذا مثال بسيط يستخدم الـ HTML والـ JavaScript لإنشاء تطبيق to-do list:

<!DOCTYPE html>
<html>
<head>
  <title>To-Do List</title>
</head>
<body>
  <h1>To-Do List</h1>
  <form>
    <input type="text" id="new-item">
    <button type="submit" id="add-item">Add Item</button>
  </form>
  <ul id="list"></ul>

  <script>
    const form = document.querySelector('form');
    const newItemInput = document.querySelector('#new-item');
    const list = document.querySelector('#list');

    form.addEventListener('submit', (event) => {
      event.preventDefault();
      const newItemText = newItemInput.value;
      const newItem = document.createElement('li');
      newItem.textContent = newItemText;
      list.appendChild(newItem);
      newItemInput.value = '';
    });
  </script>
</body>
</html>

في هذا المثال، يتم استخدام الأحداث (Events) للتعامل مع النقر على زر الـ submit، ثم يتم استخدام الـ DOM للوصول إلى قيمة العنصر input element وإضافتها إلى الـ list of items. يتم أيضًا مسح قيمة العنصر input element بعد الإضافة.

يمكن تحسين هذا الكود لإضافة المزيد من الميزات، مثل حذف العناصر أو تعديلها. كما يمكن استخدام مكتبات مثل React أو Angular أو Vue.js لتسهيل إنشاء تطبيقات to-do list أكثر تعقيدًا.

يمكنك البدء بإنشاء مكونات (Components) في React لعناصر التطبيق المختلفة، مثل عنصر الإدخال (input) والزر (button) وقائمة العناصر (list of items). ثم يمكنك استخدام الأحداث (Events) في React للتعامل مع إضافة وحذف العناصر.

فيما يلي مثال لكيفية استخدام React لإنشاء تطبيق to-do list:

import React, { useState } from 'react';

function TodoList() {
  const [items, setItems] = useState([]);
  const [text, setText] = useState('');

  function handleSubmit(event) {
    event.preventDefault();
    if (text.trim().length === 0) {
      return;
    }
    const newItem = { text };
    setItems([...items, newItem]);
    setText('');
  }

  function handleDelete(index) {
    setItems(items.filter((_, i) => i !== index));
  }

  return (
    <div>
      <h1>To-Do List</h1>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          placeholder="Enter a new item..."
          value={text}
          onChange={(event) => setText(event.target.value)}
        />
        <button type="submit">Add Item</button>
      </form>
      <ul>
        {items.map((item, index) => (
          <li key={index}>
            {item.text}
            <button onClick={() => handleDelete(index)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoList;

في هذا المثال، يتم استخدام الـ hooks في React لإنشاء حالتين (state)، واحدة لقائمة العناصر (items) والأخرى لنص العنصر الجديد (text). يتم استخدام الـ useState لتعيين الحالة الأولى (items) إلى مصفوفة فارغة، ثم يتم استخدام الـ useState لتعيين الحالة الثانية (text) إلى قيمة فارغة.

يتم استخدام الـ function handleSubmit عند النقر على زر الإضافة لإضافة عنصر جديد إلى قائمة العناصر. يتم التحقق من أن النص غير فارغ قبل إضافته.

يتم استخدام الـ function handleDelete عند النقر على زر الحذف لحذف عنصر من قائمة العناصر. يتم استخدام الـ filter لإنشاء قائمة جديدة تحتوي على جميع العناصر باستثناء العنصر الذي تم حذفه.

يتم عرض قائمة العناصر باستخدام الـ map، حيث يتم عرض كل عنصر في قائمة مع زر الحذف. يتم استخدام الـ key لتعيين مفتاح فريد لكل عنصر لتحسين أداء التطبيق.

لتضمين هذا المكون في تطبيق React أكبر، يمكنك استدعاءه داخل المكون الأساسي الرئيسي (root component) وتضمينه في واجهة المستخدم باستخدام JSX، وهو لغة توضيحية تجمع بين JavaScript وHTML.

import React from 'react';
import TodoList from './TodoList';

function App() {
  return (
    <div>
      <h1>My Todo App</h1>
      <TodoList />
    </div>
  );
}

export default App;

يتم استدعاء TodoList كمكون داخل المكون الرئيسي App باستخدام JSX، حيث يتم عرض العناصر الخاصة بـ TodoList تحت عنوان التطبيق الرئيسي.

هذه هي بعض الأفكار الأساسية لاستخدام React في إنشاء تطبيق to-do list. يمكن تطويرها بمزيد من الوظائف والميزات، مثل التعديل والتصنيف والتنبيهات وما إلى ذلك.

Hassan Hedr · 22 فبراير 2023

ليس بالضرورة فصل التطبيق إلى العديد من المكونات، للتطبيقات البسيطة ابدأ دومًا بتضمين كل عناصر التطبيق ضمن مكون واحد، مثلًا لنموذج الادخال اكتب العناصر input كلها مباشرةً ضمن مكون Form، بعد فترة ستلاحظ تكرار عناصر ما في أكثر من مكان هنا يمكنك التأكد من أن تلك العناصر قد يكون من الأنسب إخفاء تفاصيل تضمينها ضمن مكون جديد وليكن Input في حالة عناصر الادخال،

فصل المكون سيخلق لك مشاكل مثل ضرورة تعريف طريقة لإعلام المكون الأب بالمعلومات التي يحتاجها من ذلك المكون، يمكنك لذلك تمرير توابع للمكون تُنفذ عند أحداث معينة داخل هذا المكون، في حالتك يمكنك تمرير تابع onChange للمكون Input تُعلم بها المكون الأب بتغير القيمة في ذلك الحقل، لتُخزنها في مكان تجميع كل البيانات من كل الحقول في المكون الأب لإرسالها لاحقًا ضمن طلب من نوع POST،

الهيكلية العامة لهذا الحل ستكون كالتالي يمكنك فهم طريقة العمل وتطبيقها بنفسك على تطبيقك حسب التفاصيل المطلوبة:

function From() {
    return <div>
        <Input onChange={value => {/* تخزين القيمة الجديدة */ }} />
        <Input onChange={value => {/* تخزين القيمة الجديدة */ }} />
    </div>
}

function Input({ onChange }) {
    return <input onChange={event => onChange(event.target.value)} ... />
                                    /*  إعلام المكون الأب بتغير القيمة   */
}

يمكنك الاستفادة من قراءة المقال التالي:

منتصر احمد · 22 فبراير 2023

بتاريخ 2 دقائق مضت قال Mustafa Suleiman:
في حال فهمت سؤالك بشكل صحيح.

في البداية يجب فهم كيف يمكنك استخدام الـ JavaScript للوصول إلى قيمة العنصر input element وإدخالها في الـ list of items. يمكنك استخدام الأحداث (Events) لتحديد عندما يتم النقر على زر submit. عند حدوث هذا الحدث، يمكنك استخدام الـ DOM (Document Object Model) للوصول إلى قيمة الـ input element وإضافتها إلى الـ list of items. يمكن استخدام الـ XMLHttpRequest لإرسال post request وتحديث الـ list of items.

هذا مثال بسيط يستخدم الـ HTML والـ JavaScript لإنشاء تطبيق to-do list:
<!DOCTYPE html>
<html>
<head>
  <title>To-Do List</title>
</head>
<body>
  <h1>To-Do List</h1>
  <form>
    <input type="text" id="new-item">
    <button type="submit" id="add-item">Add Item</button>
  </form>
  <ul id="list"></ul>

  <script>
    const form = document.querySelector('form');
    const newItemInput = document.querySelector('#new-item');
    const list = document.querySelector('#list');

    form.addEventListener('submit', (event) => {
      event.preventDefault();
      const newItemText = newItemInput.value;
      const newItem = document.createElement('li');
      newItem.textContent = newItemText;
      list.appendChild(newItem);
      newItemInput.value = '';
    });
  </script>
</body>
</html>
في هذا المثال، يتم استخدام الأحداث (Events) للتعامل مع النقر على زر الـ submit، ثم يتم استخدام الـ DOM للوصول إلى قيمة العنصر input element وإضافتها إلى الـ list of items. يتم أيضًا مسح قيمة العنصر input element بعد الإضافة.

يمكن تحسين هذا الكود لإضافة المزيد من الميزات، مثل حذف العناصر أو تعديلها. كما يمكن استخدام مكتبات مثل React أو Angular أو Vue.js لتسهيل إنشاء تطبيقات to-do list أكثر تعقيدًا.

يمكنك البدء بإنشاء مكونات (Components) في React لعناصر التطبيق المختلفة، مثل عنصر الإدخال (input) والزر (button) وقائمة العناصر (list of items). ثم يمكنك استخدام الأحداث (Events) في React للتعامل مع إضافة وحذف العناصر.

فيما يلي مثال لكيفية استخدام React لإنشاء تطبيق to-do list:
import React, { useState } from 'react';

function TodoList() {
  const [items, setItems] = useState([]);
  const [text, setText] = useState('');

  function handleSubmit(event) {
    event.preventDefault();
    if (text.trim().length === 0) {
      return;
    }
    const newItem = { text };
    setItems([...items, newItem]);
    setText('');
  }

  function handleDelete(index) {
    setItems(items.filter((_, i) => i !== index));
  }

  return (
    <div>
      <h1>To-Do List</h1>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          placeholder="Enter a new item..."
          value={text}
          onChange={(event) => setText(event.target.value)}
        />
        <button type="submit">Add Item</button>
      </form>
      <ul>
        {items.map((item, index) => (
          <li key={index}>
            {item.text}
            <button onClick={() => handleDelete(index)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoList;
في هذا المثال، يتم استخدام الـ hooks في React لإنشاء حالتين (state)، واحدة لقائمة العناصر (items) والأخرى لنص العنصر الجديد (text). يتم استخدام الـ useState لتعيين الحالة الأولى (items) إلى مصفوفة فارغة، ثم يتم استخدام الـ useState لتعيين الحالة الثانية (text) إلى قيمة فارغة.

يتم استخدام الـ function handleSubmit عند النقر على زر الإضافة لإضافة عنصر جديد إلى قائمة العناصر. يتم التحقق من أن النص غير فارغ قبل إضافته.

يتم استخدام الـ function handleDelete عند النقر على زر الحذف لحذف عنصر من قائمة العناصر. يتم استخدام الـ filter لإنشاء قائمة جديدة تحتوي على جميع العناصر باستثناء العنصر الذي تم حذفه.

يتم عرض قائمة العناصر باستخدام الـ map، حيث يتم عرض كل عنصر في قائمة مع زر الحذف. يتم استخدام الـ key لتعيين مفتاح فريد لكل عنصر لتحسين أداء التطبيق.

لتضمين هذا المكون في تطبيق React أكبر، يمكنك استدعاءه داخل المكون الأساسي الرئيسي (root component) وتضمينه في واجهة المستخدم باستخدام JSX، وهو لغة توضيحية تجمع بين JavaScript وHTML.
import React from 'react';
import TodoList from './TodoList';

function App() {
  return (
    <div>
      <h1>My Todo App</h1>
      <TodoList />
    </div>
  );
}

export default App;
يتم استدعاء TodoList كمكون داخل المكون الرئيسي App باستخدام JSX، حيث يتم عرض العناصر الخاصة بـ TodoList تحت عنوان التطبيق الرئيسي.

هذه هي بعض الأفكار الأساسية لاستخدام React في إنشاء تطبيق to-do list. يمكن تطويرها بمزيد من الوظائف والميزات، مثل التعديل والتصنيف والتنبيهات وما إلى ذلك.

لا انا اقصد مثلا في ملف اسمه Input.jsx وملف اخر اسمه Button.jsx و ملف اخر اسمه Output.jsx و اخيرا ملف اسمه OutputItem.jsx

Mustafa Suleiman · 22 فبراير 2023

أنت بحاجة إلى قراءة المقالات التالية بتمعن وهدوء وستجد الإجابة بنفسك، لأنك بحاجة إلى فهم طريقة عمل الـ event handlers في React.

react component عقبه ام ميزه ؟

السؤال

منتصر احمد

رابط هذا التعليق

شارك على الشبكات الإجتماعية

4 أجوبة على هذا السؤال

Recommended Posts

Mustafa Suleiman

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Hassan Hedr

رابط هذا التعليق

شارك على الشبكات الإجتماعية

منتصر احمد

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Mustafa Suleiman

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية