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

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

ฮูสเซน จอร์เดห์

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

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

มีประโยชน์อย่างไร

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

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

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

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

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

สร้างแอป React

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

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

npx create-react-app app-name

หมายเหตุ: npx เป็นโปรแกรมเรียกใช้แพ็กเกจที่ติดตั้งโดยอัตโนมัติในเวอร์ชัน npm 5.2.0 ขึ้นไป ซึ่งช่วยลดความซับซ้อนของกระบวนการที่เกี่ยวข้องกับการจัดการแพ็กเกจ ซึ่งรวมถึงการเรียกใช้คำสั่ง CLI เช่น create-react-app โดยไม่ต้องติดตั้งโปรแกรมทั้งหมดในเครื่อง ลองดูที่ขอแนะนำ npx: เครื่องมือเรียกใช้แพ็กเกจ npm หากต้องการข้อมูลเพิ่มเติม

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

cd new-app
npm start

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

หมายเหตุ: แม้ว่า CRA จะช่วยให้การเริ่มสร้างแอปพลิเคชัน React เป็นเรื่องง่าย แต่ก็มีหลายวิธีในการเริ่มสร้างเว็บไซต์ด้วย React "ทางเลือกยอดนิยม" ใน README ครอบคลุมกรณีการใช้งานและตัวเลือกที่แตกต่างกัน

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

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

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

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

• การแยกโค้ดด้วย React.lazy และ Suspense
• สร้างการจำลองรายการขนาดใหญ่ด้วยหน้าต่างรีแอ็กชัน
• การกำหนดไว้ล่วงหน้าในการสร้างแอป React ด้วย Workbox
• เส้นทางการแสดงผลล่วงหน้าด้วยรีแอ็กชัน
• เพิ่มไฟล์ Manifest ของเว็บแอปด้วย "สร้างแอป React"
• การตรวจสอบการช่วยเหลือพิเศษด้วย response-axe และ eslint-plugin-jsx-a11y