ตอบสนองแนวทางปฏิบัติที่ดีที่สุดเพื่อยกระดับเกมของคุณในปี 2565

React ยังคงเป็นหนึ่งในไลบรารีที่ได้รับความนิยมสูงสุดสำหรับการสร้างอินเทอร์เฟซผู้ใช้เมื่อสร้างเว็บแอปพลิเคชัน มีการใช้อย่างแพร่หลายในหลายบริษัทและมีชุมชนที่กระตือรือร้น

ในฐานะนักพัฒนา React การทำความเข้าใจว่าไลบรารีทำงานอย่างไรไม่ใช่สิ่งเดียวที่คุณต้องสร้างโปรเจ็กต์ที่เป็นมิตรต่อผู้ใช้ ปรับขนาดได้ง่าย และบำรุงรักษาได้

นอกจากนี้ยังจำเป็นต้องเข้าใจข้อตกลงบางประการที่จะช่วยให้คุณเขียนโค้ด React ได้อย่างสะอาด การดำเนินการนี้ไม่เพียงแต่ช่วยให้คุณให้บริการผู้ใช้ได้ดีขึ้นเท่านั้น แต่ยังช่วยให้คุณและนักพัฒนาคนอื่นๆ ที่ทำงานในโครงการดูแลรักษาฐานรหัสได้ง่ายขึ้นอีกด้วย กำลังทำโปรเจกต์ React ต่อไปอยู่ใช่ไหม การเรียนรู้ที่จะเขียนโค้ด React ที่สะอาดคือกล้ามเนื้อที่เปลี่ยนเกม เริ่มต้นที่นี่ ️ คลิกเพื่อทวีต

ในบทแนะนำสอนการใช้งานนี้ เราจะเริ่มด้วยการพูดคุยเกี่ยวกับความท้าทายทั่วไปที่นักพัฒนา React ต้องเผชิญ จากนั้นดำดิ่งสู่แนวทางปฏิบัติที่ดีที่สุดที่คุณสามารถทำตามเพื่อช่วยให้คุณเขียนโค้ด React ได้อย่างมีประสิทธิภาพมากขึ้น

มาเริ่มกันเลย!

ความท้าทายตอบสนองนักพัฒนาเผชิญ

ในส่วนนี้ เราจะพูดถึงความท้าทายที่สำคัญบางประการที่นักพัฒนา React ต้องเผชิญระหว่างและหลังการสร้างเว็บแอป

ความท้าทายทั้งหมดที่คุณจะเห็นในส่วนนี้สามารถหลีกเลี่ยงได้โดยปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุด ซึ่งเราจะกล่าวถึงในรายละเอียดในภายหลัง

เราจะเริ่มต้นด้วยปัญหาพื้นฐานที่สุดที่ส่งผลกระทบต่อผู้เริ่มต้น

ข้อกำหนดเบื้องต้นในการตอบสนอง

หนึ่งในความท้าทายสำคัญที่นักพัฒนา React ต้องเผชิญคือการทำความเข้าใจว่าไลบรารีทำงานอย่างไร พร้อมกับข้อกำหนดเบื้องต้นในการใช้งาน

ก่อนเรียนรู้ React คุณต้องรู้สองสามสิ่งก่อน เนื่องจาก React ใช้ JSX การรู้ HTML และ JavaScript จึงเป็นสิ่งจำเป็น แน่นอน คุณควรรู้จัก CSS หรือเฟรมเวิร์ก CSS สมัยใหม่สำหรับการออกแบบเว็บแอปของคุณด้วย

โดยเฉพาะอย่างยิ่ง มีแนวคิดและฟังก์ชันการทำงานของ JavaScript หลักที่คุณควรรู้ก่อนที่จะดำดิ่งสู่ React บางส่วนซึ่งส่วนใหญ่อยู่ภายใต้ ES6 รวมถึง:

• ฟังก์ชั่นลูกศร
• ตัวดำเนินการส่วนที่เหลือ
• ตัวดำเนินการกระจาย
• โมดูล
• การทำลายล้าง
• วิธีการอาร์เรย์
• ตัวอักษรแม่แบบ
• สัญญา
• let และตัวแปร const

หัวข้อ JavaScript ที่ระบุไว้ข้างต้นจะช่วยให้คุณเข้าใจว่า React ทำงานอย่างไรในฐานะผู้เริ่มต้น

คุณจะได้เรียนรู้เกี่ยวกับแนวคิดใหม่ใน React เช่น:

• ส่วนประกอบ
• เจเอสเอ็กซ์
• การจัดการของรัฐ
• อุปกรณ์ประกอบฉาก
• องค์ประกอบการแสดงผล
• การจัดการเหตุการณ์
• การแสดงผลตามเงื่อนไข
• รายการและคีย์
• แบบฟอร์มและการตรวจสอบแบบฟอร์ม
• ตะขอ
• สไตล์

การมีความเข้าใจอย่างถ่องแท้เกี่ยวกับแนวคิดของ React และข้อกำหนดเบื้องต้นในการใช้ไลบรารีจะช่วยให้คุณใช้คุณลักษณะต่างๆ ได้อย่างมีประสิทธิภาพ

แต่อย่าปล่อยให้สิ่งนี้ครอบงำคุณ ด้วยการฝึกฝนและการเรียนรู้อย่างต่อเนื่อง คุณจะเข้าใจวิธีใช้ React เพื่อสร้างโปรเจ็กต์ที่ยอดเยี่ยมได้อย่างรวดเร็ว คล้ายกับการเรียนรู้ภาษาโปรแกรมใหม่ — ใช้เวลาเพียงเล็กน้อยและฝึกฝนเพื่อทำความเข้าใจ

การจัดการของรัฐ

การอัปเดตสถานะ/ค่าของตัวแปรของคุณใน React นั้นแตกต่างจากวิธีที่คุณทำโดยใช้วานิลลา JavaScript

ใน JavaScript การอัปเดตตัวแปรทำได้ง่ายเพียงแค่กำหนดค่าใหม่ให้กับตัวแปรโดยใช้ตัวดำเนินการเท่ากับ ( = ) นี่คือตัวอย่าง:

 var x = 300; function updateX(){ x = 100; } updateX(); console.log(x); // 100

ในโค้ดด้านบน เราสร้างตัวแปรชื่อ x ด้วยค่าเริ่มต้น 300

เมื่อใช้ตัวดำเนินการเท่ากับ เรากำหนดค่าใหม่เป็น 100 ให้กับมัน สิ่งนี้เขียนขึ้นภายในฟังก์ชั่น updateX

ใน React การอัปเดตสถานะ/ค่าของตัวแปรจะทำงานแตกต่างออกไป นี่คือวิธี:

 import { useState } from 'react'; function App() { const [x, setX] = useState(300) let updateX =()=>{ setX(100); } return ( <div className="App"> <h1>{x}</h1> <button onClick={updateX}>Update X</button> </div> ); } export default App;

เมื่ออัปเดตสถานะของตัวแปรใน React ให้ใช้ useState Hook มีสามสิ่งที่ควรทราบเมื่อใช้ Hook นี้:

• ชื่อตัวแปร
• ฟังก์ชันสำหรับการอัพเดตตัวแปร
• ค่าเริ่มต้น/สถานะของตัวแปร

ในตัวอย่างของเรา x คือชื่อของตัวแปร และ setX คือฟังก์ชันสำหรับอัปเดตค่าของ x ในขณะที่ค่าเริ่มต้น ( 300 ) ของ x จะถูกส่งผ่านเป็นพารามิเตอร์ไปยังฟังก์ชัน useState :

 const [x, setX] = useState(300)

ในการอัปเดตสถานะของ x เราใช้ฟังก์ชัน setX :

 import { useState } from 'react'; let updateX =()=>{ setX(100); }

ดังนั้น ฟังก์ชัน updateX จะเรียกใช้ฟังก์ชัน setX ซึ่งจะตั้งค่า x เป็น 100

แม้ว่าสิ่งนี้ดูเหมือนจะทำงานได้อย่างสมบูรณ์แบบสำหรับการอัปเดตสถานะของตัวแปรของคุณ แต่ก็เพิ่มความซับซ้อนของโค้ดของคุณในโครงการขนาดใหญ่มาก การมี State Hooks จำนวนมากทำให้โค้ดยากต่อการดูแลและทำความเข้าใจ โดยเฉพาะอย่างยิ่งเมื่อโครงการของคุณขยายขนาด

ปัญหาอีกประการหนึ่งในการใช้ State Hook คือตัวแปรเหล่านี้ที่สร้างขึ้นจะไม่ถูกแชร์ในส่วนประกอบต่างๆ ที่ประกอบกันเป็นแอปของคุณ คุณยังคงต้องใช้ Props เพื่อส่งข้อมูลจากตัวแปรหนึ่งไปยังอีกตัวแปรหนึ่ง

โชคดีสำหรับเราที่มีไลบรารีที่สร้างขึ้นเพื่อจัดการสถานะอย่างมีประสิทธิภาพใน React พวกเขายังอนุญาตให้คุณสร้างตัวแปรเพียงครั้งเดียวและใช้งานได้ทุกที่ที่คุณต้องการในแอป React ของคุณ ไลบรารีเหล่านี้บางส่วน ได้แก่ Redux, Recoil และ Zustand

ปัญหาในการเลือกไลบรารีของบุคคลที่สามสำหรับการจัดการสถานะคือคุณจะถูกบังคับให้เรียนรู้แนวคิดใหม่ ๆ ที่นอกเหนือไปจากสิ่งที่คุณได้เรียนรู้ใน React ตัวอย่างเช่น Redux เป็นที่รู้จักกันดีว่ามีโค้ดสำเร็จรูปจำนวนมาก ซึ่งทำให้ผู้เริ่มต้นเข้าใจได้ยาก (แม้ว่าจะได้รับการแก้ไขด้วย Redux Toolkit ซึ่งช่วยให้คุณเขียนโค้ดน้อยกว่าที่คุณเขียนด้วย Redux)

การบำรุงรักษาและความสามารถในการปรับขนาด

เนื่องจากข้อกำหนดของผู้ใช้ผลิตภัณฑ์มีการเปลี่ยนแปลงอยู่เสมอ จึงจำเป็นต้องแนะนำการเปลี่ยนแปลงรหัสที่ประกอบกันเป็นผลิตภัณฑ์อยู่เสมอ

มักจะเป็นเรื่องยากที่จะปรับขนาดโค้ดของคุณ เมื่อโค้ดนั้นไม่ง่ายสำหรับทีมในการดูแลรักษา ความยากลำบากเช่นนี้เกิดจากการปฏิบัติตามแนวทางปฏิบัติที่ไม่ดีเมื่อเขียนโค้ดของคุณ สิ่งเหล่านี้อาจดูเหมือนทำงานได้อย่างสมบูรณ์ในตอนแรก ทำให้คุณได้ผลลัพธ์ที่ต้องการ แต่สิ่งใดที่ได้ผล "สำหรับตอนนี้" จะไม่มีประสิทธิภาพสำหรับอนาคตและการเติบโตของโครงการของคุณ

ในหัวข้อถัดไป เราจะกล่าวถึงข้อตกลงบางอย่างที่สามารถช่วยปรับปรุงวิธีการเขียนโค้ด React ของคุณ ซึ่งจะช่วยให้คุณทำงานร่วมกันได้ดีขึ้นเมื่อทำงานกับทีมงานมืออาชีพ

ตอบสนองแนวทางปฏิบัติที่ดีที่สุด

ในส่วนนี้ เราจะพูดถึงแนวทางปฏิบัติที่ดีที่สุดที่ควรปฏิบัติตามเมื่อเขียนโค้ด React ของคุณ มาดำน้ำกันเถอะ

1. รักษาโครงสร้างโฟลเดอร์ที่ชัดเจน

โครงสร้างโฟลเดอร์ช่วยให้คุณและนักพัฒนาคนอื่นๆ เข้าใจการจัดเรียงไฟล์และเนื้อหาที่ใช้ในโครงการ

ด้วยโครงสร้างโฟลเดอร์ที่ดี ทำให้ง่ายต่อการนำทางไปรอบๆ อย่างง่ายดาย ประหยัดเวลาและช่วยไม่ให้เกิดความสับสน โครงสร้างโฟลเดอร์จะแตกต่างกันไปตามความชอบของแต่ละทีม แต่นี่คือโครงสร้างโฟลเดอร์บางส่วนที่ใช้กันทั่วไปใน React

จัดกลุ่มโฟลเดอร์ตามคุณสมบัติหรือเส้นทาง

การจัดกลุ่มไฟล์ในโฟลเดอร์ของคุณตามเส้นทางและคุณลักษณะต่างๆ จะช่วยให้ทุกอย่างเกี่ยวกับคุณลักษณะหนึ่งๆ อยู่ในที่เดียว ตัวอย่างเช่น หากคุณมีแดชบอร์ดผู้ใช้ คุณสามารถมี JavaScript, CSS และไฟล์ทดสอบที่เกี่ยวข้องกับแดชบอร์ดได้ในโฟลเดอร์เดียว

นี่คือตัวอย่างที่จะแสดงให้เห็นว่า:

 dashboard/ index.js dashboard.css dashboard.test.js home/ index.js Home.css HomeAPI.js Home.test.js blog/ index.js Blog.css Blog.test.js

ดังที่เห็นด้านบน ฟีเจอร์หลักแต่ละรายการของแอปมีไฟล์และเนื้อหาทั้งหมดจัดเก็บไว้ในโฟลเดอร์เดียวกัน

การจัดกลุ่มไฟล์ที่คล้ายกัน

หรือคุณสามารถจัดกลุ่มไฟล์ที่คล้ายกันในโฟลเดอร์เดียวกัน คุณยังสามารถมีแต่ละโฟลเดอร์สำหรับ Hooks ส่วนประกอบ และอื่นๆ ลองดูตัวอย่างนี้:

 hooks/ useFetchData.js usePostData.js components/ Dashboard.js Dashboard.css Home.js Home.css Blog.js Blog.css

คุณไม่จำเป็นต้องปฏิบัติตามโครงสร้างโฟลเดอร์เหล่านี้อย่างเคร่งครัดเมื่อเขียนโค้ด หากคุณมีวิธีการสั่งซื้อไฟล์แบบเฉพาะเจาะจง ลงมือเลย ตราบใดที่คุณและผู้พัฒนารายอื่นมีความเข้าใจที่ชัดเจนเกี่ยวกับโครงสร้างไฟล์ คุณก็พร้อมลุย!

2. สร้างคำสั่งนำเข้าที่มีโครงสร้าง

เนื่องจากแอปพลิเคชัน React ของคุณเติบโตอย่างต่อเนื่อง คุณจึงต้องนำเข้าเพิ่มเติม โครงสร้างการนำเข้าของคุณมีส่วนช่วยอย่างมากในการช่วยให้คุณเข้าใจว่าส่วนประกอบต่างๆ ประกอบกันเป็นอย่างไร

ตามแบบแผน การจัดกลุ่มโปรแกรมอรรถประโยชน์ที่คล้ายกันเข้าด้วยกันดูเหมือนจะทำงานได้ดี ตัวอย่างเช่น คุณสามารถจัดกลุ่มการนำเข้าภายนอกหรือของบุคคลที่สามโดยแยกจากการนำเข้าในเครื่อง

ลองดูตัวอย่างต่อไปนี้:

 import { Routes, Route } from "react-router-dom"; import { createSlice } from "@reduxjs/toolkit"; import { Menu } from "@headlessui/react"; import Home from "./Home"; import logo from "./logo.svg"; import "./App.css";

ในโค้ดด้านบน ขั้นแรกเราได้จัดกลุ่มไลบรารีของบุคคลที่สามไว้ด้วยกัน (ไลบรารีเหล่านี้เป็นไลบรารีที่เราต้องติดตั้งล่วงหน้า)

จากนั้นเรานำเข้าไฟล์ที่เราสร้างขึ้นในเครื่อง เช่น สไตล์ชีต รูปภาพ และส่วนประกอบต่างๆ

เพื่อความเรียบง่ายและเข้าใจง่าย ตัวอย่างของเราไม่ได้แสดงถึงโค้ดเบสขนาดใหญ่มาก แต่โปรดจำไว้ว่าการอิมพอร์ตรูปแบบนี้ให้สอดคล้องกันจะช่วยให้คุณและนักพัฒนาคนอื่นๆ เข้าใจแอป React ของคุณได้ดีขึ้น

คุณสามารถจัดกลุ่มไฟล์ในเครื่องของคุณเพิ่มเติมตามประเภทไฟล์ได้หากวิธีนี้เหมาะกับคุณ นั่นคือ การจัดกลุ่มส่วนประกอบ รูปภาพ สไตล์ชีต Hooks และอื่นๆ แยกกันภายใต้การนำเข้าในเครื่องของคุณ

นี่คือตัวอย่าง:

 import Home from "./Home"; import About from "./About" import Contact from "./Contact" import logo from "./logo.svg"; import closeBtn from "./close-btn.svg" import "./App.css"; import "Home.css"

3. ปฏิบัติตามข้อตกลงในการตั้งชื่อ

แบบแผนการตั้งชื่อช่วยปรับปรุงการอ่านรหัส สิ่งนี้ไม่ได้ใช้ได้กับชื่อคอมโพเนนต์เท่านั้น แต่ยังรวมถึงชื่อตัวแปรของคุณ ไปจนถึง Hooks ของคุณ

เอกสารประกอบของ React ไม่มีรูปแบบที่เป็นทางการสำหรับการตั้งชื่อส่วนประกอบของคุณ แบบแผนการตั้งชื่อที่ใช้มากที่สุดคือ camelCase และ PascalCase

PascalCase ส่วนใหญ่จะใช้สำหรับชื่อส่วนประกอบ:

 import React from 'react' function StudentList() { return ( <div>StudentList</div> ) } export default StudentList

คอมโพเนนต์ด้านบนนี้มีชื่อว่า StudentList ซึ่งอ่านง่ายกว่า Studentlist หรือ studentlist

ในทางกลับกัน หลักการตั้งชื่อ camelCase ส่วนใหญ่จะใช้สำหรับการตั้งชื่อตัวแปร, Hooks, ฟังก์ชัน, อาร์เรย์ และอื่นๆ:

 & const [firstName, setFirstName] = useState("Ihechikara"); const studentList = []; const studentObject = {}; const getStudent = () => {} const [firstName, setFirstName] = useState("Ihechikara"); const studentList = []; const studentObject = {}; const getStudent = () => {}

4. ใช้ไม้ถูพื้น

เครื่องมือ linter ช่วยปรับปรุงคุณภาพของโค้ด เครื่องมือ linter ที่ได้รับความนิยมมากที่สุดอย่างหนึ่งสำหรับ JavaScript และ React คือ ESlint แต่สิ่งนี้จะช่วยปรับปรุงคุณภาพของโค้ดได้อย่างไร

เครื่องมือ linter ช่วยให้มีความสอดคล้องกันในฐานรหัส เมื่อใช้เครื่องมือเช่น ESLint คุณสามารถตั้งกฎที่คุณต้องการให้นักพัฒนาทุกคนที่ทำงานในโครงการปฏิบัติตาม กฎเหล่านี้อาจรวมถึงข้อกำหนดสำหรับการใช้อัญประกาศคู่แทนอัญประกาศเดี่ยว เครื่องหมายปีกการอบๆ ฟังก์ชันลูกศร แบบแผนการตั้งชื่อเฉพาะ และอื่นๆ อีกมากมาย

เครื่องมือจะสังเกตโค้ดของคุณแล้วแจ้งให้คุณทราบเมื่อมีการละเมิดกฎ คำหลักหรือบรรทัดที่ละเมิดกฎมักจะขีดเส้นใต้เป็นสีแดง

เนื่องจากนักพัฒนาทุกคนมีสไตล์การเขียนโค้ดของตัวเอง เครื่องมือ linter สามารถช่วยในเรื่องความสม่ำเสมอของโค้ดได้

เครื่องมือ Linter ยังสามารถช่วยให้เราแก้ไขจุดบกพร่องได้อย่างง่ายดาย เราสามารถเห็นการสะกดคำผิด ตัวแปรที่ประกาศแต่ไม่ได้ใช้ และฟังก์ชันอื่นๆ ดังกล่าว ข้อบกพร่องเหล่านี้บางส่วนสามารถแก้ไขได้โดยอัตโนมัติเมื่อคุณเขียนโค้ด

เครื่องมือต่างๆ เช่น ESLint ถูกสร้างขึ้นในโปรแกรมแก้ไขโค้ดส่วนใหญ่ ดังนั้นคุณจึงได้รับฟังก์ชันการทำงานแบบ linter ในขณะเดินทาง คุณยังสามารถกำหนดค่าให้เหมาะกับความต้องการในการเข้ารหัสของคุณ

5. จ้าง Snippet Libraries

สิ่งที่ยอดเยี่ยมเกี่ยวกับการใช้เฟรมเวิร์กกับชุมชนที่ใช้งานอยู่คือความพร้อมของเครื่องมือที่สร้างขึ้นเพื่อทำให้การพัฒนาง่ายขึ้น

Snippet libraries สามารถทำให้การพัฒนาเร็วขึ้นโดยการให้โค้ดที่สร้างไว้ล่วงหน้าที่นักพัฒนาใช้บ่อยๆ

ตัวอย่างที่ดีคือส่วนขยาย ES7+ React/Redux/React-Native snippets ซึ่งมีคำสั่งที่เป็นประโยชน์มากมายสำหรับการสร้างโค้ดที่สร้างไว้ล่วงหน้า ตัวอย่างเช่น หากคุณต้องการสร้างส่วนประกอบการทำงานของ React โดยไม่ต้องพิมพ์โค้ดทั้งหมด สิ่งที่คุณต้องทำโดยใช้ส่วนขยายคือพิมพ์ rfce แล้วกด Enter

คำสั่งด้านบนจะสร้างส่วนประกอบการทำงานที่มีชื่อที่สอดคล้องกับชื่อไฟล์ เราสร้างโค้ดด้านล่างโดยใช้ส่วนขยาย snippets ของ ES7+ React/Redux/React-Native:

 import React from 'react' function StudentList() { return ( <div>StudentList</div> ) } export default StudentList

เครื่องมือตัวอย่างที่มีประโยชน์อีกอย่างคือส่วนขยาย Tailwind CSS IntelliSense ซึ่งทำให้กระบวนการจัดรูปแบบหน้าเว็บง่ายขึ้นด้วย Tailwind CSS ส่วนขยายสามารถช่วยคุณในการเติมข้อความอัตโนมัติโดยแนะนำคลาสยูทิลิตี้ การเน้นไวยากรณ์ และฟังก์ชันการเรียงซ้อน คุณยังสามารถดูว่าสีของคุณเป็นอย่างไรในขณะที่เขียนโค้ด

6. รวม CSS และ JavaScript

เมื่อทำงานในโครงการขนาดใหญ่ การใช้ไฟล์สไตล์ชีตที่แตกต่างกันสำหรับแต่ละคอมโพเนนต์อาจทำให้โครงสร้างไฟล์ของคุณใหญ่เทอะทะและนำทางได้ยาก

วิธีแก้ไขปัญหานี้คือการรวมโค้ด CSS และ JSX ของคุณเข้าด้วยกัน คุณสามารถใช้เฟรมเวิร์ก/ไลบรารี เช่น Tailwind CSS และ Emotion สำหรับสิ่งนี้

สไตล์ของ Tailwind CSS มีลักษณะดังนี้:

 <p className="font-bold mr-8">resource edge</p>

โค้ดด้านบนทำให้องค์ประกอบย่อหน้าเป็นแบบอักษรตัวหนาและเพิ่มระยะขอบด้านขวา เราสามารถทำได้โดยใช้คลาสยูทิลิตี้ของเฟรมเวิร์ก

วิธีจัดรูปแบบองค์ประกอบโดยใช้อารมณ์มีดังนี้

 <h1 css={css` color: black; font-size: 30px; `} > Hello World! </h1>

7. จำกัด การสร้างส่วนประกอบ

หนึ่งในคุณสมบัติหลักของ React คือการนำโค้ดกลับมาใช้ใหม่ได้ คุณสามารถสร้างคอมโพเนนต์และใช้ตรรกะซ้ำได้หลายครั้งโดยไม่ต้องเขียนตรรกะนั้นใหม่

ด้วยเหตุนี้ คุณจึงควรจำกัดจำนวนส่วนประกอบที่คุณสร้างเสมอ การไม่ทำเช่นนั้นจะทำให้โครงสร้างไฟล์ขยายตัวด้วยไฟล์ที่ไม่จำเป็นซึ่งไม่ควรมีอยู่ตั้งแต่แรก

เราจะใช้ตัวอย่างง่ายๆ เพื่อสาธิตสิ่งนี้:

 function UserInfo() { return ( <div> <h1>My name is Ihechikara.</h1> </div> ); } export default UserInfo

ส่วนประกอบด้านบนแสดงชื่อผู้ใช้ หากเราต้องสร้างไฟล์ที่แตกต่างกันสำหรับผู้ใช้ทุกคน ในที่สุดเราจะมีไฟล์จำนวนมากเกินสมควร (แน่นอนว่าเรากำลังใช้ข้อมูลผู้ใช้เพื่อทำให้ทุกอย่างง่ายขึ้น ในสถานการณ์ชีวิตจริง คุณอาจต้องรับมือกับตรรกะประเภทอื่น)

เพื่อให้ส่วนประกอบของเราสามารถนำมาใช้ซ้ำได้ เราสามารถใช้อุปกรณ์ประกอบฉากได้ นี่คือวิธี:

 function UserInfo({userName}) { return ( <div> <h1>My name is {userName}.</h1> </div> ); } export default UserInfo

หลังจากนั้น เราสามารถนำเข้าส่วนประกอบนี้และใช้งานได้หลายครั้งตามที่เราต้องการ:

 import UserInfo from "./UserInfo"; function App() { return ( <div className="App"> <UserInfo userName={"Ihechikara"} /> <UserInfo userName={"John"} /> <UserInfo userName={"Jane"} /> </div> ); } export default App;

ตอนนี้เรามีสามอินสแตนซ์ที่แตกต่างกันของคอมโพเนนต์ UserInfo ที่มาจากตรรกะที่สร้างขึ้นในไฟล์เดียว แทนที่จะมีไฟล์แยกกันสามไฟล์สำหรับผู้ใช้แต่ละคน

8. ใช้ Lazy Loading

การโหลดแบบ Lazy Loading มีประโยชน์มากเมื่อแอป React ของคุณเติบโตขึ้น เมื่อคุณมีโค้ดเบสขนาดใหญ่ เวลาในการโหลดหน้าเว็บของคุณจะช้าลง นี่เป็นเพราะต้องโหลดแอปทั้งหมดทุกครั้งสำหรับผู้ใช้ทุกคน

“การโหลดแบบขี้เกียจ” เป็นคำที่ใช้สำหรับการใช้งานต่างๆ ที่นี่ เราเชื่อมโยงกับ JavaScript และ React แต่คุณก็สามารถใช้การโหลดแบบขี้เกียจกับรูปภาพและวิดีโอได้เช่นกัน

ตามค่าเริ่มต้น React จะรวมและปรับใช้แอปพลิเคชันทั้งหมด แต่เราสามารถเปลี่ยนพฤติกรรมนี้ได้โดยใช้การโหลดแบบ Lazy Loading หรือที่เรียกว่าการแยกโค้ด

โดยพื้นฐานแล้ว คุณสามารถจำกัดส่วนใดของแอปที่จะโหลด ณ จุดใดจุดหนึ่งได้ ทำได้โดยการแยกบันเดิลของคุณและโหลดเฉพาะบันเดิลที่เกี่ยวข้องกับความต้องการของผู้ใช้ ตัวอย่างเช่น คุณสามารถโหลดเฉพาะลอจิกที่จำเป็นสำหรับผู้ใช้ในการลงชื่อเข้าใช้ก่อน จากนั้นโหลดลอจิกสำหรับแดชบอร์ดของผู้ใช้หลังจากที่ผู้ใช้ลงชื่อเข้าใช้สำเร็จเท่านั้น

9. ใช้ตะขอที่ใช้ซ้ำได้

Hooks ใน React ให้คุณใช้ประโยชน์จากฟังก์ชันเพิ่มเติมบางอย่างของ React เช่น การโต้ตอบกับสถานะของคอมโพเนนต์และเรียกใช้เอฟเฟกต์ที่ตามมาซึ่งสัมพันธ์กับการเปลี่ยนแปลงสถานะบางอย่างในคอมโพเนนต์ของคุณ เราสามารถทำทั้งหมดนี้ได้โดยไม่ต้องเขียนส่วนประกอบของคลาส

เรายังทำให้ Hooks ใช้ซ้ำได้ เราจึงไม่ต้องพิมพ์ตรรกะซ้ำในทุกไฟล์ที่ใช้ เราทำเช่นนี้โดยสร้าง Hooks แบบกำหนดเองที่สามารถนำเข้าได้ทุกที่ในแอป

ในตัวอย่างด้านล่าง เราจะสร้าง Hook สำหรับดึงข้อมูลจาก API ภายนอก:

 import { useState, useEffect } from "react"; function useFetchData(url) { const [data, setData] = useState(null); useEffect(() => { fetch(url) .then((res) => res.json()) .then((data) => setData(data)) .catch((err) => console.log(`Error: ${err}`)); }, [url]); return { data }; } export default useFetchData;

เราได้สร้าง Hook สำหรับดึงข้อมูลจาก API ด้านบน ตอนนี้สามารถนำเข้าส่วนประกอบใดก็ได้ สิ่งนี้ช่วยให้เราไม่ต้องเครียดกับการพิมพ์ตรรกะทั้งหมดในทุกองค์ประกอบที่เราต้องดึงข้อมูลภายนอก

ประเภทของ Hooks แบบกำหนดเองที่เราสามารถสร้างได้ใน React นั้นไม่มีขีดจำกัด ดังนั้นคุณจึงเป็นผู้ตัดสินใจว่าจะใช้งานอย่างไร เพียงจำไว้ว่าหากเป็นฟังก์ชันที่ต้องใช้งานซ้ำในคอมโพเนนต์ต่างๆ คุณควรทำให้ใช้ซ้ำได้อย่างแน่นอน

10. บันทึกและจัดการข้อผิดพลาด

มีหลายวิธีในการจัดการข้อผิดพลาดใน React เช่น การใช้ขอบเขตข้อผิดพลาด ลองและจับบล็อก หรือใช้ไลบรารี่ภายนอก เช่น react-error-boundary

ขอบเขตข้อผิดพลาดที่สร้างขึ้นใน React 16 เป็นฟังก์ชันสำหรับส่วนประกอบของคลาส ดังนั้นเราจะไม่พูดถึงเรื่องนี้เพราะขอแนะนำให้คุณใช้ส่วนประกอบการทำงานแทนส่วนประกอบของคลาส

ในทางกลับกัน การใช้บล็อก try and catch ใช้ได้กับรหัสที่จำเป็นเท่านั้น แต่ใช้ไม่ได้กับรหัสประกาศ ซึ่งหมายความว่าไม่ใช่ตัวเลือกที่ดีเมื่อทำงานกับ JSX

คำแนะนำที่ดีที่สุดของเราคือการใช้ไลบรารี เช่น react-error-boundary ไลบรารีนี้มีฟังก์ชันการทำงานที่สามารถครอบคลุมส่วนประกอบต่างๆ ของคุณ ซึ่งจะช่วยให้คุณตรวจจับข้อผิดพลาดในขณะที่แอป React ของคุณกำลังถูกเรนเดอร์

11. ตรวจสอบและทดสอบโค้ดของคุณ

การทดสอบโค้ดของคุณระหว่างการพัฒนาจะช่วยให้คุณเขียนโค้ดที่สามารถบำรุงรักษาได้ น่าเสียดายที่นี่คือสิ่งที่นักพัฒนาจำนวนมากละเลย

แม้ว่าหลายคนอาจแย้งว่าการทดสอบไม่ใช่เรื่องใหญ่เมื่อสร้างเว็บแอปของคุณ แต่ก็มาพร้อมกับข้อดีมากมาย นี่เป็นเพียงไม่กี่:

• การทดสอบช่วยให้คุณตรวจพบข้อผิดพลาดและจุดบกพร่อง
• การตรวจจับข้อบกพร่องนำไปสู่การปรับปรุงคุณภาพของโค้ด
• การทดสอบหน่วยสามารถจัดทำเป็นเอกสารสำหรับการรวบรวมข้อมูลและการอ้างอิงในอนาคต
• การตรวจจับจุดบกพร่องตั้งแต่เนิ่นๆ ช่วยให้คุณประหยัดค่าใช้จ่ายในการจ่ายเงินให้นักพัฒนาเพื่อดับไฟที่จุดบกพร่องอาจเกิดขึ้นได้หากไม่มีการตรวจสอบ
• แอปและไซต์ที่ปราศจากข้อบกพร่องได้รับความไว้วางใจและความภักดีจากผู้ชม ซึ่งนำไปสู่การเติบโตที่มากขึ้น

คุณสามารถใช้เครื่องมืออย่าง Jest หรือ React Testing Library เพื่อทดสอบโค้ดของคุณ มีเครื่องมือทดสอบมากมายที่คุณสามารถเลือกได้ — ทั้งหมดขึ้นอยู่กับเครื่องมือที่เหมาะกับคุณที่สุด

คุณยังสามารถทดสอบแอป React ของคุณในขณะที่คุณสร้างมันได้ด้วยการเรียกใช้แอปในเบราว์เซอร์ของคุณ คุณมักจะได้รับข้อผิดพลาดที่ตรวจพบแสดงบนหน้าจอ สิ่งนี้คล้ายกับการพัฒนาเว็บไซต์ WordPress โดยใช้ DevKinsta ซึ่งเป็นเครื่องมือที่ช่วยให้คุณออกแบบ พัฒนา และปรับใช้เว็บไซต์ WordPress บนเครื่องของคุณ

12. ใช้ประโยชน์จากองค์ประกอบการทำงาน

การใช้ส่วนประกอบการทำงานใน React มาพร้อมกับข้อดีมากมาย: คุณเขียนโค้ดน้อยลง อ่านง่ายขึ้น และเอกสารอย่างเป็นทางการของ React รุ่นเบต้ากำลังถูกเขียนใหม่โดยใช้ส่วนประกอบการทำงาน (Hooks) ดังนั้นคุณควรทำความคุ้นเคยกับการใช้งานเหล่านี้ .

ด้วยองค์ประกอบการทำงาน คุณไม่ต้องกังวลเกี่ยวกับการใช้ this หรือการใช้คลาส คุณยังสามารถจัดการสถานะของคอมโพเนนต์ได้อย่างง่ายดายด้วยการเขียนโค้ดน้อยลงด้วย Hooks

ทรัพยากรที่อัปเดตส่วนใหญ่ที่คุณพบบน React นั้นใช้องค์ประกอบการทำงาน ทำให้ง่ายต่อการทำความเข้าใจและปฏิบัติตามคำแนะนำที่เป็นประโยชน์และแหล่งข้อมูลที่สร้างโดยชุมชนเมื่อคุณประสบปัญหา

13. อัพเดทอยู่เสมอด้วยการตอบสนองการเปลี่ยนแปลงเวอร์ชัน

เมื่อเวลาผ่านไป ฟังก์ชันการทำงานใหม่จะถูกนำมาใช้ และฟังก์ชันเก่าบางส่วนจะได้รับการแก้ไข วิธีที่ดีที่สุดในการติดตามสิ่งนี้คือการดูเอกสารอย่างเป็นทางการ

คุณยังสามารถเข้าร่วมชุมชน React บนโซเชียลมีเดียเพื่อรับข้อมูลเกี่ยวกับการเปลี่ยนแปลงเมื่อเกิดขึ้น

การติดตาม React เวอร์ชันปัจจุบันอยู่เสมอจะช่วยให้คุณตัดสินใจได้ว่าเมื่อใดควรเพิ่มประสิทธิภาพหรือทำการเปลี่ยนแปลงโค้ดเบสของคุณเพื่อประสิทธิภาพที่ดีที่สุด

นอกจากนี้ยังมีไลบรารีภายนอกที่สร้างขึ้นโดยใช้ React ซึ่งคุณควรอัปเดตด้วยเช่นกัน เช่น React Router ซึ่งใช้สำหรับกำหนดเส้นทางใน React การรู้ว่าไลบรารีเหล่านี้ทำการเปลี่ยนแปลงอะไรบ้างจะช่วยให้คุณทำการเปลี่ยนแปลงที่สำคัญที่เกี่ยวข้องกับแอปของคุณ และทำให้ทุกอย่างง่ายขึ้นสำหรับทุกคนที่ทำงานในโครงการ

นอกจากนี้ ฟังก์ชันการทำงานบางอย่างอาจเลิกใช้งานและคำหลักบางคำสามารถเปลี่ยนแปลงได้เมื่อมีการออกเวอร์ชันใหม่ เพื่อความปลอดภัย คุณควรอ่านเอกสารและคำแนะนำเสมอเมื่อมีการเปลี่ยนแปลงดังกล่าว

14. ใช้ผู้ให้บริการโฮสติ้งที่รวดเร็วและปลอดภัย

หากคุณต้องการทำให้เว็บแอปของคุณทุกคนสามารถเข้าถึงได้หลังจากสร้างเสร็จ คุณจะต้องโฮสต์เว็บแอปนั้น สิ่งสำคัญคือคุณต้องใช้บริการโฮสติ้งที่รวดเร็วและปลอดภัย

การโฮสต์เว็บไซต์ของคุณช่วยให้คุณเข้าถึงเครื่องมือต่างๆ ที่ทำให้การปรับขนาดและการจัดการเว็บไซต์ของคุณเป็นเรื่องง่าย เซิร์ฟเวอร์ที่โฮสต์เว็บไซต์ของคุณทำให้สามารถจัดเก็บไฟล์ในเครื่องของคุณอย่างปลอดภัยบนเซิร์ฟเวอร์ ประโยชน์โดยรวมของการโฮสต์เว็บไซต์ของคุณคือคนอื่นๆ ได้เห็นสิ่งที่ยอดเยี่ยมที่คุณสร้างขึ้น

มีหลากหลายแพลตฟอร์มที่ให้บริการโฮสติ้งฟรีแก่นักพัฒนา เช่น Firebase, Vercel, Netlify, GitHub Pages หรือบริการแบบชำระเงิน เช่น Azure, AWS, GoDaddy, Bluehost และอื่นๆ

คุณยังสามารถใช้แพลตฟอร์มการโฮสต์แอปพลิเคชันของ Kinsta สิ่งที่คุณต้องทำคือเชื่อมต่อที่เก็บ GitHub เลือกจากศูนย์ข้อมูล 25 ตำแหน่งทั่วโลกของ Kinsta แล้วไปได้เลย คุณจะได้รับสิทธิ์เข้าถึงการตั้งค่าที่รวดเร็ว การสนับสนุนตลอด 24 ชั่วโมงทุกวัน การรักษาความปลอดภัยระดับแนวหน้า โดเมนที่กำหนดเอง เครื่องมือการรายงานและการตรวจสอบขั้นสูง และอื่นๆ อีกมากมาย

สรุป

การเรียนรู้วิธีใช้ React ไม่ใช่ทั้งหมดที่จำเป็นสำหรับการสร้างเว็บแอปที่โดดเด่น เช่นเดียวกับเฟรมเวิร์กอื่นๆ เช่น Angular, Vue และอื่นๆ มีวิธีปฏิบัติที่ดีที่สุดที่คุณควรปฏิบัติตามเพื่อช่วยคุณสร้างผลิตภัณฑ์ที่มีประสิทธิภาพ

การปฏิบัติตามข้อตกลง React เหล่านี้ไม่เพียงแต่ช่วยแอปของคุณเท่านั้น แต่ยังมีประโยชน์สำหรับคุณในฐานะนักพัฒนาส่วนหน้า — คุณได้เรียนรู้วิธีเขียนโค้ดที่มีประสิทธิภาพ ปรับขยายได้ และบำรุงรักษาได้ และคุณโดดเด่นในฐานะมืออาชีพในสายงานของคุณ ต้องการยกระดับเกมโค้ด React ของคุณหรือไม่? ทุกสิ่งที่คุณต้องรู้อยู่ในคู่มือนี้ คลิกเพื่อทวีต

ดังนั้นเมื่อสร้างเว็บแอปถัดไปด้วย React ให้คำนึงถึงแนวทางปฏิบัติที่ดีที่สุดเหล่านี้เพื่อให้ใช้งานและจัดการผลิตภัณฑ์ได้ง่ายสำหรับทั้งผู้ใช้และนักพัฒนาของคุณ

แนวทางปฏิบัติที่ดีที่สุดของ React อื่นใดที่คุณทราบซึ่งไม่ได้กล่าวถึงในบทความนี้ แบ่งปันในความคิดเห็นด้านล่าง มีความสุขในการเข้ารหัส!