كيفية بناء قائمة تودو مع رد فعل السنانير

React v16.7.0-alpha قدم خطافات ، وأنا متحمس.

ما هي السنانير؟

إنها وظائف تمنحك ميزات React مثل خطافات الحالة ودورة الحياة بدون فئات ES6.

بعض الفوائد هي

  • عزل منطق حكيم ، مما يجعلها أسهل للاختبار.
  • مشاركة منطق حالة دون تقديم الدعائم أو مكونات الترتيب العالي.
  • فصل اهتمامات التطبيق الخاصة بك استنادًا إلى المنطق ، وليس الخطافات لدورة الحياة.
  • تجنب فئات ES6 ، لأنها ملتوية ، وليست فصولًا فعلية ، وتنقل لأعلى مطوري JavaScript ذوي الخبرة.

لمزيد من التفاصيل ، انظر مقدمة خطافات React الرسمية.

لا تستخدم في الإنتاج!

في وقت كتابة هذا التقرير ، السنانير في ألفا. API الخاصة بهم يمكن أن تتغير في أي وقت.

أنصحك بالتجربة والاستمتاع واستخدام Hooks في مشاريعك الجانبية ، ولكن ليس في كود الإنتاج حتى تكون مستقرة.

دعونا نبني قائمة تودو

قوائم Todo هي المثال الأكثر استخدامًا لسبب وجيه - إنها ممارسة رائعة. أوصي بهذا لأي لغة أو مكتبة تريد تجربتها.

لنا سوف تفعل سوى عدد قليل من الأشياء

  • عرض تودوس بطريقة تصميم المواد لطيفة
  • السماح بإضافة todos عبر الإدخال
  • حذف تودوس

اقامة

فيما يلي روابط GitHub و CodeSandbox.

بوابة استنساخ https://github.com/yazeedb/react-hooks-todo
مؤتمر نزع السلاح رد فعل السنانير ما يجب عمله
تثبيت npm

الفرع الرئيسي لديه المشروع النهائي ، لذلك تحقق من فرع البداية إذا كنت ترغب في المتابعة.

بوابة الخروج البدء

وتشغيل المشروع.

npm البداية

يجب أن يتم تشغيل التطبيق على المضيف المحلي: 3000 ، وإليك واجهة المستخدم الأولية الخاصة بنا.

لقد تم إعداده بالفعل باستخدام مادة - ui لإعطاء صفحتنا نظرة احترافية. لنبدأ بإضافة بعض الوظائف!

المكون TodoForm

أضف ملفًا جديدًا ، src / TodoForm.js. إليك رمز البدء.

استيراد رد من "رد فعل" ؛
استيراد TextField من '@ material-ui / core / TextField'؛
const TodoForm = ({saveTodo}) => {
  إرجاع (
    
      <الحقل النصي         البديل = "المبين"         عنصر نائب = "إضافة ما يجب عمله"         الهامش = "طبيعية"       />        )؛ }؛
الافتراضي تصدير TodoForm.

بالنظر إلى الاسم ، نعلم أن مهمتها هي إضافة todos إلى دولتنا. عند الحديث عن ذلك ، إليك أول خطاف لدينا.

useState

تحقق من هذا الكود

استيراد {useState} من "تفاعل" ؛
const [value، setValue] = useState ('')؛

useState هي مجرد وظيفة تأخذ الحالة الأولية وتقوم بإرجاع صفيف. المضي قدما و console.log ذلك.

الفهرس الأول للصفيف هو القيمة الحالية لحالتك ، والفهرس الثاني هو وظيفة محدث.

لذلك قمنا بتسميتها بشكل صحيح بقيمة و setValue باستخدام مهمة التدمير ES6.

useState مع النماذج

يجب أن يتتبع نموذجنا قيمة المدخلات ويدعو saveTodo عند الإرسال. useState يمكن أن تساعدنا في ذلك!

حدّث TodoForm.js ، الشفرة الجديدة بالخط العريض.

استيراد React ، {useState} من "تفاعل" ؛
استيراد TextField من '@ material-ui / core / TextField'؛
const TodoForm = ({saveTodo}) => {
  const [value، setValue] = useState ('')؛
  إرجاع (
    <شكل
      onSubmit = {event => {
        event.preventDefault ()؛
        saveTodo (القيمة)؛
      }}
    >
      <الحقل النصي
        البديل = "المبين"
        عنصر نائب = "إضافة ما يجب عمله"
        الهامش = "طبيعية"
        onChange = {event => {
          setValue (event.target.value)؛
        }}
        القيمة = {قيمة}
      />
    
  )؛
}؛
الافتراضي تصدير TodoForm.

مرة أخرى في index.js ، استيراد واستخدام هذا المكون.

...
استيراد TodoForm من './TodoForm' ؛
...
التطبيق const = () => {
  إرجاع (
    
           تودوس     
    
   
  )؛
}؛

أرسل الآن القيمة التي قمت بتسجيل الدخول إليها (اضغط على enter).

useState مع تودوس

نحن بحاجة أيضا إلى دولة تودوس لدينا. استيراد useState في index.js. يجب أن تكون حالتنا الأولية صفيف فارغ.

استيراد React ، {useState} من "تفاعل" ؛
...
التطبيق const = () => {
  const [todos، setTodos] = useState ([])؛
  إرجاع ...

مكون TodoList

قم بإنشاء ملف جديد يسمى src / TodoList.js.

جزء كبير من الكود عبارة عن مكونات فاخرة من مكتبة Material-UI. الأشياء المهمة بخط غامق.

تحرير: شكرًا لك Takahiro Hata لمساعدتي في الانتقال onClick إلى المكان الصحيح!

استيراد رد من "رد فعل" ؛
قائمة الاستيراد من "@ material-ui / core / List" ؛
استيراد ListItem من '@ material-ui / core / ListItem' ؛
استيراد ListItemSecondaryAction من '@ material-ui / core / ListItemSecondaryAction' ؛
استيراد ListItemText من '@ material-ui / core / ListItemText' ؛
استيراد خانة اختيار من "@ material-ui / core / Checkbox" ؛
استيراد IconButton من '@ material-ui / core / IconButton' ؛
استيراد DeleteIcon من '@ material-ui / icons / delete'؛

const TodoList = ({todos، deleteTodo}) => (
  <> قائمة
    {todos.map ((todo، index) => (
      
        
        
        
           {
              deleteTodo (رقم قياسي).
            }}
          >
            
          
        
      
    ))}
  
)؛

تصدير الافتراضي TodoList ؛

يستغرق اثنين من الدعائم

  • تودوس: صفيف تودوس. نحن الخريطة على كل واحد وإنشاء عنصر القائمة.
  • deleteTodo: يؤدي النقر فوق IconButton إلى إطلاق هذه الوظيفة. يجتاز الفهرس ، الذي سيحدد بشكل فريد تودو في قائمتنا.

استيراد هذا المكون في index.js الخاص بك.

...
استيراد TodoList من './TodoList' ؛
استيراد './styles.css' ؛
const التطبيق = () => {...

واستخدامها في وظيفة التطبيق الخاص بك مثل ذلك

...

مضيفا تودوس

لا يزال في index.js ، دعونا نقوم بتعديل سند TodoForm الخاص بنا ، saveTodo.

 {
    const trimmedText = todoText.trim ()؛
    if (trimmedText.length> 0) {
      setTodos ([... todos، trimmedText])؛
    }
  }}
/>

ما عليك سوى دمج todos الحالي مع واحد جديد ، مسافة بيضاء خارج.

يمكننا إضافة todos الآن!

مسح المدخلات

لاحظ أن الإدخال لا يتم مسحه بعد إضافة مهمة جديدة. إنها تجربة سيئة للمستخدم!

يمكننا إصلاحه عن طريق تغيير رمز صغير في TodoForm.js.

<شكل
  onSubmit = {event => {
    event.preventDefault ()؛
    saveTodo (القيمة)؛
    setValue ( '')؛
  }}
>

بمجرد حفظ ما يجب عمله ، اضبط حالة النموذج على سلسلة فارغة.

تبدو جيدة الآن!

حذف تودوس

يوفر TodoList فهرس كل ما يجب عمله ، لأنه وسيلة مضمونة للعثور على الفهرس الذي نريد حذفه.

// TodoList.js
 {
    deleteTodo (رقم قياسي).
  }}
>
  

سنستفيد من ذلك في index.js.

 {
    const newTodos = تودوس
      .filter ((_، index) => index! == todoIndex)؛
  
    setTodos (newTodos)؛
  }}
/>

كل ما لا تتطابق مع todos الفهرس المتاح يتم حفظه وتخزينه في الولاية باستخدام setTodos.

حذف وظيفة كاملة!

ملخص تودوس useState

ذكرت أن السنانير كبيرة لفصل منطق الدولة والمكون. إليك الشكل الذي قد يبدو عليه في تطبيقنا الذي يجب عمله.

قم بإنشاء ملف جديد يسمى src / useTodoState.js.

استيراد {useState} من "تفاعل" ؛

تصدير الافتراضي initialValue => {
  const [todos، setTodos] = useState (initialValue)؛

  إرجاع {
    لجميع الناس،
    addTodo: todoText => {
      setTodos ([... todos، todoText])؛
    }،
    deleteTodo: todoIndex => {
      const newTodos = تودوس
        .filter ((_، index) => index! == todoIndex)؛

      setTodos (newTodos)؛
    }
  }؛
}؛

إنه نفس الكود الخاص بنا من index.js ، لكنه منفصل! إدارة الدولة لدينا لم تعد مقرونة بإحكام بالعنصر.

الآن فقط استيراده. الرمز الجديد بالخط العريض.

استيراد رد من "رد فعل" ؛
استيراد ReactDOM من 'react-dom' ؛
استيراد الطباعة من '@ material-ui / core / Typography' ؛
استيراد TodoForm من './TodoForm' ؛
استيراد TodoList من './TodoList' ؛
استيراد useTodoState من './useTodoState' ؛
استيراد './styles.css' ؛

التطبيق const = () => {
  const {todos، addTodo، deleteTodo} = useTodoState ([])؛

  إرجاع (
    
               تودوس               {           const trimmedText = todoText.trim ()؛           if (trimmedText.length> 0) {             addTodo (trimmedText)؛           }         }}       />               )؛ }؛ const rootElement = document.getElementById ('root')؛ ReactDOM.render (، rootElement)؛

وكل شيء لا يزال يعمل بشكل طبيعي.

خلاصة نموذج الإدخال useState

يمكننا أن نفعل الشيء نفسه مع النموذج لدينا!

قم بإنشاء ملف جديد ، src / useInputState.js.

استيراد {useState} من "تفاعل" ؛

تصدير الافتراضي initialValue => {
  const [value، setValue] = useState (initialValue)؛

  إرجاع {
    القيمة،
    onChange: event => {
      setValue (event.target.value)؛
    }،
    إعادة تعيين: () => setValue ('')
  }؛
}؛

والآن يجب أن يبدو TodoForm.js هكذا.

استيراد رد من "رد فعل" ؛
استيراد TextField من '@ material-ui / core / TextField'؛
استيراد useInputState من './useInputState' ؛

const TodoForm = ({saveTodo}) => {
  const {value، reset، onChange} = useInputState ('')؛

  إرجاع (
    <شكل
      onSubmit = {event => {
        event.preventDefault ()؛

        saveTodo (القيمة)؛
        إعادة تعيين()؛
      }}
    >
      <الحقل النصي
        البديل = "المبين"
        عنصر نائب = "إضافة ما يجب عمله"
        الهامش = "طبيعية"
        عند_التغيير = {} عند_التغيير
        القيمة = {قيمة}
      />
    
  )؛
}؛

الافتراضي تصدير TodoForm.

ونحن جميعا انتهينا!

آمل أن تستمتع ، حتى في المرة القادمة!

اعتن بنفسك،
يزيد بزادوغ
http://yazeedb.com/