Skip to content

Latest commit

 

History

History
94 lines (58 loc) · 9.42 KB

create-a-new-react-app.md

File metadata and controls

94 lines (58 loc) · 9.42 KB
Raw
id title permalink redirect_from prev next
create-a-new-react-app
Create a New React App
docs/create-a-new-react-app.html
docs/add-react-to-a-new-app.html
add-react-to-a-website.html
cdn-links.html

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

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

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

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

Чамд цогц хэрэглүүрүүд хэрэггүй байж мэдэх юм {#you-might-not-need-a-toolchain}

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

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

Санал болгож буй цогц хэрэглүүрүүд {#recommended-toolchains}

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

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

React апп бүтээх {#create-react-app}

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 {#nextjs}

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

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

Gatsby {#gatsby}

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

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

Илүү уян цогц хэрэгслүүрүүд {#more-flexible-toolchains}

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

Цогц хэрэгслүүрүүдийг эхнээс нь хийх {#creating-a-toolchain-from-scratch}

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

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

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

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

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

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