مطورو Novice React: تطبيق قائمة المهام (التسوق)

ندعو الطلاب المستقبليين في دورة "React.js Developer" للاشتراك في درس تجريبي مجاني حول موضوع "كتابة تطبيق في React + Redux".



كما قمنا بإعداد ترجمة لمواد مفيدة لك.

---

إذا كنت قد بدأت للتو في استخدام React ، فيمكنك إنشاء تطبيق بسيط لممارسة المفاهيم الأساسية لهذا الإطار. أول ما يتبادر إلى الذهن هو تطبيق قائمة المهام أو قائمة التسوق. لنبدأ معه. تم توضيح المفاهيم الأساسية لـ React في الوثائق الرسمية على الموقع ، وفي المنشورات السابقة على مدونتي ، يمكنك العثور على روابط لبرامج تعليمية أخرى حول العمل مع React.

ابدأ تشغيل VS Code أو أي محرر كود آخر. لإنشاء تطبيق React ، اكتب الأمر في المحطة:

npx create-react-app grocerylist
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

ثم قم بتغيير الدليل:

cd grocerylist 
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

ابدأ الخادم:

npm start 
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

افتح http: // localhost: 3000 / في متصفحك وسترى النافذة التالية:

دعنا نلقي نظرة على عناصر الواجهة التي نحتاجها لإنشاء وبدء التطوير.

1. أولاً ، لنقم بإنشاء حقل لإدخال عنصر في القائمة.

2.  — .

3. , .

, , , , , .

App.js. useState()



.

:

<form onSubmit={handleSubmit}>
        <input type="text" value={item} onChange={handleChange} />
        <button type="submit">ADD</button>
      </form>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

:

import React, { useState } from "react";
import "./App.css"
import { v4 as uuidv4 } from "uuid";

function App() {
  const [item, setItem] = useState("");
  const [list, setList] = useState([]);

  const handleSubmit = (e) => {
    const newItem = {
      id: uuidv4(),
      item: item,
      complete: false,
    };
    e.preventDefault();
    if (item) {
      setList([...list, newItem]);
      setItem("");
    }
  };

  const handleChange = (e) => {
    setItem(e.target.value);
  };

  return (
    <div className="App">
      <h1>Grocery List</h1>
      <form onSubmit={handleSubmit}>
        <input type="text" value={item} onChange={handleChange} />
        <button type="submit">ADD</button>
      </form>
    </div>
  );
}

export default App;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

. item



, , . list



, .

handleChange



item



, . setItem



. handleSubmit



, . : id, UUID, item



complete



. complete



: true



, , false



.

Item.js



. :

import React from "react";
import "./Item.css";

const Item = ({ id, items, list, setList, complete }) => {
  const remove = (id) => {
    setList(list.filter((el) => el.id !== id));
  };

  const handleComplete = (id) => {
    setList(
      list.map((item) => {
        if (item.id === id) {
          return {
            ...item,
            complete: !item.complete,
          };
        }
        return item;
      })
    );
  };

  return (
    <div className="item">
      <p className={complete ? "complete" : ""}>{items}</p>
      <img
        onClick={() => handleComplete(id)}
        src="https://img.icons8.com/offices/40/000000/checked-2--v2.png"
        alt="complete task"
      />
      <img
        onClick={() => remove(id)}
        src="https://img.icons8.com/color/48/000000/trash.png"
        alt="Delete"
      />
    </div>
  );
};
export default Item;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, , , id. . , list



, id complete



. . React-, .

:

. GitHub.

:

1. .

2. Firebase.

3. .

.

---

"React.js Developer".



" React+Redux".