เริ่มต้นใช้งาน: เพิ่มประสิทธิภาพแอป React

หากต้องการทําให้เว็บไซต์ React ของคุณเข้าถึงได้เร็วที่สุด คุณมาถูกที่แล้ว

Houssein Djirdeh

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

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

เหตุใดจึงมีประโยชน์

มีเนื้อหามากมายที่อธิบายวิธีสร้างแอปพลิเคชันที่รวดเร็วและเชื่อถือได้ แต่มีเนื้อหาไม่มากนักที่แสดงวิธีสร้างแอปพลิเคชัน React ที่รวดเร็วและเชื่อถือได้ คู่มือเหล่านี้ครอบคลุมข้อมูลทั้งหมดนี้จากมุมมองของแอป React ซึ่งจะกล่าวถึงเฉพาะไลบรารี, API และฟีเจอร์สำหรับระบบนิเวศ React เท่านั้น

สิ่งที่คุณจะได้เรียนรู้

บทแนะนำในเส้นทางการเรียนรู้นี้ไม่ได้มุ่งเน้นที่หัวข้อต่อไปนี้

  • วิธีใช้ React
  • วิธีการทํางานของ React

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

Create React App

Create React App (CRA) เป็นวิธีเริ่มต้นสร้างแอปพลิเคชัน React ที่ง่ายที่สุด แพ็กเกจนี้มีการตั้งค่าเริ่มต้นที่มีฟีเจอร์หลักๆ หลายอย่างรวมอยู่ด้วย ซึ่งรวมถึงระบบบิลด์ที่มีเครื่องมือรวมโมดูล (webpack) และเครื่องมือแปลงภาษา (Babel)

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

npx create-react-app app-name

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

cd new-app
npm start

การฝังต่อไปนี้แสดงโครงสร้างไดเรกทอรีและหน้าเว็บจริงของแอปพลิเคชัน CRA ที่เพิ่งสร้างใหม่

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

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

ขั้นตอนถัดไปคือ

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