Html хэвийн элементүүдэд хэвжүүлэлтийн стилийг шууд буюу inline /элементийн тодорхойлолтын мөрөнд/ зааж болдог. Үүнийг React компонентийн хэвийн элементүүдэд хэрхэн өгөхийг App компонентийн
class App extends Component {
render() {
return (
<div>
<h1>
Hello world!
</h1>
</div>
)
}
}кодоор харцгаая.
Материалыг бүртгэлтэй хэрэглэгч үзнэ.
how_to_regБүртгүүлэхМэдээлэл таалагдсан бол найзуудтайгаа хуваалцаарай.
Нээгдсэн тоо: 575 Бүртгүүлэх
Төслийн Car компонентийг Stateful буюу Component классаас удамшсан класс байдлаар тодорхойлсноор react компонентийн амьдралын циклүүдэд хандах боломжийг авсан. Car компонентод дээр компонентийн төлвийн өөрчлөлтүүдийн циклүүдийг харцгаая. Үүний тулд Car компонентийн кодийг
class Car extends React.Component {
shouldComponentUpdate(nextProps, nextState) {
console.log('Car shouldComponentUpdate', nextProps, nextState)
return true
}
componentDidUpdate() {
console.log('Car componentDidUpdate')
}
render() {
console.log('Car render')
const inputClasses = [styles.input]
...
return (
<div className={styles.Car} style={style}>
<h3>Машиний нэр: {this.props.name}</h3>
<p>Он: <strong>{this.props.year}</strong></p>
<input
type="text"
onChange={this.props.onChangeName}
value={this.props.name}
className={inputClasses.join(' ')}
/>
<button className={styles.btn} onClick={this.props.onDelete}>Устгах</button>
</div>
)
}
}
export default Carгэж өөрчилье.
Нээгдсэн тоо: 952 Төлбөртэй
RxJs сангийн хүрээнд буфер гэж юу болох талаар энэ хичээлээр авч үзье. Буфер гэдгийг утгуудыг түр зуур хадгалах сав буюу орон зайг гэж ойлгоорой.
buffer, bufferTime арга
Практик жишээгээр ухагдхууныг ойлгох нь амархан байдаг учраас шууд
Rx.Observable.interval(500)
.buffer(Rx.Observable.interval(2000))
.take(3)
.subscribe(createSubscribe('buffer'));кодыг авч үзье. Хөтөч дээр хуудсаа нээвэл консолд
үр дүнг үзүүлнэ. Код юу хийж байгааг авч үзье.
Нээгдсэн тоо: 1728 Төлбөртэй
Хэрэглэгч талын хуудасны динамик ажиллагааг үүсгэн удирдахад зориулагдсан javascript фреймворкууд интернет програмчлалд улам хүчтэй түрэн орж ирж байгаа тул технологийн хөгжлөөс хоцрохгүй байх үүднээс VueJs фреймворкийн хичээлүүдийг нийтэлж байгаа билээ. Энэ удаад VueJs -ийг ашиглан програмаа хэрхэн хэвжүүлэхийг доорх энгийн кодоор
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Vue JS</title>
<style>
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
border: 1px solid black;
display: inline-block;
margin: 40px;
}
.red {background: red;}
.blue {background: blue;}
.green {background: green;}
</style>
</head>
<body>
<div id="app">
<div class="circle"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
}
})
</script>
</body>
</html>судлая. Кодын head хэсэгт style тэгд хэвүүдийг бичин өгөөд хэвийг ашиглах circle класстай нэг div -ийг тодорхойлсон. Хуудсыг хөтөч дээр нээвэл
Нээгдсэн тоо: 968 Төлбөртэй
ES6 -д шинээр бий болсон бас нэг зүйл болох функцийн анхдагч параметрүүдийн талаар хичээлд авч үзэцгээе. Эхлээд ES5 -д функцийн параметрт анхдагч утгыг олгохдоо ашигладаг байсан аргачлалыг харуулсан жишээг авч үзье.
const func = (a) => {
return a;
};
console.log(func());Функцийг тодорхойлохдоо ES6 -гийн бичлэгээр бичсэн. Терминалаас webpack -ийг дуудан багцыг үүсгээд index.html файлыг нээгээд консолыг харвал
тэгшитгэлийг бод.
бол 
илэрхийллийн утгыг ол.