React JS darslari
JSX da Javascript "{}" qavslar bilan.
JSX bizga Javascript fayl ichida HTML faylini yozish imkonini beradi.
Ana shunday holatlarda biz kod ichida gulli qavslardan foydalanamiz.
export default function Avatar() {
return (
<img
className="avatar"
src="https://i.imgur.com/7vQD0fPs.jpg"
alt="Gregorio Y. Zara"
/>
);
}
Bu yerda https://i.imgur.com/7vQD0fPs.jpg" va "Gregorio Y. Zara" string sifatida kelmoqda. Ammo biz ularni dinamik sifatida belgilanishini hohlasak quyidagicha yo'l tutamiz:
export default function Avatar() {
const avatar = 'https://i.imgur.com/7vQD0fPs.jpg';
const description = 'Gregorio Y. Zara';
return (
<img
className="avatar"
src={avatar} //*
alt={description} //*
/>
);
}
Yuqoridagi qiymatlarni ishlatish uchun {} gulli qavslardan foydalandik. Chunki gulli qavslar {} bizga HTML ichida Javascript bilan ishlash imkonini beradi.
2. Gulli qavslar ichida obyekt ishlatish
export default function TodoList() {
return (
<ul style={{
backgroundColor: 'tomato',
color: 'white'
}}>
<li>Improve the videophone</li>
<li>Prepare aeronautics lectures</li>
<li>Work on the alcohol-fuelled engine</li>
</ul>
);
}
{{ }} bu hech qanda ortiqcha sintaksis emas. Shunchaki JSX ichida obyekt ishlatish hisoblanadi.
Inline style attributi xususiyatlari camelCase da yoziladi, ya'ni background-color emas balki backgroundColor shaklida.
3. JSX da bundanda qiziqroq kod yozish mumkin
const person = {
name: 'Davron Parpiev',
theme: {
backgroundColor: 'tomato',
color: 'white'
}
};
export default function TodoList() {
return (
<div style={person.theme}>
<h1>{person.name}'s Todos</h1>
<img
className="avatar"
src="https://i.imgur.com/7vQD0fPs.jpg"
alt="Gregorio Y. Zara"
/>
<ul>
<li>Improve the videophone</li>
<li>Prepare aeronautics lectures</li>
<li>Work on the alcohol-fuelled engine</li>
</ul>
</div>
);
}
div va h1 teglari ichida person obyektining xususiyatlarini ishlashiga e'tibor bering.