React апп үүсгэх

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

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

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

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

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

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

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

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

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

React апп бүтээх

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

Үүгээр хөгжүүлэлтийн орчинг бэлдэх бөгөөд сүүлийн үеийн Javascript-н боломжуудыг ашиглах боломжтой болно (хөгжүүлэгчдийн хялбар ажиллахад зориулж), мөн апп-г тань production орчинд ажиллахад бэлдэх юм. Танд Node >= 8.10, npm >= 5.6-г компьютертээ бэлдэх хэрэгтэй. Прожект үүсгэхэд:

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-н талаар түүний албан ёсны заавараас болон эхлэх багцуудын үзээлэнгээс мэдэх боломжтой.

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

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

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

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

  • package manager Yarn эсвэл npm шиг. Энэ нь маш том гуравдагч package-уудын экосистем-н давуу талыг авч, тэдгээрийг хялбар суулгаж, шинэчилхэд тусална.

  • bundler, webpack эсвэл Parcel шиг. Модулар код бичхэд туслах ба тэдгээрийг жижиг package болгон нэгтгэж унших хугацааг багасгахад хэрэглэгдэнэ.

  • compiler жишээ нь Babel. Энэ javascript-н шинэ боломжуудыг ашиглаж код бичихийн зэрэгцээ хуучин броузер дээр ажилах боломж олгодог.

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

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