วิธีใหม่ในการเริ่มต้น React: จาก Create React App ไปสู่เฟรมเวิร์ก

หลังจากที่ Create React App ถูกยกเลิกการแนะนำแล้ว React ก็แนะนำอย่างเป็นทางการให้เริ่มต้นด้วยเฟรมเวิร์ก

---

วิธีใหม่ในการเริ่มต้น React: จาก Create React App ไปสู่เฟรมเวิร์ก

หากต้องการสร้างแอปหรือเว็บไซต์ใหม่ด้วย React แนะนำให้เริ่มจากเฟรมเวิร์ก

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

เฟรมเวิร์กแบบฟูลสแตก

เฟรมเวิร์กที่แนะนำเหล่านี้รองรับฟีเจอร์ทั้งหมดที่จำเป็นสำหรับการนำแอปขึ้นใช้งานจริงและขยายระบบในระดับโปรดักชัน โดยผสานฟีเจอร์ React รุ่นใหม่และใช้ประโยชน์จากสถาปัตยกรรมของ React

เฟรมเวิร์กแบบฟูลสแตกไม่จำเป็นต้องมีเซิร์ฟเวอร์

เฟรมเวิร์กทั้งหมดในหน้านี้รองรับ client-side rendering (CSR), single-page app (SPA) และ static site generation (SSG) แอปเหล่านี้สามารถนำไป deploy บน CDN หรือบริการ static hosting ได้โดยไม่ต้องมีเซิร์ฟเวอร์ นอกจากนี้ หากเหมาะกับกรณีใช้งาน เฟรมเวิร์กเหล่านี้ยังให้คุณเพิ่ม server-side rendering เป็นราย route ได้ด้วย

นั่นหมายความว่าคุณสามารถเริ่มต้นด้วยแอปแบบ client-only ก่อน และหากความต้องการเปลี่ยนไปในภายหลัง ก็สามารถเลือกใช้ฟีเจอร์ฝั่งเซิร์ฟเวอร์ในแต่ละ route ได้โดยไม่ต้องเขียนแอปใหม่ทั้งหมด โปรดดูเอกสารของเฟรมเวิร์กนั้น ๆ เกี่ยวกับวิธีกำหนดค่ากลยุทธ์การเรนเดอร์

Next.js (App Router)

App Router ของ Next.js เป็นเฟรมเวิร์ก React ที่ช่วยให้สร้างแอป React แบบฟูลสแตกได้ โดยใช้ประโยชน์จากสถาปัตยกรรมของ React ได้อย่างเต็มที่

npx create-next-app@latest  

Next.js ดูแลโดย Vercel คุณสามารถสร้างแอป Next.js แล้วนำไป deploy บน Node.js, serverless hosting หรือเซิร์ฟเวอร์ของคุณเองก็ได้ Next.js ยังรองรับการ export แบบ static ที่ไม่ต้องใช้เซิร์ฟเวอร์อีกด้วย นอกจากนี้ Vercel ยังมีบริการคลาวด์แบบเสียเงินเพิ่มเติมที่เลือกใช้ได้

React Router (v7)

React Router เป็นไลบรารี routing ที่ได้รับความนิยมมากที่สุดสำหรับ React และเมื่อใช้ร่วมกับ Vite ก็สามารถสร้างเป็นเฟรมเวิร์ก React แบบฟูลสแตกได้ โดยเน้นมาตรฐาน Web API และมีเทมเพลตการ deploy ที่เตรียมไว้สำหรับ JavaScript runtime และแพลตฟอร์มหลากหลายแบบ

หากต้องการสร้างเฟรมเวิร์ก React Router ใหม่ ให้ใช้คำสั่งต่อไปนี้

npx create-react-router@latest  

React Router ดูแลโดย Shopify

Expo (สำหรับแอปเนทีฟ)

Expo เป็นเฟรมเวิร์ก React ที่ช่วยให้คุณสร้างแอปแบบ universal สำหรับ Android, iOS และเว็บ โดยใช้ native UI และมี React Native SDK ที่ช่วยให้ใช้งานส่วนของเนทีฟได้ง่ายขึ้น หากต้องการสร้างโปรเจกต์ Expo ใหม่ ให้ใช้คำสั่งต่อไปนี้

npx create-expo-app@latest  

หากคุณเพิ่งเริ่มใช้ Expo โปรดดูบทแนะนำของ Expo

Expo ดูแลโดย Expo (the company) การสร้างแอปด้วย Expo นั้นฟรี และสามารถส่งขึ้น Google หรือ Apple Store ได้โดยไม่มีข้อจำกัด นอกจากนี้ Expo ยังมีบริการคลาวด์แบบเสียเงินเพิ่มเติมที่เลือกใช้ได้

เฟรมเวิร์กอื่น ๆ

ยังมีเฟรมเวิร์กหน้าใหม่อื่น ๆ ที่กำลังก้าวไปสู่วิสัยทัศน์ React แบบฟูลสแตก

• TanStack STart (Beta): TanStack Start เป็นเฟรมเวิร์ก React แบบฟูลสแตกที่สร้างบน TanStack Router โดยมีทั้ง full-document SSR, streaming, server functions, bundling และเครื่องมือที่มีประโยชน์อีกมากมาย เช่น Nitro หรือ Vite
• RedwoodJS: Redwood เป็นเฟรมเวิร์ก React แบบฟูลสแตกที่มาพร้อมแพ็กเกจและการตั้งค่าที่เตรียมไว้ล่วงหน้า เพื่อให้สร้างเว็บแอปแบบฟูลสแตกได้ง่าย

ฟีเจอร์ใดบ้างที่ประกอบขึ้นเป็นวิสัยทัศน์สถาปัตยกรรมฟูลสแตกของทีม React?

บันเดลเลอร์ App Router ของ Next.js ได้ implement ข้อกำหนดอย่างเป็นทางการของ React Server Components ครบถ้วนทั้งหมด ทำให้คุณสามารถผสมคอมโพเนนต์ที่ทำงานตอน build time, เฉพาะฝั่งเซิร์ฟเวอร์ และแบบ interactive ไว้ใน React tree เดียวกันได้

ตัวอย่างเช่น คุณสามารถเขียน React component ที่ทำงานเฉพาะฝั่งเซิร์ฟเวอร์เป็นฟังก์ชัน async ที่อ่านฐานข้อมูลหรือไฟล์ได้ จากนั้นก็ส่งข้อมูลนั้นต่อไปยังคอมโพเนนต์แบบ interactive ได้

// คอมโพเนนต์นี้จะทำงาน *เฉพาะ* บนเซิร์ฟเวอร์เท่านั้น (หรือเฉพาะระหว่างการ build)  
async function Talks({ confId }) {  
  // 1. หากอยู่บนเซิร์ฟเวอร์ คุณสามารถคุยกับ data layer ได้โดยตรง ไม่จำเป็นต้องมี API endpoint  
  const talks = await db.Talks.findAll({ confId });  
  
  // 2. แม้จะเพิ่ม logic สำหรับการเรนเดอร์ ก็จะไม่ทำให้ขนาด JavaScript bundle ใหญ่ขึ้นมาก  
  const videos = talks.map(talk => talk.video);  
  
  // 3. ส่งข้อมูลไปยังคอมโพเนนต์ที่จะทำงานในเบราว์เซอร์  
  return <SearchableVideoList videos={videos} />;  
}  

App Router ของ Next.js ผสาน Suspense เข้ากับการดึงข้อมูล ทำให้คุณสามารถระบุสถานะการโหลดของส่วนติดต่อผู้ใช้ที่แตกต่างกันได้โดยตรงใน React tree (เช่น skeleton placeholder)

<Suspense fallback={<TalksLoading />}>  
  <Talks confId={conf.id} />  
</Suspense>  

Server Components และ Suspense ไม่ใช่ฟีเจอร์ของ Next.js แต่เป็นฟีเจอร์ของ React อย่างไรก็ตาม การนำสิ่งเหล่านี้ไปใช้ในระดับเฟรมเวิร์กต้องอาศัยความร่วมมือและงาน implement ที่ไม่ง่าย ปัจจุบัน Next.js App Router คือการใช้งานที่สมบูรณ์ที่สุด ทีม React กำลังทำงานร่วมกับนักพัฒนาบันเดลเลอร์ เพื่อให้ฟีเจอร์เหล่านี้นำไป implement ในเฟรมเวิร์กรุ่นถัดไปได้ง่ายขึ้น

เริ่มจากศูนย์

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

การเริ่มจากศูนย์ให้ความยืดหยุ่นมากกว่า แต่คุณจะต้องเลือกเครื่องมือสำหรับ routing, การดึงข้อมูล และรูปแบบการใช้งานทั่วไปอื่น ๆ ด้วยตัวเอง มันคล้ายกับการสร้างเฟรมเวิร์กของตัวเองแทนที่จะใช้เฟรมเวิร์กที่มีอยู่แล้ว เฟรมเวิร์กที่เราแนะนำมีโซลูชันสำหรับปัญหาเหล่านี้มาให้ในตัว

หากต้องการสร้างโซลูชันของคุณเอง โปรดดูคู่มือสร้าง React app จากศูนย์ ซึ่งจะช่วยให้คุณเริ่มต้นด้วย build tool อย่าง Vite, Parcel หรือ RSbuild ได้

[slowandsnow]

React เป็นเพียงไลบรารี UI แบบอิงคอมโพเนนต์เท่านั้น การแสดงคอมโพเนนต์บน html อย่างเรียบง่ายนั้นทำได้ไม่ยาก แต่ในการสร้างเว็บไซต์หรือแอปนั้นจำเป็นต้องมีฟีเจอร์อีกมากมาย ด้วยเหตุนี้จึงแนะนำให้ใช้เฟรมเวิร์ก ซึ่งไม่ได้เป็นเพราะนี่คือ React เท่านั้น แต่เว็บสมัยใหม่จำนวนมากก็ถูกสร้างขึ้นผ่านเว็บเฟรมเวิร์กเช่นกัน นอกจากนี้ React ยังสามารถใช้งานร่วมกับเว็บเฟรมเวิร์กที่พัฒนาด้วยภาษาอื่นได้หลากหลาย (เช่น go, rust, java เป็นต้น) โดยไม่จำเป็นต้องเป็นเฟรมเวิร์กที่อิงกับ React เสมอไป ดังนั้นสุดท้ายแล้วการเลือกจึงขึ้นอยู่กับผู้ใช้เสมอ

[aer0700]

ผมคิดว่าในสถานการณ์ที่ไม่รู้ว่านักพัฒนาจะใช้ React ภายใต้ข้อจำกัดแบบใด เอกสารทางการก็ควรเขียนให้อยู่ในสภาพแวดล้อมที่ใกล้เคียงกับ vanilla มากที่สุด

[aer0700]

React ไม่จำเป็นต้องใช้กับเฟรมเวิร์กที่อิงกับ React เสมอไป เพราะสามารถใช้ร่วมกับเว็บเฟรมเวิร์กที่สร้างด้วยภาษาอื่น ๆ ได้หลากหลาย (เช่น Go, Rust, Java เป็นต้น)
-> จริง ๆ แล้วเพราะเหตุนี้เอง ผมจึงคิดว่าอย่างน้อยในส่วน get started ของเอกสารทางการ React ก็น่าจะแนะนำให้ใช้แค่ React โดยพยายามไม่พึ่งพา dependency อื่นให้มากที่สุด

[space0403]

อืม...ในฐานะคนที่เพิ่งกำลังเรียน React อยู่เหมือนกันเมื่อไม่นานนี้
พอ CRA ถูกยุติไป แหล่งเรียนที่ผมมีอยู่ก็อิงกับ CRA เลยต้องวนไปดูทั้ง Next, React Router ฯลฯ แต่พวกนี้ก็เป็นรูปแบบที่มีเทคโนโลยีเฉพาะของแต่ละตัวเพิ่มเข้ามา เลยรู้สึกว่าสำหรับคนที่กำลังเรียน React มันอาจไม่ค่อยเหมาะเท่าไร..ส่วนตัวผมคิดว่า Vite ยังพอดีกว่าครับ

[aer0700]

React แนะนำอย่างเป็นทางการให้เริ่มต้นด้วยเฟรมเวิร์ก -> แม้จะเป็นเรื่องที่ช้าไปมากแล้วก็ตาม แต่ก็อดสงสัยไม่ได้ว่าการที่เอกสารทางการของ React เองแนะนำให้เริ่มต้นด้วยเฟรมเวิร์กหรือ build tool เฉพาะตั้งแต่แรกนั้นเหมาะสมแล้วหรือไม่
ในโค้ดเบสเดิมที่มีอยู่ บางกรณีก็อาจไม่สามารถใช้เฟรมเวิร์กหรือ build tool นั้นได้ และการเพิ่ม dependency มากขึ้นเองก็อาจให้ความรู้สึกเป็นภาระได้เช่นกัน
สมัยที่แค่ใส่ script tag อันเดียวลงใน html ก็สามารถใช้ความสามารถของไลบรารีนั้นได้เลย ดูเหมือนจะสบายใจกว่าเยอะครับ หรือว่านี่จะเป็นเรื่องเก่าเกินไปแล้ว...

[akarin]

ผมก็ยังสงสัยเหมือนกันว่าจำเป็นต้องทำแบบนั้นจริง ๆ ไหม