ເລີ່ມ Project React ໃໝ່
ຖ້າທ່ານຕ້ອງການສ້າງແອັບ ຫຼື ເວັບໄຊໃໝ່ທັງໝົດດ້ວຍ React, ພວກເຮົາຂໍແນະນຳໃຫ້ເລືອກໜຶ່ງໃນ Framework ທີ່ຂັບເຄື່ອນດ້ວຍ React ທີ່ໄດ້ຮັບຄວາມນິຍົມໃນຊຸມຊົມ. Framework ສະໜອງຄຸນສົມບັດທີ່ຫຼາຍແອັບ ແລະ ເວັບຕ້ອງການທີ່ສຸດ, ລວມມີ routing, data fetching ແລະ generate HTML.
Framework React ລະດັບ Production
Next.js
Next.js ເປັນ full-stack framework React.** ມັນໃຊ້ປະໂຫຍດໄດ້ຫຼາຍ ແລະ ໃຫ້ທ່ານສ້າງແອັບ React ໄດ້ທຸກຂະໜາດ ຕັ້ງແຕ່ static blog ໄປຈົນເຖິງແອັບພິເຄຊັ່ນທີ່ມີຄວາມຊັບຊ້ອນ. ເພື່ອສ້າງ Project Next.js ໃໝ່ມ ແລ່ນນີ້ໃນ terminal:
ຖ້າທ່ານຍັງໃໝ່ສຳລັບ Next.js, ເບິ່ງ ຄູ່ມື Next.js .
Next.js ດູແລໂດຍ Vercel. ທ່ານສາມາດ deploy Next.js app ໃສ່ໃນ Node.js ຫຼື serverless hosting, ຫຼື server ຂອງທ່ານເອງ. Fully static Next.js apps ສາມາດ deploy ໃສ່ໃນ static hosting ໃດກໍ່ໄດ້.
Remix
Remix ເປັນ full-stack framework React ພ້ອມ nested routing. ມັນໃຫ້ທ່ານແຕກແອັບຂອງທ່ານເປັນສ່ວນນ້ອຍໆທີ່ສາມາໂຫຼດຂໍ້ມູນເປັນ parallel ແລະ refresh ໃນການຕອບສະໜອງຕໍ່ກັບການກະທຳຂອງຜູ້ໃຊ້. ເພື່ອສ້າງ Project Remix ໃໝ່, ແລ່ນ:
ຖ້າທ່ານຍັງໃໝ່ສຳລັບ Remix, ເບິ່ງ Remix ຄູ່ມືບົດຄວາມ (ສັ້ນ) ແລະ app tutorial (ຍາວ).
Remix ດູແລໂດຍ Shopify. ເມື່ອທ່ານສ້າງ Project Remix, ທ່ານຕ້ອງໄດ້ ເລືອກບ່ອນ deploy . ທ່ານສາມາດ deploy ແອັບ Remix ໄດ້ໃນ Node.js ຫຼື serverless hosting ໃດກໍ່ໄດ້ໂດຍການໃຊ້ ຫຼື ຂຽນ adapter.
Gatsby
Gatsby ເປັນ Framework React ສຳລັບເວັບໄຊທີ່ຮອງຮັບ CMS ທີ່ວ່ອງໄວ. ມັນມີ ecosystem ຂອງ plugin ທີ່ຫຼາກຫຼາຍ ແລະ GraphQL data layer ຂອງມັນເປັນໃຫ້ງານໃນການ integrate ກັບ content, APIs, ແລະ services ເຂົ້າໄປໃນໜຶ່ງເວັບໄຊ. ເພື່ອສ້າງ Project Gatsby ໃໝ່, ແລ່ນ:
ຖ້າທ່ານຍັງໃໝ່ສຳລັບ Gatsby, ເບິ່ງ ຄູ່ມື Gatsby.
Gatsby ດູແລໂດຍ Netlify. ທ່ານສາມາດ deploy static Gatsby site ໂດຍສົມບູນ ໃສ່ໃນ static hosting ໃດກໍ່ໄດ້. ຖ້າທ່ານຕ້ອງການໃຊ້ແຕ່ຄຸນສົມບັດຂອງ server ພຽງແຕ່ຢ່າງດຽວ, ໝັ້ນໃຈວ່າຜູ້ໃຫ້ບໍລິການ hosting ຂອງທ່ານຮອງຮັບມັນສຳລັບ Gatsby.
Expo (ສຳລັບແອັບເທິງມືຖື)
Expo ເປັນ Framework React ທີ່ໃຫ້ທ່ານສ້າງແອັບ Android, iOS ແລະ ເວັບແອັບດ້ວຍ Native UI ແທ້ໆ. ມັນມີ SDK ສຳລັບ React Native ທີ່ເຮັດໃຫ້ສ່ວນ Native ໃຊ້ງານງ່າຍຂຶ້ນ. ເພື່ອສ້າງ Project Expo ໃໝ່, ແລ່ນ:
ຖ້າທ່ານຍັງໃໝ່ສຳລັບ Expo, ເບິ່ງ ຄູ່ມື Expo.
Expo ດູແລໂດຍ Expo (ບໍລິສັດ). ສ້າງແອັບດ້ວຍ Expo ແມ່ນຟຣີ, ແລະ ທ່ານສາມາດສົ່ງຂຶ້ນ Google ແລະ Apple store ໄດ້ໂດຍບໍ່ມີຂໍ້ຈຳກັດ. ນອກຈາກນີ້ Expo ຍັງໃຫ້ບໍລິການ cloud ແບບຊຳລະເງິນທີ່ສາມາດເລືອກໄດ້.
Deep Dive
ທ່ານສາມາດໃຊ້ react ໂດຍບໍ່ມີ framework ໄດ້ —ນັ່ນຄືວິທີທີ່ທ່ານໃຊ້ ໃຊ້ React ສຳລັບບາງສ່ວນຂອງ page ທ່ານ. ເຖິງຢ່າງໃດກໍ່ຕາມ, ຖ້າທ່ານສ້າງແອັບ ຫຼື ເວັບໃໝ່ດ້ວຍ React ທີ່ສົມບູນ, ພວກເຮົາແນະນຳໃຫ້ທ່ານມີ Framework.
ເຫດຜົນແມ່ນ.
ເຖິງວ່າທ່ານບໍ່ຕ້ອງການ routing ຫຼື data fetching ໃນຕອນທຳອິດ, ທ່ານອາດຈະຕ້ອງການບາງ libary ສຳລັບມັນ. ດັ່ງທີ່ JavaScript bundle ຂອງທ່ານໃຫຍ່ຂຶ້ນໄປພ້ອມໆກັບຄຸນສົມບັດໃໝ່, ທ່ານອາດຕ້ອງການຫາວິທິແຍກ code ສຳລັບແຕ່ລະ route ສະເພາະ. ດັ່ງທີ່ Data fetching ຕ້ອງການຫຍັງທີ່ຊັບຊ້ອນ, ທ່ານອາດຕ້ອງຈັດການ server-clien network waterfall ທີ່ເຮັດໃຫ້ແອັບທ່ານຮູ້ສຶກຊ້າຫຼາຍ. ດັ່ງທີຜູ້ໃຊ້ຂອງທ່ານອາດຈະມີຄົນທີ່ມີ network ທີ່ຊ້າແຮງ ຫຼື ອຸປະກອນລຸ່ນຕໍ່າ, ທ່ານອາດຕ້ອງການ generate HTML ຈາກ component ເພືອສະແດງ content ກ່ອນ—ອາດຈະເທິງ sever, ຫຼື ລະຫວ່າງເວລາ build. ປ່ຽນການຕັ້ງຄ່າເພື່ອແລ່ນບາງໂຕຂອງ code ຂອງທ່ານເທິງ server ລະຫວ່າງ build ສາມາດເປັນຫຍັງທີ່ຫຍຸ້ງຍາກຫຼາຍ.
ບັນຫາເຫຼົ່ານີ້ບໍ່ແມ່ນບັນຫາສະເພາະຂອງ React. ນີ້ຄືເຫດຜົນທີ່ Svelte ມີ SvelteKit, Vue ມີ Nuxt, ແລະ ອື່ນໆ. ເພື່ອແກ້ໄຂບັນຫາເຫຼົ່ານີ້ດ້ວຍຕົວຂອງທ່ານເອງ, ທ່ານຈະຕ້ອງການ integrate bundler ຂອງທ່ານດ້ວຍ router ແລະ library data fetching ຂອງທ່ານ. ການຕັ້ງຄ່າເລີ່ມຕົ້ນບໍ່ແມ່ນເລື່ອງຍາກ, ແຕ່ມີລາຍລະອຽດປີກຍ່ອຍຫຼາຍກ່ຽວຂ້ອງກັບການສ້າງແອັບທີ່ໂຫຼດໄວເຖິງວ່າມັນຈະໃຫຍ່ຂຶ້ນເມື່ອເວລາຜ່ານໄປ. ທ່ານຈະຕ້ອງສົ່ງ app code ໃນຈຳນວນນ້ອຍສຸດແຕ່ສົ່ງໃນ client-server ດຽວໄປກັບ, ໃນຄູ່ຂະໜານໄປກັບຂໍ້ມູນອື່ນໆທີ່ຕ້ອງການສຳລັບ page. ທ່ານອາດຕ້ອງການໃຫ້ page ມີການຕອບໂຕ້ກ່ອນ code JavaScript ຈະເຮັດວຽກ, ເພື່ອຮອງຮັບການປັບປຸງທີ່ດີຂຶ້ນ. ທ່ານອາດຕ້ອງການ generate ໂຟນເດີທີ່ເກັບຟາຍ static HTML ສຳລັບ ໜ້າການຕະຫຼາດທີ່ host ຢູ່ໃສກໍໄດ້ ແລະ ສາມາດເຮັດວຽກໄດ້ເຖິງວ່າ JavaScript ຈະຖືກປິດ. ການສ້າງຄວາມສາມາດເຫຼົ່ານີ້ດ້ວຍຕົວທ່ານເອງແມ່ນຕ້ອງໄດ້ລົງມື.
Framework React ໃນໜ້ານີ້ແມ່ນແກ້ໄຂບັນຫາເຫຼົ່ານີ້ເປັນຄ່າເລີ່ມຕົ້ນ, ໂດຍບໍ່ເພີ່ມວຽກຂອງເຈົ້າຕື່ມ. ມັນເຮັດໃຫ້ທ່ານເລີ່ມຕົ້ນໄດ້ງ່າຍ ແລະ ສາມາດຂະຫຍາຍແອັບຕາມຄວາມຕ້ອງການຂອງທ່ານ. ແຕ່ລະ Framework React ມີຊຸມຊົນ, ສະນັ້ນການຫາຄຳຕອບໂດຍການຕັ້ງຄຳຖາມ ແລະ ການອັບເດດເຄື່ອງມືແມ່ນງ່າຍ. Frameworks ຍັງໃຫ້ໂຄ່ງສ້າງສຳລັບ code ຂອງທ່ານ, ຊ່ວຍທ່ານ ແລະ ຄົນອື່ນໆ ຮັກສາເນື້ອໃນ ແລະ ທັກສະລະຫວ່າງແຕ່ລະ Project ທີ່ແຕກຕ່າງກັນ. ໃນທາງກົງກັນຂ້າມ, ດ້ວຍການຕັ້ງຄ່າແບບກຳນົດເອງ ມັນກໍເປັນເລື່ອງງ່າຍທີ່ຈະຕິດບັນຫາ ແລະ dependency version ທີ່ບໍ່ຮອງຮັບ, ແລະ ຈະຈົບລົງດ້ວຍການສ້າງ Framework ຂອງທ່ານເອງ-ເຖິງວ່າຈະບໍ່ມີຊຸມຊົນ ຫຼື ເສັ້ນທາງອັບເກດ (ແລະ ຖ້າເປັນອັນດຽວກັບທີ່ເຮົາສ້າງໃນອະດີດ, ອອກແບບຕາມມີຕາມເກີດຫຼາຍຂຶ້ນ).
ຫາກທ່ານຍັງບໍ່ໝັ້ນໃຈ, ຫຼື ແອັບຂອງທ່ານມີຂໍ້ຈຳກັດທີ່ຜິດປົກະຕິເຊິ່ງ Framework ເຫຼົ່ານີ້ເຮັດວຽກບໍ່ໄດ້ດີ ແລະ ທ່ານຕ້ອງການຕັ້ງຄ່າແບບກຳນົດເອງ, ເຮົາຢຸດທ່ານບໍ່ໄດ້—ເຮັດໄປໂລດ! ເອົາ react ແລະ react-dom ຈາກ npm, ຕັ້ງຄ່າແບບກຳນົດເອງຂອງທ່ານດ້ວຍ bundler ເຊັ່ນ Vite ຫຼື Parcel, ແລະ ເຄື່ອງມືອື່ນໆທີ່ທ່ານຕ້ອງການສຳລັບ routing, static generation ຫຼື server-side rendering ແລະ ອື່ນໆ.
Bleeding-edge React frameworks
ໃນຂະນະທີ່ພວກເຮົາໄດ້ສຳຫຼວດຫາວິທີການປັບປຸງ React, ພວກເຮົາຄົ້ນພົບວ່າການ integrate ຢ່າງໃກ້ຊິດກັບ Framework(ໂດຍສະເພາະ, ກັບ routing, bundling, ແລະ server technologies) ແມ່ນໂອກາດທີ່ໃຫຍ່ຫຼວງທີ່ຈະຊ່ວຍໃຫ້ຜູ້ໃຊ້ React ເຮັດແອັບທີ່ດີໄດ້. ທີມ Next.js ໄດ້ຕົກລົງທີ່ຈະຮ່ວມມືກັບພວກເຮົາໃນການຄົ້ນຄວ້າ, ພັດທະນາ, integrating, ແລະ ການທົດສອບຄຸນສົມບັດ Framework-agnostic bleeding-ege React ເຊັ່ນ React Server Components.
ຄຸນສົມບັດເຫຼົ່ານີ້ໃກ້ຈະພ້ອມສຳລັບ Production ແລ້ວໃນແຕ່ລະມື້, ພວກເຮົາໄດ້ໂອ້ລົມກັບນັກພັດທະນາ bundler ແລະ ນັກພັດທະນາ Framework ກ່ຽວກັບການ integrate ມັນ. ເຮົາຫວັງວ່າໃນໜຶ່ງ ຫຼື ສອງປີ, ທຸກ Framework ທີ່ມີໃນ page ນີ້ຈະຮອງຮັບຢ່າງສົມບູນສຳລັບຄຸນສົມບັດນີ້. (ຫາກທ່ານເປັນຜູ້ຂຽນ Framework ທີ່ສົນໃຈເປັນຄູ່ຮ່ວມພັດທະນາກັບພວກເຮົາເພື່ອທົດລອງຄຸນສົມບັດເຫຼົ່ານີ້, ກະລຸນາແຈ້ງໃຫ້ເຮົາຮູ້!)
Next.js (App Router)
App Router ຂອງ Next.js ແມ່ນການ redesign ຂອງ Next.js APIs ທີ່ມີຈຸດປະສົງເຕີມເຕັມວິໄສທັດຂອງທີ React full-stack architecture. ມັນເຮັດທ່ານ fetch data ເປັນ asynchronous ທີ່ແລ່ນເທິງ server ຫຼື ແມ້ແຕ່ລະຫວ່າງການ build.
Next.js ດູແລໂດຍ Vercel. ທ່ານສາມາດ deploy a Next.js app ໃສ່ Node.js ຫຼື serverless hosting ໃດກໍ່ໄດ້, ຫຼຶ ເຊີເວີຂອງທ່ານເອງ. Next.js ຍັງຮອງຮັບ static export ຊື່ງບໍ່ໄດ້ຕ້ອງການເຊີເວີ.
Deep Dive
App Router bundler ຂອງ Next.js ໃຊ້ React Server Components specification ຢ່າງເປັນທາງການຢ່າງສົມບູນ. ສິ່ງນີ້ເຮັດໃຫ້ທ່ານສາມາດ mix build-time, server-only, ແລະ interactive components ໃນ single React tree.
ຕົວຢ່າງ, ທ່ານສາມາດຂຽນ component React server-only ເປັນ async function ທີ່ສາມາດອ່ານຈາກ database ຫຼື ຈາກຟາຍ. ຈາກນັ້ນທ່ານສາມາດສົ່ງຜ່ານຂໍ້ມູນຈາກມັນໄປຫາ interactive components:
// component ນີ້ runs *only* ເທິງ server (ຫຼື ລະຫວ່າງການ build).
async function Talks({ confId }) {
// 1. ທ່ານຢູ່ເທິງ server, ສະນັ້ນທ່ານຈິງສາມາດເວົ້າກັບຊັ້ນຂໍ້ມູນ. API endpoint ບໍ່ຕ້ອງການ.
const talks = await db.Talks.findAll({ confId });
// 2. ເພີ່ມຈຳນວນສຳລັບຕັກກະການ render. ມັນບໍ່ເຮັດໃຫ້ JavaScript bundle ຂອງທ່ານໃຫຍ່ຂຶ້ນ.
const videos = talks.map(talk => talk.video);
// 3. ສົ່ງຕໍ່ຂໍ້ມູນລົງໄປຫາ components ທີ່ເຮັດວຽກໃນບາວເຊີ.
return <SearchableVideoList videos={videos} />;
}App Router ຂອງ Next.js ຍັງ integrates data fetching ດ້ວຍ Suspense. ນີ້ເຮັດໃຫ້ທ່ານສາມາດລະບຸ loading state (ເຊັ່ນ skeleton placeholder) ສຳລັບສ່ວນຕ່າງໆຂອງ user interface ຂອງທ່ານໄດ້ໂດຍກົງໃນ React tree ຂອງທ່ານ:
<Suspense fallback={<TalksLoading />}>
<Talks confId={conf.id} />
</Suspense>Server Components ແລະ Suspense ແມ່ນຄຸນສົມບັດຂອງ React ຫຼາຍກວ່າ ຄຸນສົມບັດຂອງ Next.js. ເຖິງຢ່າງໃດກໍ່ຕາມ, ການນຳມາໃຊ້ໃນລະດັບ framework ຈຳເປັນຕ້ອງມີການຊື້ ແລະ ການໃຊ້ງານທີ່ບໍ່ສຳຄັນ. ໃນຂະນະນີ້, the Next.js App Router ເປັນການໃຊ້ງານທີ່ສົມບູນທີ່ສຸດ. ທີມ React ກຳລັງເຮັດວຽກກັບນັກພັດທະນາ bundler ເພື່ອເຮັດໃຫ້ຄຸນສົມບັດເຫຼົ່ານີ້ງ່າຍໃນການໃຊ້ງານໃນ Framework ຍຸກຕໍ່ໄປ.