Html хэвийн элементүүдэд хэвжүүлэлтийн стилийг шууд буюу inline /элементийн тодорхойлолтын мөрөнд/ зааж болдог. Үүнийг React компонентийн хэвийн элементүүдэд хэрхэн өгөхийг App компонентийн
class App extends Component {
render() {
return (
<div>
<h1>
Hello world!
</h1>
</div>
)
}
}кодоор харцгаая.
Материалыг бүртгэлтэй хэрэглэгч үзнэ.
how_to_regБүртгүүлэхМэдээлэл таалагдсан бол найзуудтайгаа хуваалцаарай.
Нээгдсэн тоо: 2115 Төлбөртэй
Обьектыг үүсгэх
String обьект нь энгийн тэмдэгтийн төрөлд харгалзах хэлний дотоод обьект юм. Обьект мөрийг шалгах, хэсгийг таслан авах, том жижиг үсгэнд шилжүүлэх гээд олон тооны аргуудтай. Энэ хичээлээр бид String обьектын ихээр хэрэглэдэг аргуудын талаар авч үзэх болно. String() конструктур нь анхны утгыг заан өгөх заавал байх шаардлагагүй параметртэй. Обьектыг үүсгэх жишээнүүд
var s = new String();
var head1 = new String("JavaScript хичээлүүд");Нээгдсэн тоо: 1077 Нийтийн
Өмнөх хичээлүүдэд үүсгэсэн App, Car компонентууд өөрийн статик агуулгуудыг л хуудаст харуулж байгаад бага зэргийн динамик ажиллагааг оруулах гээд үзье. Компонентийн агуулгын хэсэг jsx бичлэгийн дүрмээр бичигдсэн javascript код учраас бид түүнд динамик ажиллагааг оруулахад төвөггүй мэт. Иймээс Car компонентийн кодийг
import React from 'react'
const car = () => <div>
<p>This is car component</p>
<p><strong>1+1</strong></p>
</div>
export default car гэж өөрчлөөд хуудсаа харвал
Нээгдсэн тоо: 451 Нийтийн
Энэ хичээлээс эхлэн олон хуудастай төслийг үүсгэн хуудас хооронд шууд буюу дахин ачаалалтгүйгээр шилжин удирдах боломжийн талаар үзэх болно. Өөрөөр хэлбэл SPA нэг хуудаст програмийг зохиож сурах юм. Хичээлд зориулан шинэ төслийг үүсгэхдээ react програм үүсгэх хичээлийнхээс арай өөрөөр шууд VSCode засварлагчаас үүсгэх аргыг ашиглая. Аргууд хооронд ялгаа бага тул онцын асуудал үүсэх учиргүй. Эхлээд төслүүдээ хадгалж буй хавтаст react-router хавтасыг үүгээд VSCode засварлагчаар үүсгэсэн хавтасаа нээн өгөөд терминалын цонхыг нээгээд
npx create-react-app . командыг өгөөрэй.
Нээгдсэн тоо: 486 Төлбөртэй
react 16 хувилбараас бий болсон програмийн компонентуудийн шатлалыг багахан хураангуйлах боломжийн талаар авч үзье. Тухайлбал компонент хооронд ашиглаж боломжтой глобал төлвүүдийг үүсгэдэг context гэсэн ухагдхуун юм. Үүнийг дараах энгийн жишээгээр харцгаая. Төсөлд
import React from "react";
const Counter2 = (props) => {
return (
<div
style={{
border: "1px solid #ccc",
width: 250,
margin: "0 auto",
}}
>
<h3>Counter 2</h3>
<p>Clicked</p>
</div>
);
};
export default Counter2;код бүхий Counter2 шинэ компонентийг нэмье.
олон гишүүнтийн язгуурууд x1, x2, x3 (x1<x2<x3) бол
1. 
2. x1, x2, x3 арифметик прогрес үүсгэх бол 
3. Уул прогрессын ялгавар 
4. 
Нээгдсэн тоо : 1332
тэгшитгэлийг бод.
Жич: Бодох арга орж ирж байна уу. Найз нөхөд, багштайгаа хамжаад үзээрэй. Иймэрхүү бодлогууд сэтгэлгээг хөгжүүлэх, арга техникт суралцахад тустай.
Нээгдсэн тоо : 806