React апп үүсгэх

Цогц хэрэгслүүрүүдийг хэрэглэгч болон хөгжүүлэгчдийн хялбар хэрэглээнд зориулж ашиглана.

Энэ хуудас доорх ажлуулдад тус болох цөөн хэдэн түгээмэл React цогц хэрэглүүрүүдийг тайлбарласан:

• Олон файлууд болон компонентууд болгон томрох.
• Гуравдагч талын сангуудыг npm-с ашиглах.
• Нийтлэг алдааг эрт илрүүлэх.
• Хөгжүүлэлтийн явцад CSS, JS файлуудыг шууд тусгаж засах.
• Гаралтыг production орчинд тохируулах.

Энэ хуудсанд санал болгогдож буй хэрэгслүүрүүд нь хэрэглэж эхлэхэд ямар нэг тохиргоо шаардахгүй.

Чамд цогц хэрэглүүрүүд хэрэггүй байж мэдэх юм

Хэрвээ дээр тайлбарласан асуудлуудтай тулгарч байгаагүй болон JavaScript-н хэрэглүүрүүдтэй хараахан дадаагүй байвал, React-г цул <script> тагаар HTML хуудсанд оруулах талаар сонирхоорой, нэмэлтээр JSX-тэй хамт.

Энэ нь мөн одоо байгаа веб сайтдаа React-г оруулах хамгийн энгийн арга юм. Хэрвээ хэрэгцээтэй гэвэл, хэзээ ч томоохон цогц хэрэглүүр нэмж болно!

Санал болгож буй цогц хэрэглүүрүүд

React баг үндсэндээ эдгээр шийдлүүдийг санал болгодог:

• Хэрвээ react сурч байвал эсвэл шинэ single-page апп үүсгэх бол, React апп үүсгэх-г ашиглаарай.
• Хэрвээ Node.js-тэй сервер талын рендертэй веб сайт хийж байвал, Next.js-г туршаарай.
• Хэрвээ статик контентэд тулгуурласан веб сайт хийж байвал, Gatsby-г туршаад үзээрэй.
• Хэрвээ компонент сан бүтээх эсвэл өмнөх кодтойгоо нэгтгэх гэж байгаа бол, Илүү уян цогц хэрэглүүрүүд туршаарай.

React апп бүтээх

Create React App бол React сурaхад* хамгийн тохиромжтой орчин ба React дээр **шинээр single-page апп бүтээхэд хамгийн шилдэг арга юм.

Та Node >= 14.0.0 болон npm >= 5.6 компьютертээ суулгах шаардлагатай. Create React App нь JavaScript-ын хамгийн сүүлийн үеийн боломжуудыг ашиглах боломжтой хѳгжүүлэлтийн орчин бүрдүүлж ѳгѳхѳѳс гадна, хэрэглэгчид хүрэх үед нэмэлт сайжруулалтуудыг автоматаар хийдэг. Тѳсѳл үүсгэхдээ*:

npx create-react-app my-app
cd my-app
npm start

Тэмдэлгэл

Эхний мөрөнд байгаа npx нь алдаатай бичиглэл биш — энэ нь npm 5.2+ дээр нэмэгдсэн package ажлуулах багаж юм.

React апп үүсгэх нь backend-н логик эсвэл дата баазыг хариуцдаггүй. Энэ нь зөвхөн frontend бүтээх орчинг бэлдэж өгдөг, тиймээс үүнийг хүссэн backend-тэйгээ ашиглах боломжтой юм. Babel болон webpack-г ашиглаж ажилладаг бөгөөд эдгээрийн талаар заавал мэдээд байх шаардлага байхгүй.

Production-уу оруулахдаа бэлэн болход, npm run build-г ашигласнаар апп-н тань бэлдсэн хувилбар build гэсэн фолдерт үүсгэнэ. React апп үүсгэх талаар илүү ихийг түүний README болон хэрэглэгчийн заавараас мэдэж болно.

Next.js

Next.js бол статик болон сервер талын рендертэй апп React-р бүтээхэд зориулсан түгээмэл, хөнгөн фраймворк юм. Энэ нь загвар оруулах болон холбоосын шийдлийг агуулсан бөгөөд Node.js-г сервер талдаа ашиглаж байгаа гэж үзнэ.

Next.js-г түүний албан ёсны заавараас мэдэж болно.

Gatsby

Gatsby бол React-р статик веб сайт бүтээхэд хамгийн тохиромжтой. React компонентууд ашиглах ч уридчилан рендерлэсэн HTML, CSS файлууд үүсдэг нь баталгаатай хамгийн бага унших хугацаатай нь.

Gatsby-н талаар түүний албан ёсны заавараас болон эхлэх багцуудын үзээлэнгээс мэдэх боломжтой.

Илүү уян цогц хэрэгслүүрүүд

Дараах цогц хэрэглүүрүүд нь илүү уян өбөгөд олон сонголттой юм. Бид эдгээрийг илүү туршлагажсан хөгжүүлэгчидэд санал болгож байна:

• Neutrino нь webpack-н хүчийг хялбарчилсан бэлдэцүүдтэй холбодог ба React апп-ууд болон React компонентууд гэсэн бэлдэцүүд багтана.
• nwb бол React компонентуудыг npm-р оруулхад голчилон зориулсагдсан. Үүнийг мөн React app хийхэд хэрэглэж болно.
• Parcel React-тай ажилладаг хурдан, тохиргоогүй ажиллах веб апп багцлагч юм.
• Razzle ямар ч тохиргоо шаардлагагүй сервер талын рендер хийх фраймворк бөгөөд Next.js-с илүү уян байдлыг санал болгодог.

Цогц хэрэгслүүрүүдийг эхнээс нь хийх

Javascript үүсгэх цогц багаж үндсэндээ эдгээрээс бүрддэг:

• package manager Yarn эсвэл npm шиг. Энэ нь маш том гуравдагч package-уудын экосистем-н давуу талыг авч, тэдгээрийг хялбар суулгаж, шинэчилхэд тусална.
• bundler, webpack эсвэл Parcel шиг. Модулар код бичхэд туслах ба тэдгээрийг жижиг package болгон нэгтгэж унших хугацааг багасгахад хэрэглэгдэнэ.
• compiler жишээ нь Babel. Энэ javascript-н шинэ боломжуудыг ашиглаж код бичихийн зэрэгцээ хуучин броузер дээр ажилах боломж олгодог.

Хэрвээ өөрийн Javascript цогц багжыг эхнээс нь үүсгэхийг илүүд үзэж байвал, React апп үүсгэх-н зарим функцуудыг дахин хийсэн энэ зааврыг тушаарай.

Өөрийн цогц багажаа production орчинд зөв суурилагдсан гэдгээ шалгаж үзхээ битгий мартаарай