id | title | permalink | redirect_from | prev | next | |||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
components-and-props |
ุงูู
ูููุงุช ูุงูุฎุงุตูุงุช |
docs/components-and-props.html |
|
rendering-elements.html |
state-and-lifecycle.html |
ุชุชูุญ ููุง ุงูู ููููููุงุช (Components) ุชูุณูู ูุงุฌูุฉ ุงูู ุณุชุฎุฏู ุฅูู ูุทุน ู ูุณุชูููููุฉ ูุงุจูุฉ ูุฅุนุงุฏุฉ ุงูุงุณุชุฎุฏุงู ุ ูุงูุชูููุฑ ุจูู ูุทุนุฉ ุนูู ุงููุฑุงุฏ. ุณูุชุญุฏูุซ ูู ูุฐู ุงูุตูุญุฉ ุนู ู ููุฏูู ุฉ ุฅูู ู ูููู ุงูู ููููููุงุชุ ุจุฅู ูุงูู ุฃู ุชุฌุฏ ู ุฑุฌุนูุง ู ููุตููููุง ุญูู ูุงุฌูุฉ ุจุฑู ุฌุฉ ุงูุชุทุจูู (API) ุงูุฎุงุตูุฉ ุจุงูู ููููููุงุช ู ู ููุง.
ุชูุดุจูู ุงูู ููููููุงุช ู ู ุงููุงุญูุฉ ุงููุธุฑููุฉ ุฏูุงู JavaScriptุ ููู ุชูุจู ู ูุฏุฎููุงุช ุงูู ุณุชุฎุฏู (ูุงูุชู ุชูุฏุนู props ุงุฎุชุตุงุฑูุง ููููู ุฉ properties ูุชุนูู ุงูุฎุงุตููุงุช) ูุชูุนูุฏ ุนูุงุตุฑ React ูุตู ู ุง ุงูุฐู ููุจุบู ุนุฑุถู ุนูู ุงูุดูุงุดุฉ.
ุฅูู ุฃุจุณุท ุทุฑููุฉ ูุชุนุฑูู ู ูููููู ูู ูุชุงุจุฉ ุฏุงูุฉ JavaScript:
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
ุชูุนุฏู ูุฐู ุงูุฏุงูุฉ ู ูููููููุง ุตุงูุญูุง ูู React ูุฃูููุง ุชูุจู ูุณูุทูุง ูุงุญุฏูุง ู ู ุฎุงุตููุงุช ุงููุงุฆู "props" (ุงุฎุชุตุงุฑูุง ููููู ุฉ properties ูุชุนูู ุงูุฎุงุตููุงุช) ู ุน ุจูุงูุงุชู ูุชูุนูุฏ ุนูุตุฑ React. ูุฏุนู ู ุซู ูุฐู ุงูู ููููููุงุช ุจุงูู ููููููุงุช ุงูุฏุงูููุฉ "function components" ูุฃูููุง ุนุจุงุฑุฉ ุนู ุฏูุงู JavaScript.
ุจุฅู ูุงูู ุฃูุถูุง ุฃู ุชุณุชุฎุฏู ุงูุฃุตูุงู "ES6 class" ูุชุนุฑูู ุงูู ููููููุงุช ูู ุง ููู:
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
ุฅูู ุงูู ูููููููู ุงูุณุงุจููู ู ูุชูุงููุฆุงู ู ู ูุฌูุฉ ูุธุฑ React.
ุชู ุชูู ุงูุฃุตูุงู ุจุนุถ ุงูู ููุฒุงุช ุงูุฅุถุงูููุฉ ุงูุชู ุณูุชุญุฏูุซ ุนููุง ูู ูุณู ุงููุณู ุงูุชุงูู. ูุญุชู ุฐูู ุงูููุช ุณูุณุชุฎุฏู ุงูู ููููููุงุช ุงูุฏุงูููุฉ ูุจุณุงุทุชูุง.
ู ูุตุงุฏู ุญุชู ุงูุขู ุฅููุง ุนูุงุตุฑ React ุชูู ุซููู ุนูุงุตุฑ DOM ุงูู ูุนุชุงุฏุฉ:
const element = <div />;
ูููู ููู ููู ููุนูุงุตุฑ ุฃู ุชูู ุซููู ู ููููููุงุช ู ูุนุฑูููุฉ ู ู ูุจู ุงูู ุณุชุฎุฏู :
const element = <Welcome name="Sara" />;
ุนูุฏู ุง ุชุฌุฏ React ุนูุตุฑูุง ููู ุซููู ู ูููููููุง ู ูุนุฑููููุง ู ู ูุจู ุงูู ุณุชุฎุฏู ุ ูุณุชูู ุฑููุฑ ุฎุงุตููุงุช JSX ุฅููู ุนูู ุดูู ูุงุฆู ูุญูุฏุ ูุฏุนู ูุฐุง ุงููุงุฆู "props".
ูู ุณุจูู ุงูู ุซุงู ุชุนุฑุถ ูุฐู ุงูุดููุฑุฉ ุนุจุงุฑุฉ "Hello, Sara" ูู ุงูุตููุญุฉ:
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Sara" />;
ReactDOM.render(
element,
document.getElementById('root')
);
ุชูุฎูุต ู ุง ุญุฏุซ ูู ูุฐุง ุงูู ุซุงู:
- ูุณุชุฏุนู ุงูุชูุงุจุน
ReactDOM.render()
ู ุน ุงูุนูุตุฑ<Welcome name="Sara" />
. - ุชุณุชุฏุนู React ุงูู
ูููููู
Welcome
ู ุน ุชู ุฑูุฑ{name: 'Sara'}
ูุฎุงุตููุฉ props. - ููุนูุฏ ุงูุนูุตุฑ
Welcome
ุงูุนูุตุฑ<h1>Hello, Sara</h1>
ููุชูุฌุฉ ูู. - ุชูุญุฏููุซ React DOM ุจููุงุกุฉ DOM ูููุทุงุจูู
<h1>Hello, Sara</h1>
.
ู ูุงุญุธุฉ: ูุฌุจ ุฃู ุชุจุฏุฃ ุฃุณู ุงุก ุงูู ููููููุงุช ุฏูู ูุง ุจุฃุญุฑู ูุจูุฑุฉ.
ุชูุนุงู ูู React ุงูู ููููููุงุช ุงูุชู ุชุจุฏุฃ ุจุฃุญุฑู ุตุบูุฑุฉ ูุนูุงุตุฑ DOMุ ุนูู ุณุจูู ุงูู ุซุงู ููู ุซููู
<div />
ุนูุตุฑ HTML ุงูุฐู ููุฏุนู divุ ุจููู ุง ุชูู ุซููู<Welcome />
ู ูููููููุง ูู React ูุชุชุทูููุจ ุฃู ูููู ุชุนุฑูู ูุฐุง ุงูู ูููููู ู ูุฌูุฏูุง ุถู ู ุงูู ุฌุงู ุงูู ูุญุฏููุฏ.ุจุฅู ูุงูู ูุฑุงุกุฉ ุงูู ุฒูุฏ ุนู ุงูู ูุทู ุงููุงู ู ูุฑุงุก ูุฐู ุงูุงุชูุงูููุฉ ู ู ููุง.
ููู ููู ููู ููููููุงุช ุฃู ุชุดูุฑ ุฅูู ู ููููููุงุช ุฃุฎุฑู ูู ูุงุชุฌูุงุ ูุณู ุญ ููุง ูุฐุง ุจุงุณุชุฎุฏุงู ููุณ ุงูู ูููููู ุงูู ูุฌุฑููุฏ ูุฃู ุฏุฑุฌุฉ ู ู ุงูุชูุตููุ ุฒุฑ (button)ุ ุฃู ุญูู ุฅุฏุฎุงู (form)ุ ุฃู ู ุฑุจูุน ุญูุงุฑ (dialog)ุ ุฃู ุดุงุดุฉ (screen)ุ ููู React ููุนุจููุฑ ุนููุง ุฌู ูุนูุง ุจุงูู ููููููุงุช.
ุนูู ุณุจูู ุงูู
ุซุงู ููู
ูููุง ุฅูุดุงุก ู
ูููููู ุงุณู
ู App
ูุนุฑุถ ูู ูุงุชุฌู ุงูู
ูููููู Welcome
ุนุฏูุฉ ู
ุฑูุงุช:
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
function App() {
return (
<div>
<Welcome name="Sara" />
<Welcome name="Cahal" />
<Welcome name="Edite" />
</div>
);
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
ุชุญุชูู ุชุทุจููุงุช React ุงูุฌุฏูุฏุฉ ุนุงุฏุฉู ุนูู ุงูู
ูููููู App
ูู ุงูู
ุณุชูู ุงูุฃุนูู ูุชูุญุฏุฑ ุนูู ุจุงูู ุงูู
ููููููุงุชุ ูููู ุฅู ููุช ุชุฏู
ุฌ React ู
ุน ุชุทุจูู ู
ูุฌูุฏ ู
ูุณุจููุง ููุฏ ุชุจุฏุฃ ู
ู ุงูู
ุณุชูู ุงูุณููู ุจู
ูููููู ุตุบูุฑ ู
ุซู ุงูุฒุฑ Button
ูุชุตุนุฏ ุชุฏุฑูุฌูููุง ุญุชู ุงูู
ุณุชูู ุงูุฃุนูู ูู ููููููุฉ ุงูุชุทุจูู.
ูุง ุชุชุฑุฏุฏ ุจุชูุณูู ุงูู ููููููุงุช ุฅูู ู ููููููุงุช ุฃุตุบุฑ.
ุนูู ุณุจูู ุงูู
ุซุงู ุงูุธุฑ ุฅูู ู
ูููููู ุงูุชุนูููุงุช Comment
ุงูุชุงูู:
function Comment(props) {
return (
<div className="Comment">
<div className="UserInfo">
<img className="Avatar"
src={props.author.avatarUrl}
alt={props.author.name}
/>
<div className="UserInfo-name">
{props.author.name}
</div>
</div>
<div className="Comment-text">
{props.text}
</div>
<div className="Comment-date">
{formatDate(props.date)}
</div>
</div>
);
}
ููุจู ูุฐุง ุงูู
ูููููู ุงููุงุฆู author
ุ ูุงูุณูุณูุฉ ุงููุตููุฉ text
ุ ูุงูุชุงุฑูุฎ date
ูุฎุงุตูุงุช props ููุ ูููู
ุซููู ุชุนููููุง ุนูู ู
ูุงูุน ุงูุชูุงุตู ุงูุงุฌุชู
ุงุนู.
ู ู ุงูุตุนุจ ุชุบููุฑ ูุฐุง ุงูู ูููููู ุจุณุจุจ ูุฐู ุงูุชุฏุงุฎูุงุชุ ูู ู ุงูุตุนุจ ุฃูุถูุง ุฅุนุงุฏุฉ ุงุณุชุฎุฏุงู ุฃุฌุฒุงุก ู ููุ ูููุญุงูู ุงุณุชุฎุฑุงุฌ ุจุนุถ ุงูู ููููููุงุช ู ูู.
ุณูุณุชุฎุฑุฌ ูู ุงูุจุฏุงูุฉ ู
ูููููู ุงูุตูุฑุฉ ุงูุฑู
ุฒููุฉ Avatar
:
function Avatar(props) {
return (
<img className="Avatar"
src={props.user.avatarUrl}
alt={props.user.name}
/>
);
}
ูุง ูุญุชุงุฌ ุงูู
ูููููู Avatar
ุฅูู ู
ุนุฑูุฉ ุฃููู ู
ูุณุชุฎุฏูู
ูู ุงูู
ูููููู Comment
. ููุฐูู ุฃุนุทููุง ุฎุงุตููุงุชู prop ุงุณู
ูุง ุฃูุซุฑ ุนู
ูู
ููุฉู ููู: user
ุจุฏููุง ู
ู author
.
ููุตู ุจุชุณู ูุฉ ุงูุฎุงุตููุงุช props ู ู ูุฌูุฉ ูุธุฑ ุงูู ูููููู ููุณู ูููุณ ูู ุงูุณูุงู ุงูุฐู ุชูุณุชุฎุฏูู ููู.
ุจุฅู
ูุงููุง ุงูุขู ุชุจุณูุท ุงูู
ูููููู Comment
ูููููุง:
function Comment(props) {
return (
<div className="Comment">
<div className="UserInfo">
<Avatar user={props.author} />
<div className="UserInfo-name">
{props.author.name}
</div>
</div>
<div className="Comment-text">
{props.text}
</div>
<div className="Comment-date">
{formatDate(props.date)}
</div>
</div>
);
}
ุณูุณุชุฎุฑุฌ ุงูุขู ู
ูููููู ู
ุนููู
ุงุช ุงูู
ุณุชุฎุฏู
UserInfo
ูุงูุฐู ูุนุฑุถ ุงูู
ูููููู Avatar
ุจุฌุงูุจ ุงุณู
ุงูู
ุณุชุฎุฏู
:
function UserInfo(props) {
return (
<div className="UserInfo">
<Avatar user={props.user} />
<div className="UserInfo-name">
{props.user.name}
</div>
</div>
);
}
ููุชูุญ ููุง ูุฐุง ุชุจุณูุท ุงูู
ูููููู Comment
ุฃูุซุฑ:
function Comment(props) {
return (
<div className="Comment">
<UserInfo user={props.author} />
<div className="Comment-text">
{props.text}
</div>
<div className="Comment-date">
{formatDate(props.date)}
</div>
</div>
);
}
ูุจุฏู ุงุณุชุฎุฑุงุฌ ุงูู
ููููููุงุช ูู ุงูุจุฏุงูุฉ ุนู
ููุง ู
ุฌูุฏูุงุ ูููู ุณูุฑู ุงููุงุฆุฏุฉ ุงููุจูุฑุฉ ูุงู
ุชูุงู ุนุฏูุฉ ู
ููููููุงุช ูุงุจูุฉ ูุฅุนุงุฏุฉ ุงูุงุณุชุฎุฏุงู
ุนูุฏ ุจูุงุก ุชุทุจููุงุช ูุจูุฑุฉ. ุงููุงุนุฏุฉ ููุง ูู: ุฅู ุงุณุชุฎุฏู
ูุง ุฃุฌุฒุงุก ูุงุฌูุฉ ุงูู
ุณุชุฎุฏู
ุนุฏูุฉ ู
ุฑูุงุช (ู
ุซู ุงูุฒุฑ Button
ุ ู ุงูููุญุฉ Panel
ุ ูุงูุตูุฑุฉ ุงูุฑู
ุฒููุฉ Avatar
)ุ ุฃู ูุงูุช ูุฐู ุงูุฃุฌุฒุงุก ู
ูุนููุฏุฉ ุจุญุฏ ุฐุงุชูุง (ู
ุซู ู
ูููููู ุงูุชุทุจูู App
ุ ู FeedStory
ุ ูุงูุชุนููู Comment
)ุ ููู ู
ูุฑุดููุญุฉ ุจุดูู ูุจูุฑ ูุฃู ูุฌุนููุง ู
ููููููุงุช ูุงุจูุฉ ูุฅุนุงุฏุฉ ุงูุงุณุชุฎุฏุงู
.
ูุง ูุฌุจ ุชุนุฏูู ุฎุงุตููุงุช ุงูู
ููููููุงุชุ ุณูุงุกู ุตุฑูุญูุง ุนููุง ูุฏุงูุฉ ุฃู ูุตููุ ูููุฃุฎุฐ ูุฐุง ุงูู
ุซุงู ุนู ุฏุงูุฉ ุงูุฌู
ุน sum
:
function sum(a, b) {
return a + b;
}
ุชูุฏุนู ูุฐู ุงูุฏูุงู ุจุงูุฏูุงู ุงูููููุฉ (Pure Functions) ูุฃูููุง ูุง ุชุญุงูู ุชุบููุฑ ู ูุฏุฎูุงุชูุง ูุชูุนูุฏ ุฏูู ูุง ููุณ ุงููุชูุฌุฉ ูููุณ ุงูู ูุฏุฎูุงุช.
ุนูู ุงูุนูุณ ู ู ุฐูู ูุฌุฏ ุฃูู ูุฐู ุงูุฏุงูุฉ ุบูุฑ ูููุฉ ูุฃูููุง ุชูุบูููุฑ ู ูุฏุฎูุงุชูุง:
function withdraw(account, amount) {
account.total -= amount;
}
ุฅูู React ู ุฑูุฉ ุฌุฏููุง ูููู ูุฏููุง ูุงุนุฏุฉ ูุงุญุฏุฉ ุตุงุฑู ุฉ ููู:
ูุฌุจ ุฃู ุชุณูู ู ููููููุงุช React ุณููู ุงูุฏูุงู ุงูููููุฉ ู ุน ุงุญุชุฑุงู ูุง ูุฎุงุตููุงุชูุง (props).
ุชุชุบููุฑ ูุงุฌูุงุช ุงูู ุณุชุฎุฏู ุงูุฎุงุตูุฉ ุจุงูุชุทุจูู ู ุน ุงูุฒู ู ุจุงูุทุจุนุ ุณูุชุญุฏูุซ ูู ุงููุณู ุงูุชุงููุ ุญูู ู ูููู ุฌุฏูุฏ ููู ุงูุญุงูุฉ (state). ุญูุซ ุชุณู ุญ ุงูุญุงูุฉ ูู ููููููุงุช React ุจุชุบููุฑ ูุงุชุฌูุง ู ุน ู ุฑูุฑ ุงูุฒู ู ุงุณุชุฌุงุจุฉู ูุชูุงุนู ุงูู ุณุชุฎุฏู ุ ูุงูุฑุฏูุฏ ุงููุงุฏู ุฉ ู ู ุงูุดุจูุฉุ ูุฃู ุดูุก ุขุฎุฑุ ุจุฏูู ุฎุฑู ูุฐู ุงููุงุนุฏุฉ.