เริ่มต้นใช้งาน: เพิ่มประสิทธิภาพแอป 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 ซึ่งจะมีการตั้งค่าเริ่มต้นพร้อมด้วยฟีเจอร์หลักจำนวนหนึ่ง ซึ่งรวมถึงระบบบิลด์ที่มีชุดโมดูล (Webpack) และตัวแปลง (Babel)

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

npx create-react-app app-name

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

cd new-app
npm start

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

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

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

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

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