Хичээл: React-н танилцуулга

Энэхүү зааварчилгаа нь таныг өмнө нь React-ийн мэдлэггүй гэж тооцсон болно.

Зааварчилгааг эхлүүлэхийн өмнө

Энэхүү зааварчилгаагаар бид нэг жижигхэн тоглоом хийх болно. Та тоглоом хийхгээгүй учраас алгасах гэж байж магадгүй юм — гэхдээ үүнээс өмнө түр азнаарай. Энэхүү зааварчилгаанаас сурах арга ажиллагаа нь ямар ч React апп хийхэд суурь болохоос гадна сайн сурвал React-ийн талаар гүнзгий ойлголттой болно.

Зөвлөмж

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

Энэхүү зааварчилгаа нь хэдэн хэсэгт хуваагдана:

• Зааварчилгаанд бэлдэх нь хэсгээс зааварчилгааг эхлүүлнэ
• Ерөнхий мэдээлэл хэсгээс React-ийн component, props болон state зэрэг суурь ойлголт-уудыг сурах болно.
• Тоглоомоо хөгжүүлж дуусгах нь хэсгээс React хөгжүүлэлтийн үеийн хамгийн чухал арга аргачлалыг сурах болно.
• Цаг хугацаагаар аялах нь хэсгээс React-ийн онцлог, давуу талыг илүү гүн гүнзгий сурч ойлгох болно.

Энэхүү зааварчилгааг үр дүнтэй ашиглахыг тулд та заавал нэг дор бүх хэсгийг дуусгах алба байхгүй. Нэг эсвэл хоёр хэсэг байсан ч хамаагүй өөрийнхөө хүрч чадах хэсэг хүртэл явахад л болно.

Юу бүтээх вэ?

Энэ зааварчилгаанд React ашиглан хэрхэн tic-tac-toe (икс бөөрөнхий) тоглоомыг бүтээхийг үзүүлэх болно.

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

Энэхүү зааварчилгааг үргэлжлүүлэхээсээ өмнө танд дээрх tic-tac-toe тоглоом уруу орж үзэхийг зөвлөж байна. Нэг анзаарвал зохих тоглоомын боломж нь тоглоомын хөлгийн баруун талд байгаа дугаарласан жагсаалт юм. Энэхүү жагсаалтаас тоглоомын туршид хийгдсэн бүх нүүдлийн түүхийг харж болох бөгөөд тоглох явцад шинэчлэгдэж байна.

Тоглоомтой танилцсан бол түүнийг хааж болно. Учир нь бид илүү энгийн загвараас эхэлнэ. Бидний дараагийн алхам бол таныг тоглоомыг хийж эхлэхэд бэлдэх юм.

Өмнөх шаардлага

Ерөнхийдөө таныг HTML болон Javascript-ийн талаар мэдлэгтэй гэж тооцож байгаа боловч өөр програмчлалын хэлнээс шилжин орж байгаа байсан ч та зааврыг дагаж ажиллах боломжтой байх хэрэгтэй. Мөн таныг функц, объект, массив зэрэг үгүй бол ядаж класс гэх зэрэг програмчлалын ойлголттой гэж тооцсон.

Javascript-ийн мэдлэгээ бататгамаар байвал энэ зааврыг уншихыг зөвлөж байна. Мөн бид Javascript-ийн сүүлийн үеийн хувилбар болох ES6-ийн зарим боломжийг ашиглаж байгааг анзаараарай. Энэхүү зааварт arrow functions, classes, let, and const зэрэг бичиглэлийн боломжийг ашиглах болно. Мөн Babel REPL уруу орж ES6 кодыг ямар болгож хөрвүүлэлт хийдгийг харж болох юм.

Зааварчилгаанд бэлдэх нь

Энэхүү зааварчилгааг ажиллах хоёр арга байгаа нь кодоо хөтөч дээрээ бичих эсвэл өөрийн компьютер дээрээ хөгжүүлэлтийн орчин үүсгэх юм.

Бэлтгэл Сонголт 1: Хөтөч дээрээ кодоо бичих

Энэ бол эхлэх хамгийн хурдан арга!

Эхлээд Суурь код -г шинэ тааб дээр нээ. Тэрхүү шинэ тааб дээр хоосон tic-tac-toe тоглоомын хөлөг болон React код харагдах болно. Бид энэ зааварчилгаан дээр тэр React кодыг засаж явна.

Та одоо хоёрдох сонголтыг алгасаад шууд Ерөнхий мэдээлэл хэсгээс React талаар ерөнхий мэдээлэл авах боломжтой.

Бэлтгэл Сонголт 2: Хөгжүүлэлтийн дотоод орчин

Энэ хэсэг нь зааварчилгааг дуусгахад зайлшгүй шаардлагатай биш бөгөөд хүсвэл та хийхгүй ч байж болно!

npx create-react-app my-app

cd my-app
cd src

# If you're using a Mac or Linux:
rm -f *

# Or, if you're on Windows:
del *

# Then, switch back to the project folder
cd ..

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

Туслаарай, Би гацчихлаа!

Хэрэв гацчихаад байвал энэхүү олон нийтийн тусламжийн сувгаар орж үзээрэй. Ялангуяа, Reactiflux Chat бол хурдан хугацаанд тусламж авах гайхалтай арга байх болно. Хэрэв чи хариулт авч чадахгүй, ямар нэгэн байдлаар гацсан хэвээр л байвал issue үүсгээрэй, тэгвэл бид танд тусална.

Ерөнхий мэдээлэл

Одоо та бэлтгэлээ хангачихсан бол React-ийн талаар ерөнхий мэдлэг олж авцгаая!

React гэж юу вэ?

React бол user interface хийхэд зориулсан үр дүнтэй, ямар нэгэн журамд баригдаагүй, уян хатан JavaScript сан юм. Энэ нь чамд бүрэн цогц UI-үүдийг “components” гэх бие даасан кодуудаас бүрэлдүүлэх боломжийг олгоно.

React нь хэдэн төрлийн ялгаатай компонентуудтай боловч React.Component дэд классаас эхэлцгээе:

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}

// Example usage: <ShoppingList name="Mark" />

Удахгүй дээрх XML төрлийн бичиглэлийг тайлбарлана. Бид нар компонентыг React-д дэлгэц дээр юу гаргахыг хүсэж байгаагаа хэлэхэд ашигладаг. Өгөгдөл өөрчлөгдөх үед React үр дүнтэйгээр компонентыг шинэчилж, дахин үзүүлдэг (render).

Дээр буй ShoppingList бол React компонентын класс, буюу React компонентын төрөл юм. Компонент нь props (“properties” гэдгийн товчлол) гэсэн параметр аваад render методоор шаталсан бүтэцтэй үзүүлэх зүйлийг буцаана.

render метод нь дэлгэц дээр юу гаргахыг хүсэж байгаа зүйлийн чинь тайлбар тодорхойлолт буцаадаг. React тэр тайлбар тодорхойлолтыг аваад үр дүнг харуулна. Тодруулбал render метод нь юуг үзүүлэхийг л тодорхойлсон React element буцаадаг байх нь. Ихэнх React хөгжүүлэгчид үзүүлэх зүйлийг хялбар бичих боломжтой болгодог “JSX” гэх тусгай бичиглэлийг ашигладаг бөгөөд <div /> бичиглэл нь хөрвүүлэлтийн шатанд React.createElement('div') уруу хөрвүүлэгдэж байгаа. Тиймээс дээрх жишээ нь доорх кодтой ижил гэсэн үг:

return React.createElement('div', {className: 'shopping-list'},
  React.createElement('h1', /* ... h1 children ... */),
  React.createElement('ul', /* ... ul children ... */)
);

Дэлгэрэнгүй кодыг ийшээ орж хараарай .

Хэрэв сонирхож байвал createElement() функцийн тайлбар нь API reference-т дэлгэрэнгүй байгаа боловч энэхүү зааварчилгаанд хэрэглэгдэхгүй. Түүний оронд бид JSX ашиглах болно.

JSX нь Javascript-ийн бүх боломжийг ашиглах боломжтой байдаг тул та ямар ч JavaScript илэрхийллийг JSX-ийн дотор угалзан хаалтад({...}) бичин ашиглаж болно. React элемент нь хувьсагчид утга оноон эсвэл өөрийнхөө програм дотроо нэгээс нөгөөд дамжуулан ашиглаж болох JavaScript объект юм.

Дээрх ShoppingList компонент нь зөвхөн <div /> болон <li /> гэх анхнаасаа байдаг DOM компонентуудыг render хийж байна. Гэхдээ та хүссэн React компонентоо үүсгэж, render хийх боломжтой. Жишээ нь бид одоо <ShoppingList /> гэж бичин бүтэн дэлгүүрийн барааны жагсаалт (shopping list)-г оруулж ирэх боломжтой. React компонентууд нь encapsulated бөгөөд бие даан ажилладаг. Энэ нь цогц үйлдэлтэй UI-уудыг энгийн компонентуудаас үүсгэх боломж олгоно.

Суурь кодыг ойлгох нь

Хэрэв энэхүү зааварчилгааг хөтөч дээрээ даган ажиллахаар болсон бол дараах кодыг шинэ тааб дээр нээ: Суурь код. Хэрэв зааварчилгааг өөрийн дотоод орчинд даган ажиллах болсон бол төслийн хавтас дахь src/index.js -г нээгээрэй. (бэлдцийн үед энэ файлыг үүсгэсэн байх ёстой.).

Энэхүү суурь код нь бидний хийж байгаа зүйлийн эхлэл болох юм. Таныг зөвхөн React сурах болон tic-tac-toe програмчлахад төвлөрөхөд туслах зорилгоор CSS хэвбэржүүлэлтийн кодыг бэлдэж өгсөн.

Кодыг хараад та бидэнд гурван React компоненттой байгааг анзаарна:

• Square (дөрвөлжин)
• Board (хөлөг)
• Game (тоглоом)

Square компонент нь нэг ширхэг <button> render хийх бөгөөд Board нь 9 дөрвөлжин нүд render хийнэ. Game компонент нь хөлгийг зарим тодорхойгүй утгатай зурж render хийж байгаа бөгөөд тэр утгуудыг бид сүүлд өөрчлөх болно. Одоохондоо ямар ч харилцан үйлчлэлцдэг компонент байхгүй байгаа.

Props-р өгөгдөл дамжуулах

Эхлээд Board компонентоос Square компонент уруу өгөгдөл дамжуулах гэж оролдъё.

Таныг зааварчилгааг ажиллах явцдаа кодуудыг copy/paste хийхгүйгээр өөрөө бичихийг санал болгож байна. Энэ нь таны биед ой санамж үүсгэхээс гадна, илүү ойлгоход тусалдаг.

Board-ийн renderSquare методын кодыг value гэх props-г Square уруу дамжуулахаар өөрчилье:

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;  }
}

Square-ийн render-д тэрхүү утга (value)-г үзүүлэхийн тулд {/* TODO */}-г {this.props.value}-ээр сольж бичье:

class Square extends React.Component {
  render() {
    return (
      <button className="square">