React гэж юу вэ? Программист биш хүнд зориулсан энгийн гарын авлага

React бол интерфэйс бүтээх JavaScript сан юм — хүмүүсийн харж, дарж байгаа аппликейшны хэсэг. Та дэлгэцээ товч, бүтээгдэхүүний карт эсвэл бүхэл хуудас гэх мэт дахин ашиглагдах хэсэг буюу компонентоор бүтээдэг, React дэлгэцийг өгөгдөлтэйгээ синхрончилдог: өгөгдөл өөрчлөгдөхөд React түүнээс хамаарах хуудасны хэсгүүдийг шинэчилдэг. Үүнийг Facebook (одоо Meta) дээр бүтээсэн, нээлттэй эх код бөгөөд вэб аппликейшн бүтээх хамгийн өргөн хэрэглэгддэг аргуудын нэг юм.

AI-аар бүтээхэд яагаад чухал вэ

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

AI-аар бүтээхэд React бичиж сурах шаардлагагүй. Гэхдээ бага зэрэг мэдэх нь танд тусална:

• Өөрчлөлтөө нарийн тодорхойл. «ProductCard компонентыг үнэ тод харагдахаар өөрчил» гэдэг нь «хаа нэгтээ үнийг онцлоорой» гэснээс илүү тодорхой.
• Алдаануудыг ойлго. «Cannot read properties of undefined» эсвэл «Too many re-renders» гэх мэт мессежүүд илүү ойлгомжтой болно.
• Зохистой сонголт хий. Энгийн React аппликейшн хөтөч дээр рендерлэгддэг нь хайлтад харагдах байдал болон анхны ачаалалт хурдад нөлөөлдөг. Үүнийг мэдэх нь өөр тохиргоо хүсэх цагийг тодорхойлоход тусална.
• Хожим программистуудтай хамтрахад. React бол түгээмэл ур чадвар тул программист React кодын суурьтай ихэвчлэн хурдан танилцдаг.

Өдөр тутмын жишээ

LEGO-г төсөөлөөрэй. Нэг блокоос бүтэн загварыг сийлэхийн оронд та стандарт тоосгоор бүтээдэг. Хэдэн тоосго дугуй болно; дөрвөн дугуй болон бусад хэсэг машин болно. Хэрэв машин бүрт улаан дугуй хэрэгтэй бол дугуйн загварыг нэг удаа өөрчилнө.

React компонентууд бол тоосго. Button компонент ProductCard-ын дотор, ProductCard нь ProductGrid-ийн дотор, ProductGrid нь ShopPage-ийн нэг хэсэг байдаг. Button-ыг нэг удаа өөрчилбөл аппликейшны бүх товч өөрчлөгдөнө.

Бусад тал нь: LEGO загвар зааврыг өөрчлөх бүрт өөрөө дахин бүтдэг гэж төсөөлөөрэй. Энэ бол React-ийн өөр арга — та одоогийн өгөгдөлд дэлгэц ямар харагдах ёстойг тайлбарладаг, React хуудсан дээр юуг өөрчлөх ёстойг өөрөө гаргадаг.

Гол санаанууд

Компонент

Компонент бол интерфэйсийн хэсгийг буцаадаг JavaScript функц юм. React-ийн баримт бичигт компонентыг өөрийн логик, харагдах байдалтай UI-ийн хэсэг гэж тодорхойлдог. Компонентын нэр том үсгээр эхэлдэг.

JSX

Компонентыг ихэвчлэн JSX-ээр бичдэг бөгөөд энэ нь JavaScript-ийн дотор HTML холилдсон харагдаж байна:

function Greeting() {
  return <h1>Welcome back!</h1>;
}

JSX заавал биш, гэхдээ React-ийн баримт бичигт заасанаар ихэнх төсөл үүнийг ашигладаг. Хөтөч дээр ажиллахаасаа өмнө энгийн JavaScript болгон хөрвүүлэгддэг.

Props

Props бол компонентод дамжуулдаг оролт юм, дахин ашиглагдах хэсгийн тохиргоо шиг:

<ProductCard name="Lavender Candle" price={24} />

Яг ижил ProductCard ямар ч бүтээгдэхүүн харуулж чадна.

State

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

Hooks

Hooks бол нэр нь use-ээр эхэлдэг функцууд, жишээ нь useState (утга санах) ба useEffect (рендерлэсний дараа код ажиллуулах, жишээ нь өгөгдөл татах). Та эдгээрийг AI-ийн үүсгэсэн React кодонд хаа сайгүй харах болно.

Жишээ ажил: сагсны тоолуур

Таны онлайн дэлгүүрт «Сагсанд хийх» товч болон зүйлийн тоо харуулдаг сагсны дүрс байна гэж бодъё. React-д энэ ойролцоогоор ингэж харагдана:

import { useState } from "react";

function Shop() {
  const [cartCount, setCartCount] = useState(0);

  return (
    <div>
      <CartIcon count={cartCount} />
      <ProductCard
        name="Lavender Candle"
        price={24}
        onAdd={() => setCartCount(cartCount + 1)}
      />
    </div>
  );
}

function CartIcon({ count }) {
  return <span>Cart ({count})</span>;
}

function ProductCard({ name, price, onAdd }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>${price}</p>
      <button onClick={onAdd}>Add to cart</button>
    </div>
  );
}

Худалдан авагч «Сагсанд хийх» дарахад юу болдог вэ:

1. Товчны onClick нь onAdd-ийг дуудаж, тэр нь setCartCount-ийг дууддаг.
2. React cartCount state-ийг 0-ээс 1 болгож шинэчилдэг.
3. React Shop-ийг дахин рендерлэж, CartIcon-д count={1} дамжуулдаг.
4. Хуудас одоо «Cart (1)» харуулна. Хэн ч «сагсны текстийг ол, өөрчил» гэсэн код бичээгүй — дэлгэц өгөгдөлд дагадаг.

Хязгаарыг нь ч анзаар. Энэ тоо хөтчийн санах ойд амьдардаг. Хуудсыг шинэчилбэл дахин 0 болно. Сагсаа хадгалахын тулд түүнийг удаан хугацаанд хадгалах газарт — cookie, хөтчийн хадгалалт, эсвэл backend-ээр дамжуулан өгөгдлийн сан — хадгалах хэрэгтэй. React дэлгэцийг зохицуулдаг; өгөгдлөө хадгалдаггүй.

React вэб аппликейшны аль хэсэгт багтдаг вэ

«Vite + React» аппликейшн хөтөч дээр рендерлэгддэг (нэг хуудсан аппликейшн). Next.js аппликейшн хуудсыг эхлээд серверт рендерлэж болно, энэ нь хайлтын системд болон анхны ачаалалтад тусалдаг.

Түгээмэл нэр томьёо

Түгээмэл алдаа ба буруу ойлголт

• «React бол программчлалын хэл.» Энэ нь JavaScript (эсвэл TypeScript) дээр бичигдсэн, тэдгээрээс ашиглагддаг library юм.
• «React миний өгөгдлийг хадгалдаг.» State хөтөч дээр амьдардаг бөгөөд хуудсыг шинэчлэхэд алга болдог. Удаан хадгалах өгөгдөлд backend болон өгөгдлийн сан хэрэгтэй.
• React кодонд нууц хийх. React аппликейшны бүх зүйл зочны хөтөчид илгээгддэг. Тэнд байгаа API түлхүүрүүд нийтийн болдог. Серверт хадгал.
• «React аппликейшн хайлтад эрэмбэлэгдэх боломжгүй.» Зөвхөн үйлчлүүлэгч талд рендерлэх нь хайлтад сул, гэхдээ урьдчилан рендерлэх эсвэл серверийн рендер ихэнх асуудлыг засдаг.
• Асар том компонентууд. Нэг 1,000 мөртэй компонентыг хүн болон AI хоёуланд нь аюулгүй өөрчлөхөд хэцүү. Жижиг болгохыг хүс.
• React вэб аппликейшн бол утасны аппликейшн гэж бодох. Энэ нь утсан дээр ч гэсэн хөтөч дээр ажилладаг, харин App Store-ийн аппликейшн биш.

AI бүтээгчээсээ юу хүсэх вэ

• «Энэ хуудсыг жижиг, нэртэй компонентууд болгон хуваа, мөн компонент бүр аль файлд байгааг хэлээрэй.»
• «ProductCard компонентыг дахин ашиглагдах болго, name, price, image-ийг props болгон.»
• «Сагсыг хуудас шинэчлэгдсэний дараа үлдэхээр өгөгдлийн санд хадгал.»
• «Бүх API түлхүүрийг серверт байлга; React код манай өөрийн API-г дуудах ёстой.»
• «Серверээс ирэх өгөгдөлд ачаалах болон алдааны төлөвүүдийг нэм.»
• «Эдгээр хуудсын хувьд хайлтын харагдац чухал бол тэдгээрийг урьдчилан рендерлэ эсвэл серверт рендерлэгддэг тохиргоо ашигла.»
• «Энэ алдаа юу гэсэн үг вэ, аль компонентоос гарч байгааг энгийнээр тайлбарла.»

Илүү өргөн дүр зургийн хувьд frontend ба backend, AI-ийн бичсэн кодыг шалгахад AI-ийн үүсгэсэн кодыг хэрхэн шалгах вэ гэсэн гарын авлагыг үзнэ үү.

React Mythex дээр

Та өөрөөр хүсээгүй бол Mythex шинэ төслүүдийг Vite + React + TypeScript + Tailwind дээр эхлүүлдэг бөгөөд чатлах явцад шууд preview ажилладаг. Эхний prompt-доо өөр тохиргоо нэрлэж болно — жишээ нь «Next.js ашигла» эсвэл «энгийн static HTML landing хуудас» — мөн Mythex таны бичсэнээс сонгодог; үүний тохиргооны дэлгэц байхгүй. Технологи сонгох тухай docs хуудас сонголтуудыг тайлбарласан. Код засварлагч Free дээр зөвхөн унших горимтой; Pro дээр React кодыг шууд засах, төслөө өөр газар үргэлжлүүлэн ажиллуулахаар экспортлох боломжтой.

Асуултууд