ສ້າງເວັບໄຊດ້ວຍ React Hooks

Comet Digital Agency Laos / Innovation  / Ideas  / ສ້າງເວັບໄຊດ້ວຍ React Hooks

ສ້າງເວັບໄຊດ້ວຍ React Hooks

ສະບາຍດີທຸກໆຄົນທີ່ເຂົ້າມາອ່ານບົດຄວາມນີ້ ຫຼື ບໍ່? ແຕ່ເຖິງຈະເຂົ້າມາໃນຮູບແບບໃດກໍຕາມຜູ້ຂຽນກໍຢາກຈະມາແຊຄວາມຮູ້ເລັກໆນ້ອຍໆ ເພື່ອອາດຈະເປັນປະໂຫຍດບໍ່ໜ້ອຍກະຫຼາຍສຳລັບທຸກຄົນທີ່ກຳລັງສຶກສາກ່ຽວກັບການສ້າງ Web Application ດ້ວຍ React Hooks.

ເຊິ່ງກ່ອນອື່ນເຮົາຈະມາໃຫ້ນິຍາມຄຳວ່າ React Hooks ກ່ອນວ່າມັນແມ່ນຫຍັງ? ແລ້ວເປັນຫຍັງເຮົາຕ້ອງໃຊ້ມັນ? ໂດຍອີງຕາມການນິຍາມຈາກຫຼາຍໆເວັບຜູ້ຂຽນສາມາດສະຫຼຸບໃຈຄວາມຫຼັກໆໄດ້ດັ່ງນີ້:

ໃນ React ແມ່ນເຮົາຈະສາມາດຂຽນໄດ້ 2 ຮູບແບບຫຼັກໆຄື class component (stateful component) ແລະ function component (stateless component).

ຄວາມແຕກຕ່າງຂອງ 2 ຮູບແບບແມ່ນເລື່ອງ performance ເພາະວ່າ class component ແມ່ນຈຳເປັນຈະຕ້ອງສຶບທອດ component class ຈາກ React Library ຈະດຶງເອົາຄວາມສາມາດທັງໝົດທີ່ຢູ່ໃນ library. ເຊິ່ງສົ່ງຜົນໃຫ້ມັນສາມາດ re-render ໄດ້ໂດຍການໃຊ້ setState ແລະ ຍັງສາມາດເຂົ້າເຖິງ lifecycle ຂອງ React ໄດ້ທັງໝົດ, ຕົວຢ່າງການປະກາດ Class component.

ສ່ວນ function component ແມ່ນເປັນ function ທົ່ວໄປທີ່ບໍ່ໄດ້ສຶບທອດ component class ມາສົ່ງຜົນໃຫ້ performance ຂອງ function component ດີກວ່າ, ແຕ່ຂໍເສຍກໍຄືການທີ່ເຮົາບໍ່ສຶບທອດ component class ມາເຮັດໃຫ້ບໍ່ສາມາດ re-render ຈະເຮັດໃຫ້ມັນກາຍເປັນ stateless ກໍຄືໜ້າເວັບຈະບໍ່ສາມາດປ່ຽນແປງໄດ້ເພາະສາມາດ render ໄດ້ພຽງຄັ້ງດຽວ. ເຊິ່ງແນ່ນອນ function component ກໍບໍ່ສາມາດເຂົ້າເຖິງ lifecycle ໄດ້ເຊັ່ນກັນ. ສະນັ້ນ,​ ເພື່ອເຮັດສາມາດນຳໃຊ້ function component ໄດ້ຄືກັບ class component ແຕ່ມີປະສິດພາບດີຍິ່ງຂື້ນ React Hooks ຈຶ່ງກຳເນີດຂື້ນມາໃນ React version 16.8 ເພື່ອແກ້ໄຂບັນຫາດັ່ງກ່າວ.

React Hooks ເປັນ function ທີ່ຊ່ວຍໃຫ້ສາມາດເຂົ້າເຖິງ state ແລະ lifecycle ຂອງ component function ໄດ້. ​ ເຊິ່ງວ່າ Hooks ແມ່ນສາມາດໃຊ້ໄດ້ກັບ function component ເທົ່ານັ້ນ, ຫຼື ເວົ້າພາສາບ້ານໆກະຄື: ເຮົາສາມາດ re-render ໄປຕາມ Event ຕ່າງໆ,​ ແລະ ຍັງສາມາດເຂົ້າເຖິງ lifecycle ໃນ function component ນຳອີກ

React Hooks ພື້ນຖານ:
1. useState
2. useEffect
3. useContext

React Hooks ອື່ນໆ:
1. useReducer
2. useRef
3. ແລະ ອື່ນໆ

ເຊິ່ງຜູ້ຂຽນຈະອະທິບາຍແຕ່ລະ Hook ແບບສັ້ນໆໄດ້ໃຈຄວາມ:
useState: ເປັນ Hook ທີ່ໃຊ້ໄວ້ໃນການສ້າງຕົວປ່ຽນປະເພດຕ່າງເຊັ່ນ: int, double, String, Boolean, array ແລະ object. ເຊິ່ງຈາກມີຄວາມແຕກຕ່າງຈາກຕົວປ່ຽນທົ່ວໄປຄື: ສາມາດ setState ໄດ້ນັ້ນເອງ.

ໃນ useState ແມ່ນຈະ return ອອກມາ 2 ຄ່າຄື: state ແມ່ນຄ່າທີ່ຈະເອົາໄປໃຊ້ ແລະ setState ເປັນ function ທີ່ໃຊ້ໃນການ update ຄ່າໃຫ້ກັບ state

useEffect: ເປັນ Hook ທີ່ໃຊ້ໄວ້ໃນການເຂົ້າເຖິງ lifecycle ຂອງ react ໄດ້

ຈະເຫັນວ່າໃນ useEffect ຈະມີຢູ່ 3 ສ່ວນຫຼັກຄື: ສ່ວນໃນການ update ຂໍ້ມູນຕ່າງເມື່ອເງື່ອນຖືກຕ້ອງ,​ ສ່ວນຕໍ່ມາຄືຈະເຮັດໃຫ້ກໍຕໍ່ເມື່ອ component ນັ້ນຖືກທຳລາຍ, ແລະ ສ່ວນສຸດທ້າຍຄືການກຳນົດເງື່ອນໄຂ ໂດຍຖ້າວ່າບໍ່ຕື່ມຫຍັງໃສ່ຄືມັນເຮັດວຽກພຽງຄັ້ງດຽວຄືຕອນ render ທຳອິດເທົ່ານັ້ນ ແລະ ສ່ວນເຂົາເຈົ້ານິຍົມເອົາ useState ຫຼື props ໄປໃຊ້ເພື່ອກວດສອບວ່າ state ຫຼື props ມີການປ່ຽນແປງບໍ່.

useContext: ເປັນ Hook ທີ່ໃຊ້ໃນການດຶງຄ່າຈາກ context ທີ່ຖືກສ້າງຈາກ parent component

useRef: ເປັນ Hook ທີ່ໃຊ້ໃນການເຂົ້າເຖິງ property ຂອງ HTLM tag ໄດ້ບໍ່ວ່າຈະເປັນ value, style, ແລະ property ຕ່າງໆໃນ tag ນັ້ນໆ.

useReducer: Hook ນີ້ແມ່ນມີລັກສະນະຄ້າຍຄືກັບ useState ແຕ່ຈຸດເດັ່ນຂອງ Hook ນີ້ແມ່ນການຈັດການ event ໄດ້ຫຼາຍກ່ວາ useState.

ຈະເຫັນວ່າ Hook ນີ້ແມ່ນຕ້ອງການຢູ່ 2 ຕົວປ່ຽນຄື: ຄ່າເລີ່ມຕົ້ນທີ່ເອີ້ນວ່າ: “initialState” ແລະ Function ໃນການປ່ຽນແປຄ່າເລີ່ມໄດ້ຕາມ action ທີ່ມີຢູ່ເຊັ່ນຕົວຢ່າງຂ້າງເທິງນີ້ຈະເຫັນວ່າມີ 2 actions ຄື: increment ແລະ decrement. ໂດຍ 2 actions ນີ້ແມ່ນສາມາດເອີ້ນໃຊ້ໄດ້ໂດຍຜ່ານ Function Dispatch ທີ່ຖືກ return ຈາກ Reducer Hook ດັ່ງຕົວຢ່າງຂ້າງເທິງນີ້.

ສ່ວນ Hook ອື່ນໆເຊັ່ນ: useMemo ແລະ useCallback ແມ່ນເຮົາຈະບໍ່ໄດ້ລົງເລິກ, ເຊິ່ງທັງ 2 ໂຕນີ້ແມ່ນໃຊ້ໄວ້ໃນການ optimized ແຕ່ຈະໃຊ້ຄົນລະແບບຄື: ການ optimization ຂອງ useMemo ແມ່ນຈະໃຊ້ໄວ້ເພື່ອຫຼຸດຜ່ອນການຄຳນວນທີ່ມີຄວາມຊັບຊ້ອນຊໍ້າ, ສ່ວນ ການ optimization ຂອງ useCallback ແມ່ນຈະໃຊ້ໄວ້ເພື່ອຫຼຸດຜ່ອນການ Render ຂໍ້ມູນເກົ່າຄືນໃໝ່.

ຕອນນີ້ເຮົາກໍຮູ້ React Hooks ພໍສົມຄວນແລ້ວຕໍ່ໄປເຮົາມາລອງນຳໃຊ້ Hooks ຕ່າງໆໃນການສ້າງ To-do WebApp ທີ່ທຳການດຶງເອົາຂໍ້ມູນທີ່ເຮົາບັນທຶກມາສະແດງໃນຮູບແບບຂອງ Lists ແລະ ນອກຈາກນັ້ນກໍຍັງສາມາດສ້າງ List, ແກ້ໄຂ List ແລະ ລົບ List, ເຊິ່ງເຮົາຈະນຳໃຊ້ API ທີ່ຜູ້ຂຽນໄດ້ສ້າງໄວ້.

– ສິ່ງທີ່ຄວນມີກ່ອນຈະເລີ່ມ workshop
– ຕິດຕັ້ງ node.js ໂດຍມີເງື່ອນໄຂແມ່ນ Node >= 8.10 ແລະ npm >= 5.6
– ມີຄວາມເຂົ້າໃຈໃນ React Hooks
– ມີຄວາມເຂົ້າໃຈໃນການໃຊ້ API

API ທັງໝົດທີ່ຈະໃຊ້ໃນ workshop
1. https://api-hook-101.herokuapp.com/api/lists ໃຊ້ໃນສະແດງຂໍ້ມູນທັງໝົດໃນຖານຂໍ້ມູນ.
2. https://api-hook-101.herokuapp.com/api/list/id ໃຊ້ໃນສະແດງຂໍ້ມູນຕາມ ID.
3. https://api-hook-101.herokuapp.com/api/add ໃຊ້ໃນການເພີ່ມຂໍ້ມູນລົງໃນຖານຂໍ້ມູນ.
4. https://api-hook-101.herokuapp.com/api/delete/id ໃຊ້ໃນການລົບຂໍ້ມູນ.
5. https://api-hook-101.herokuapp.com/api/edit/id ໃຊ້ໃນການແກ້ໄຂຂໍ້ມູນ.

ການສ້າງ React Project

ເຊິ່ງເຮົາຈະໄດ້ WebApp ທີ່ໜ້າດັ່ງຮູບລຸ່ມນີ້:

ຫຼັງຈາກນັ້ນໃຫ້ທຳການແປງໂຄງສ້າງຂອງໃຫ້ເປັນດັ່ງຮູບລຸ່ມນີ້:

ເຊິ່ງຢູ່ໃນ folder src ເຮົາສ້າງເພີ່ມຂື້ນມາ 3 folders ຄື: components ເອົາໄວ້ເກັບ components ຕ່າງໆ, ເປັນຕົ້ນແມ່ນ Navbar, Footer ແລະ ອື່ນໆ. Services ເອົາໄວ້ເກັບ files ທີ່ໃຊ້ໃນການດຶງຂໍ້ມູນມາຈາກ API. ແລະ ສຸດທ້າຍແມ່ນ style ເອົາເກັບ CSS files ຕ່າງໆ.

ການ import library ທີ່ຈະຕ້ອງໃຊ້ໃນ workshop

Axios: ໃຊ້ໃນການຕິດຕໍ່ກັບ API.
Bootstrap ແລະ Reactstrap: ໃຊ້ໃນການຕົບແຕ່ງໜ້າຕາຂອງ WebApp.

ຫຼັງຈາກ set up workshop ສຳເລັດແລ້ວແມ່ນເຮົາຈະເລີ່ມກັນເລີຍ:

ກ່ອນອື່ນໝົດແມ່ນເຮົາຈະເລີ່ມຈາກໜ້າຕາຂອງ WebApp ກ່ອນ, ຊຶ່ງ WebApp ຂອງເຮົາແມ່ນອອກມາພຽງໜ້າດຽວໂດຍບໍ່ໄດ້ທຳການ Link ໄປ path ນັ້ນ path ນີ້ ແຕ່ຈະເຮັດວຽກພຽງໜ້າດຽວເທົ່ານັ້ນ. ໂດຍໃນໜ້າ WebApp ຂອງເຮົາຈະຖືກແບ່ງອອກເປັນ 4 ສ່ວນດັ່ງນີ້: Navbar, List, Modify, Modal ແລະ ອີກ component 1 ທີ່ຖືກໃຊ້ເປັນປະຈຳ Spinner ຫຼື Loading ນັ້ນເອງ.

Navbar

ກ່ອນເຮົາຈະສ້າງ Navbar ແມ່ນເຮົາຈະມາສ້າງ context ໃນ index.js ກ່ອນ, ເພາະໃນ Navbar ແມ່ນມີການດຶງເອົາ context ຈາກ index.js ໂດຍໃຊ້ hook useContext

ສ້າງ file ທີ່ຊື່ວ່າ navbar.js ໄວ້ໃນ component, ເຊິ່ງໃນໜ້າໃນແມ່ນໄດ້ສະແດງເຖິງການນຳໃຊ້ Hook ໂຕໜຶ່ງທີ່ມີຊື່ວ່າ useContext ໂດຍໃນໜ້າໃນນີ້ແມ່ນເຮົາໃຊ້ useContext ເພື່ອດຶງເອົາ title ມາຈາກ Root component ກໍ index.js ນັ້ນເອງ

Lists

Modal

Modify

Spinner

ຫຼັງຈາກທີ່ເຮັດສ່ວນຂອງ UI ສຳເລັດແລ້ວ, ເຮົາຈະມາຕໍ່ໃນສ່ວນຂອງການດຶງຂໍ້ມູນມາຈາກ API. ເຊິ່ງເຮົາຈະທຳການສ້າງ apiServices.js ໄວ້ໃນ Services ດັ່ງນີ້

ທຳອິດແມ່ນເຮົາຈຳເປັນຈະຕ້ອງ import axios ທີ່ໃຊ້ການຕິດຕໍ່ກັບ API, ຫຼັງຈາກນັ້ນ ເຮົາຈະສ້າງ Method ໂຕໜຶ່ງຄື apiCall ເປັນ local method ເຊິ່ງຄວາມສາມາດຂອງມັນກໍຄືສາມາດດຶງ, ເພີ່ມ, ແກ້ໄຂ ແລະ ລົບຂໍ້ມູນໄດ້, ໂດຍຂື້ນກັບ parameters ທີ່ເຮົາລະບຸໃຫ້. ຫຼັງຈາກນັ້ນ ເຮົາຈະໃຊ້ method ດັ່ງກ່າວ ມາສ້າງອີກ 5 methods ຄື: fetchData, fetchOne, editData, deleteData ແລະ addData. ຄວາມສາມາດຂອງ 5 methods ນີ້ແມ່ນກົງຕາມຊື່ເລີຍ fetchData ຄືການດຶງເອົາຂໍ້ມູນທັງໝົດມາຈາກ database, fetchOne ຄືສາມາດດຶງຂໍ້ມູນມາໄດ້ 1 ຊຸດໂດຍອີງຕາມ ID, editData ສາມາດແກ້ໄຂຂໍ້ມູນໄດ້ໂດຍອ້າງອີງຈາກ ID, deleteData ສາມາດລົບຂໍ້ມູນໄດ້ໂດຍອ້າງອີງຈາກ ID ແລະ ສຸດທ້າຍ addData ສາມາດເພີ່ມຂໍ້ມູນເຂົ້າໃນ database.

ຂັ້ນຕອນສຸດທ້າຍແມ່ນເຮົາຈະລວມເອົາທຸກຢ່າງທີ່ເຮົາສ້າງມາຂ້າງເທິງນັ້ນມາລວມໄວ້ໃນ app.js. ໃນໜ້ານີ້ແມ່ນຖືໄດ້ວ່າເກືອບຈະລວມເອົາທຸກໆ Hooks ທີ່ນິຍົມໃຊ້ກັນເຊັ່ນ: useState, useEffect, useRef ເປັນຕົ້ນ.

ຜົນທີ່ໄດ້ຮັບ

ສະຫຼຸບ

React hooks ເປັນ features ທີ່ສຳຄັນ ແລະ ຊ່ວຍເຮັດໃຫ້ການຂຽນ react ມີຄວາມສະດວກສະບາຍ, ກະທັດຫັດ, ແລະ ຍັງວ່ອງໄວອີກດ້ວຍ. ໃນບົດຄວາມນີ້ແມ່ນເຮົາໄດ້ພາມາສ້າງ crud WebApp ແບບງ່າຍໆ ໂດຍການນຳເອົາ React Hooks ເຂົ້າຊ່ວຍໃນການຈັດການກັບ state ຕ່າງໆ, ການເຂົ້າເຖິງ lifecycle ຂອງ react ໂດຍໃຊ້ useEffect. ນອກຈາກນັ້ນ ເຮົາຍັງຈຳ useContext ໃນການເຂົ້າເຖິງ context ແບບທັນສະໄໝ ແລະ ນຳໃຊ້ useRef ໃນການເຂົ້າເຖິງ HTML Tag ເພື່ອງ່າຍໃນການດຶງເອົາຄ່າຕ່າງໆ.​ ແລະ ສຸດທ້າຍແມ່ນເຮົາໄດ້ຮຽນຮູ້ເຖິງການນຳໃຊ້ Restful API ກັບ React ນຳອີກ.​ ຖ້າຫາກມີຫຍັງທີ່ຂາດຕົກບົກພ່ອງຜູ້ຂຽນເອງກໍຂໍໂທດຂໍອະໄພມານະທີ່ນີ້ ແລະ ຫາກຜູ້ອ່ານຄົນຕ້ອງການຕຳນິຕິຊົມກໍສາມາດ comments ໄວ້ໄດ້ເພື່ອຜູ້ຂຽນຈະໄດ້ນຳໄປປັບປຸງໃນບົດຄວາມ ໜ້າໃຫ້ດີກ່ວາເກົ່າ,​ ຂອບໃຈ!!!!!!!!!!!!!!!

References: https://reactjs.org/docs/hooks-reference.html
ສາມາດ Download Codes ໄດ້ທີ່: https://github.com/seau-comet/hook
Demo: https://seau-comet.github.io/hook/

No Comments
Post a Comment