React-г веб сайтдаа нэмэх

These docs are old and won’t be updated. Go to react.dev for the new React docs.

See Add React to an Existing Project for the recommended ways to add React.

React-г их, бага хүссэн хэмжээгээрээ хэрэглэ.

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

Веб сайтуудын дийлэнх нь single-page app биш эсвэл байх шаардлагагүй. Цөөн хэдэн мөр код болон build багажгүй React-г өөрийн вебсайтын жижигхэн хэсэгт туршиж үзээрэй. Та цаашид хэрэглээгээ алгуурхан нэмээд явж болно эсвэл цөөн динамик виджет-д хянаад явах ч боломжтой.

React-г нэг минутад оруулах
Заавал биш: React-г JSX-тэй турших (багцлах шаардлагагүй!)

React-г нэг минутад оруулах

Энэ хэсэгт React компонентыг хэрхэн одоо байгаа HTML-г хуудсанд нэмэхийг харуулна. Өөрийн веб сайт дээрээ буулгаад явах эсвэл шинээр хоосон HTML файл үүсгээд практик хийсэн ч болно.

Энэ хэсгийг хийж дуусгахад ямар нэг төвөгтэй багаж эсвэл шаардлагатай суулгац огт хэрэггүй, зөвхөн интернет холболт болон өөрийн цагаас нэг минут байхад л хангалттай.

Заавал биш: Бүтэн жишээг татаж авах (2KB zipped)

Алхам 1: HTML дотор DOM агуулагч нэмэх

Эхлээд засах гэж буй HTML хуудсаа нээнэ. React-р харуулах гэж байгаа хэсгээ тэмдэглэх зорилгоор хоосон <div> таг нэмнэ. Жишээ нь:

<!-- ... одоо байгаа HTML ... -->

<div id="like_button_container"></div>
<!-- ... одоо байгаа HTML ... -->

Бид энэ <div>-д онцгой id HTML аттрибут өгсөн. Энэ нь бидэнд үүнийг дараа JavaScript кодоос олж React компонентыг дотор нь харуулах боломжтой болгох юм.

Зөвлөгөө

<div> агуулагчийг <body> таг дотор хаана ч хамаагүй хүссэн хэсэгтээ байршуулна. Нэг хуудсан дотор өөрийн хэрэгцээндээ тааруулаад хэдэн ч DOM агуулагчтай байх боломжтой. Тэдгээр нь ихэнхдээ хоосон байх ба DOM агуулагчууд доторх байрлах ямар контентыг React дарах юм.

Алхам 2: Script тагууд нэмэх

Дараа нь гурван <script> таг HTML хуудсан дотор хаалтын </body> таг-н яг өмнө оруулна:

  <!-- ... бусад HTML ... -->
  <!-- Load React. -->
  <!-- Тэмдэглэл: deploy хийхдээ "development.js"-г "production.min.js"-р солих хэрэгтэй. -->
  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
  <!-- Load our React component. -->
  <script src="like_button.js"></script>
</body>

Эхний хоёр таг React-г дуудна. Гуравт нь бол таны компонентыг дуудах юм.

Алхам 3: React компонент үүсгэх

like_button.js нэртэй файл HTML файлын зэргэлдээ үүсгэнэ.

Энэ эхлэх кодыг нээгээд үүсгэсэн файл дотроо хуулж оруулна.

Зөвлөгөө

Энэ код LikeButton гэх React компонент зарлаж байгаа. Хэрвээ ойлгохгүй бол санаа зовох хэрэггүй практик хичээл болон үндсэн агуулгын заавар дээр React блокуудыг бүтээх талаар харах юм. Одоохондоо зүгээр үүнийг дэлгэцэн дээр харуулцгаая!

like_button.js дотор Эхлэх кодын ард 2 мөр нэмнэ:

// ... хуулж тавьсан эхлэх код ...

const domContainer = document.querySelector('#like_button_container');const root = ReactDOM.createRoot(domContainer);root.render(e(LikeButton));

Энэ 2 мөр код нь бидний эхний алхамд HTML дотор нэмсэн <div>-г олоод “Like” React компонент товчыг түүн дотор харуулах юм.

Ингээд болоо!

Энд ямар ч алхам дөрөв байхгүй. Та дөнгөж сая анхны React компонентыг өөрийн веб сайтдаа нэмчихлээ.

Дараагийн хэсгийг React-г оруулах талаар нэмэлт зөвлөгөө авах зорилгоор үзээрэй.

Бүтэн жишээ кодыг харах

Бүтэн жишээг татаж авах (2KB zipped)

Зөвлөгөө: Компонентыг дахин ашиглах

Ихэнхдээ, React компонентыг HTML хуудсанд олон газар харуулахыг хүсэж болох юм. Энд жишээнд “Like” товчид хэсэг дата дамжуулаад гурван удаа харуулж байгаа жишээ байна:

Бүтэн жишээ кодыг харах

Бүтэн жишээг татаж авах (2KB zipped)

Тэмдэглэл

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

Зөвлөгөө: Production орчинд JavaScript-г багасгах

Production-руу веб сайтаа оруулахын өмнө багасгаагүй JavaScript нь хэрэглэгчдэд хуудас нь маш их удаан дуудагддагийг санаж байх хэрэгтэй.

Хэрвээ аппликешн скриптүүдээ хэзээний багасгасан мөн React хувилбараа HTML дотроо дуудахдаа production.min.js-р дууссаныг ашиглаж байгааг нягталсан бол таны сайт production-д бэлэн гэсэн үг:

<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>

Хэрвээ танд скриптүүдээ багасгах алхам байдаггүй бол энд хийх нэг аргачлал байна.

Заавал биш: React-г JSX-тэй турших

Дээр дурдсан жишээнүүд зөвхөн броузеруудад шууд дэмжигддэг боломжуудад суурилсан. Энэ нь яагаад бид JavaScript функц дуудаж ашиглан React-г юу харуулах вэ гэдгийг хэлж байгаа шалтгаан юм:

const e = React.createElement;

// Display a "Like" <button>
return e(
  'button',
  { onClick: () => this.setState({ liked: true }) },
  'Like'
);

Гэсэн хэдий ч React мөн JSX ашиглах боломжийг олгодог:

// Display a "Like" <button>
return (
  <button onClick={() => this.setState({ liked: true })}>
    Like
  </button>
);

Эдгээд хоёр код нь хоорондоо ялгаагүй. JSX нь заавал шаардлагатай биш ч гэсэн олон хүмүүс үүнийг UI код бичихэд ашигтай гэж хардаг, React болон кодын санд аль алинд нь.

Энэ онлайн хөрвүүлэгчээр JSX-г туршиж үзэх боломжтой.

JSX-г гялс турших

JSX-г өөрийн прожектдоо гялс турших арга бол энэ <script> тагийг хуудсандаа нэмэх:

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

Одоо ямар ч <script> таг дотор type="text/babel" гэсэн аттрибут өгөөд JSX-г ашиглаж болно. Энэ бол та татаж аваад туршиж үзэх боломжтой JSX-тэй HTML файл жишээ.

Энэ аргачлал нь суралцах болон энгийн жишээ үүсгэхэд зүгээр юм. Гэхдээ энэ нь вебсайтыг удаашруулдаг тул production орчинд тохиромжгүй. Цааш явахад бэлэн болмогцоо энэ хүү <script> таг болон нэмсэн type="text/babel" аттрибутуудаа устгана. Оронд нь дараа хэсэгт <script> тагуудыг автоматаар хувиргадаг JSX урьдчилан боловсруулагчыг оруулна.

JSX прожектдээ нэмэх

JSX прожектод нэмэх нь хөгжүүлэлтийн сервер эсвэл багцлагч зэрэг төвөгтэй багажууд шаардлагагүй. Үндсэндээ JSX нэмэх нь CSS урьдчилан боловсруулагч нэмж байгаатай маш төстэй. Ганц шаардлага нь Node.js-г төхөөрөмждөө суулгасан байх хэрэгтэй.

Прожектын хавтасруугаа терминалаас ороод эдгээр хоёр командыг хуулна:

Алхам 1: Ажиллуулах npm init -y (хэрвээ алдаа гарвал энд засах арга)
Алхам 2: Ажиллуулах npm install babel-cli@6 babel-preset-react-app@3

Зөвлөгөө

Бид энд npm-г зөвхөн JSX урьдчилан боловсруулагч нэмэхэд ашиглаж байгаа; ба бусад зүйлс огт хэрэггүй юм. Үүний дараа React болон аппликейшн код хоёул <script> таг дотроо ямар ч ѳѳрчлѳлт шаардахгүй.

Баяр хүргэе! Та дөнгөж сая прожектдоо production-д бэлэн JSX суулгац оруулчихлаа.

JSX урьдчилан боловсруулагчыг ажиллуулах

src гэсэн нэртэй хавтас үүсгээд энэхүү терминал командыг ажиллуул:

npx babel --watch src --out-dir . --presets react-app/prod

Тэмдэглэл

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

Хэрвээ “You have mistakenly installed the babel package” гэсэн алдаа гарч байвал та магадгүй өмнөх алхмыг алгассан байх. Үүнийг ижил хавтсанд хийгээд дахин энэ командаа ажиллуулаад үзээрэй.

Үүнийг дуусахыг хүлээх хэрэггүй — Энэ команд нь JSX автомат шалгагчийг эхлүүлдэг.

Хэрвээ одоо та src/like_button.js гэсэн файл энэ JSX эхлэх кодтой үүсгэх юм бол автомат шалгагч боловсруулагдсан like_button.js гэдэг броузер дээр ажиллахад зориулагдсан цэвэр JavaScript код бүхий файл үүсгэх юм. JSX-тэй эх файлд өөрчлөлт орох үед энэхүү хувиргагч дахин автоматаар ачаалагдана.

Бонусанд энд хийсэн зүйлс маань орчин үеийн JavaScript бичиглэлийн боломжууд болох class-уудыг хуучин броузерт эвдрэх байх гэх айдасгүй ашиглах боломжтой болгож байгаа. Бидний нэмсэн Babel гэх багажны талаар илүү ихийг өөрийн баримтжуулалтаас мэдэх боломжтой.

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

Is this page useful?Edit this page