01204223/react-components

หน้านี้เป็นส่วนหนึ่งของวิชา 01204223

ใน React app ที่เราเขียนขึ้น เราใส่ทุกอย่างบน UI ลงใน component App เพียงอย่างเดียว ทำให้โค้ดใน App.jsx มีขนาดใหญ่และซับซ้อนมาก &  nbsp; ข้อสังเกตหนึ่งของความซับซ้อนก็คือการจัดการเกี่ยวกับฟอร์ม comment ของแต่ละ TodoItem ที่เราสร้าง state ที่มีความซับซ้อน

เราจะปรับโครงสร้างของ UI ใหม่ จากที่มี component เดียวดังรูปด้านล่าง

ให้แยกส่วนแสดง TodoItem ออกเป็นอีก component หนึ่ง ดังรูปต่อไปนี้

การออกแบบระบบดังกล่าวทำให้แต่ละ component เล็กลง แต่ก็แลกมากับการที่ต้องพิจารณาเรื่องการเก็บ state ของ UI และการเก็บ state ของข้อมูลของแอพทั้งหมด

แยก Component ในการแสดงผล

แผนการ

ในโค้ด App.jsx ส่วนที่จะถูกตัดออกเป็นจะเป็นส่วนด้านล่างนี้ที่อยู่ใน tag li

         {todoList.map(todo => (

          <!----------- จะตัดส่วนนี้ไปสร้างอีก component หนึ่ง ------------------->
          <li key={todo.id}>
            <span className={todo.done ? "done" : ""}>{todo.title}</span>
            <button onClick={() => {toggleDone(todo.id)}}>Toggle</button>
            <button onClick={() => {deleteTodo(todo.id)}}>❌</button>
            {(todo.comments) && (todo.comments.length > 0) && (
              // ละไว้
            )}
            <div className="new-comment-forms">
              // ละไว้
            </div>
          </li>
          <!------------------------------------------------------------>

         ))}

เมื่อแยกไปแล้ว ส่วนที่เหลือใน App.jsx จะเป็นดังนี้ แสดงให้ดูเฉย ๆ ยังไม่ต้องแก้ตาม

         {todoList.map(todo => (

          <!---------------- โค้ดหลังใช้ component TodoItem ---------------->
          <TodoItem 
            key={todo.id}
            todo={todo}
            toggleDone={toggleDone}
            deleteTodo={deleteTodo}
            addNewComment={addNewComment}
          />
          <!------------------------------------------------------------>

         ))}

การ refactor     การแยกโค้ดออกไปเป็นส่วนใหม่ เป็นวิธีการปรับโค้ดเพื่อทำให้มีโครงสร้าง (หรือสถาปัตยกรรม) ดีขึ้น ดูแลรักษาง่ายขึ้น การปรับนี้ เราไม่ได้มีเป้าหมายในการเปลี่ยนแปลงพฤติกรรมของโค้ดเลย เราทำเพื่อปรับโครงสร้างเท่านั้น การดำเนินการนี้ เราจะเรียกว่า การ refactor โค้ด (อ่านเพิ่มใน wiki)

เรียก backend server และเรียก npm run dev

ในขั้นตอนถัดไป เราจะแก้โค้ดไปพร้อม ๆ กับเทส ดังนั้นให้ไปเรียก backend server รวมทั้งเปิด frontend dev ด้วย โดยเรียก

ใน backend ให้ activate virtual environment จากนั้นให้ตั้งค่า FLASK_APP ให้เรียบร้อย แล้วเรียก

flask run --debug

และ ใน frontend

npm run dev

ก่อนจะทำในขั้นถัด ๆ ไป

ตัดโค้ดไปสร้าง TodoItem.jsx

ในการสร้าง TodoItem component เราจะเริ่มจากไฟล์ TodoItem.jsx ในไดเร็กทอรี frontent/src โดยทำเป็นโครงว่าง ๆ ดังด้านล่าง

// ทำในไฟล์ TodoItem.jsx ในไดเร็กทอรี frontent/src/
import './App.css'

function TodoItem({todo}) {
  return (

  )
}

export default TodoItem

คำอธิบาย: Component ใน react สมัยใหม่จะเป็น function ที่คืนค่าเป็นก้อน html   function นี้จะรับ props (มาจากคำว่า properties) จาก UI component อื่น ๆ โดยในกรณีนี้เราจะรับข้อมูล todo มาจาก component App    สังเกตว่าเราเขียน argument todo ภายในวงเล็บปีกกา (สำคัญมาก) ซึ่งจะทำให้เวลามีการส่ง props มาจะมีการแยก todo มาให้โดยอัตโนมัติ

เราจะเริ่มโดยตัดโค้ดในส่วนของการแสดง TodoItem มาจาก App.jsx