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

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

Houssein Djirdeh

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

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

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

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

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

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

  • วิธีใช้ React
  • วิธีการทำงานของ React เบื้องหลัง

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

สร้างแอป React

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

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

npx create-react-app app-name

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

cd new-app
npm start

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

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

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

ต้องทำอะไรต่อ

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