เริ่มต้นใช้งาน: เพิ่มประสิทธิภาพแอป 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 แบบ Bootstrapped

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

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

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

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