React.js сурчихлаа :)

2B | +1% better 2day | dev.019

Эхний нийтлэлээрээ React-н талаар ерөнхий мэдээлэл, JSX (JavaScriptXML) талаар болон өөрөө хийж үзэх дасгал ажил зэргийг оруулсан. Өнөөдөр харин үргэлжлүүлэн үлдсэн 6 хичээлийг нь үзнэ ээ.

React.JS сурахгүй бол болохгүй нь part#1

Component (Lesson#2)

A component is a small, reusable chunk of code that is responsible for one job. That job is often to render some HTML.

React-н хувьд магадгүй хамгийн чухал сэдэв нь component (бүрэлдэхүүн хэсэг). Том зүйлийн жижиг хэсэг нь гэж ойлгож болохоор бөгөөд дахин ашиглах боломжтой байдаг. Үндсэн үүрэг нь HTML element-г харуулах.

Дээд талын кодыг л бүрэн ойлгоход React-н үндсэн ажиллагааг ойлгож байгаатай ижил. Хэрэгтэй library-гаа оруулж ирээд, component-ээ үүсгээд Render хийх нь тэгээд л бараг React-даа.

1. multi-line JSX, variable attribute, logic in render & 2. conditional, this, eventListener

Дээр нь нэмээд multi-line JSX, variable attribute, logic in render, conditional, this, eventListener зэргийг бас мэдэхэд илүүдэхгүй.
— this : тухайн class-н instance-г заадаг
— eventListener : ямар нэг үйлдэлд хариу үзүүлэх (жишээ: button onClick)

Components interacting (Lesson#3)

What makes React special is the ways in which components interact.

Мэдээж ганц Component гэж юу гэдгийг ойлгочхоод л бүх юм дуусчихгүй. Нөгөөх чинь яаж ажилладаг талаар сурах хэрэгтэй. Ажиллах ажиллахдаа хоорондоо хэрхэн холбогддог талаар.

Components interacting (React 101)

Хамгийн эхний алхам нь 1 component дотор өөр нэг component-г дуудаж ажиллуулах. (export & import)

Clock component export → import and render in App

За тэгээд нэг component-с нөгөө рүүгээ мэдээлэл дамжуулах хэрэг гарна. Тэрийг нь харин “props” гэж нэрлэдэг.

Props-оор дан ганц утга биш eventHandler функцийг ч бас дамжуулж болдог.
<h1 onClick={this.handleClick}> Hello world </h1>. Нэрлэх форматын хувьд хийх үйлдлээ click бол eventHandler-аа handleClick гэж нэрлээд prop name-ээ onClick гэвэл зохилтой.
— this.props.children : component-н нээлт/хаалтын tag доторх бүх зүйлс
— defaultProps : хэрвээ утга өгөөгүй бол ашиглагдана

Props-тэй төстэй 1 зүйл байдаг нь state. Гэхдээ чухал ялгаа нь тухайн component нь props-н утгыг сольж болохгүй бол state-н утгыг өөрчлөх боломжтой байдаг.

this.setState()-г ажиллуулах үед автоматаар .render()-г дууддаг.

Component lifecycle methods (Lesson#4)

Component lifecycle нь хувьд үндсэн 3 түвшинтэй байдаг.
1. Mounting : анх үүсэх, DOM руу нэмэх
2. Updating : props, state-с хамаарч өөрчлөгдөх
3. Unmounting : DOM-с устгах

Бүх л component ядаж mount хийгдсэн байдаг. Зарим нь (logo) хэзээ ч unmount хийгдэхгүй бол, ихэнх нь update хийгдэж байдаг.

Lifecycle method-ууд 1. mounting phase
- constructor : Хамгийн анх дуудагддаг
- render : constructor дараа component-г харуулдаг
- componentDidMount : төгсгөлд дуудагдана

2. updating phase
- render : component шинэчлэгдэх үед component-г харуулдаг
- componentDidUpdate : component шинэчлэгдэх үед дуудагдана

3. unmounting phase
- componentWillUnmount : component устахын өмнө дуудна

Hooks (Lesson#5)

Component-н класс байдлаар эсвэл функц байдлаар бичиж болдог. Function component нь заавал JSX буцаах бөгөөд класс-аа бодвол бичихэд хялбар, ойлгомжтой гэдэг.

1. State hook

Класс нь дахин хэрэглэх, тестлэхэд хэцүү ядаргаатай байсан тул React 16.8-с Hooks гэдэг ойлголт орж ирсэн. Ингэснээр Hooks ашиглан component-н state-г өөрчлөх боломжтой болсон. React-н хувьд useState, useEffect, useContext зэрэг 10-аад built-in hooks-тэй.

Note: If you’re familiar with lifecycle methods of class components, you could say that Hooks let us “hook into” state and lifecycle features directly from our function components.

Дан ганц хувьсагч биш array, object ч бас ашиглаж болдог. Түүнээс гадна 1 state hook дотор олон хувьсагчийн шинэчлэх биш тус тусад нь байлгах нь React-н философитой нийцнэ (simpler).

—Destructuring : Array болон Object-с өгөгдлийг гаргаж авах арга

let cars = ['ferrari', 'tesla', 'cadillac'];
let [car1, car2, car3] = cars;                 // destructuring

— Spread syntax (…) : Array болон Object-н элементүүдийг өөр газар хэрэглэгдэх шаардлагатай үед дамжуулдаг

function sum(x, y, z) { return x+y+z; };
const numbers = [1, 2, 3];
console.log(sum(...numbers));                  // spread

2. Effect hook

Effect Hook ашиглаад render хийсний дараа үйлдэл хийнэ. Component render хийгдсэний дараа ямар нэг үйлдэл (side effects) хийхэд тохиромжтой байдаг.

useEffect нь render болгоны дараа дуудагдах учир шаардлагатай бол cleanUp функц бичих хэрэгтэй. Ингэснээр элдэв алдаа гарах, memory leak үүсэхээс сэргийлдэг. Функц дотроо return бичих юм бол cleanUp функц болдог. Цаашлаад бид useEffect-г хэзээ дуудахаа тохируулах боломжтой.

Dependancy array доторх хувьсагч хэрвээ өөрчлөгдсөн байвал тухайн effect-г ажиллуулна.

State болон Effect hook-г зөвхөн React функц дотор ашиглах боломжтой. Класс component эсвэл энгийн JavaScript дотор ажилладаггүй. Түүнээс гадна loop, condition, nested function дотор биш ХАМГИЙН ГАДНА (top level) талд нь hooks-г бичиж ашигладаг.

hooks wrong usage VS correct one (top level)

Components Stateless & Stateful (Lesson#6)

Дотроо ямар нэг state агуулж байгаа бол Stateful, байхгүй зөвхөн харуулах үйлдэл хийдэг бол Stateless болдог. Stateful component-c Stateless component луу мэдээлэл дамжуулдаг. Харин тухайн component нь зөвхөн өөрийн state-г л өөрчлөх боломжтой, дамжиж ирсэн props-г өөрчилж чаддаггүй.

From Stateful component (Parent) to → Stateless component (Child)

Child component нь шаардлагатай бол Parent-н state-г props-оор дамжиж ирсэн eventHandler-г ашиглан өөрчилдөг.
- Parent нь дотор changeName-г eventHandler үүсгэнэ
- props-оор дамжуулна (onChange={this.changeName})
- Child нь ашиглана (this.props.onChange(name);)

Stateful Parent component → Stateless Child component

1 функц 1 ажил хийх, 1 component 1 ажил хийх философийн дагуу parent-с ирсэн өгөгдлийн харуулах нэг child, өөрчлөх өөр нэг child гээд хуваах нь зөв шийдэл гэж үздэг.

Parent → Child #1 (change) → Child #2 (display)

Advanced React (Lesson#7)

Мэдээж үндсэн сэдвүүдээ үзсэний дараа бага зэрэг ахисан түвшний зүйлсийг үзэцгээе. Эхлээд style…

• inline style : style-г attribute шиг бичих
  <h1 style={{ color: ‘red’ }}>Hello world</h1>
• style object variable : олон style бичих хэрэг гарвал
  const styles = { color: ‘red’, background:‘black’ }; }
• style value syntax : px бичихгүй байж болно
  { fontSize: 30 }

Дараа нь component-н Container болон Presentational хуваарилалт. Presentational component нь зөвхөн HTML үүсгэх JSX-г агуулна. Container component нь функциональ хэсэг буюу state хадгалах, тооцоолол хийх шаардлагатай хэсгийг агуулна.

Container component VS Presentational component

Дараагийн 1 зүйл нь propTypes. Validation болон Documentation хийхэд ашигладаг. string үү, number уу эсвэл required уу гэх мэт.

Мөн хамгийн түгээмэл хэрэглээ болох form-г бөглөх үед ШУУД server талруугаа өөрчлөлтийг илгээдэг. Ингэснээр FrontEnd болон BackEnd яг ижил өгөгдөлтэй байх, өөрчлөлтөд тэр дороо хариу өгөх боломжтой болдог.

React Form-н хувьд ойлгох хэрэгтэй 1 зүйл бий. Тэр нь Controlled component болон Uncontrolled component. Нэрээс нь ойлгож болох зүйл нь controlled component нь өөртөө state хадгалдаггүй, өөр 1 component-оор удирдуулдаг. Жишээ нь <input type=”text” /> өөрийнхөө state-г өөрөө хадгалдаг учир uncontrolled component. Гэхдээ value attribute-г нэмэх юм бол controlled болж хувирна. Учир нь өөрийн internal storage-г ашиглахаа больдог.
- What are Uncontrolled Components? link

За ингээд 6 хичээл маань дуусаж байна. Хичээл болгонд quiz, project, practice pack болон cheatsheet гэж байсан. Энэ github repository дотор project-уудын кодыг орууллаа. Уул нь CodeCademy дээрээ шууд хийгээд явбал алхам алхмаар нь заадаг, 1 алхмаа дуусгаад дараагийнх руу орох боломжтой болдог, гацвал дагаж хийх бичлэг мөн бэлэн код харах боломжтой гоё юм билээ. Ямар ч байсан хичээлээ үзээд, туршаад явсны эцэст React-н талаар үндсэн ойлголттой болж авлаа. 😃 Одоо бодит амьдрал дээр л… (real projects)