Hello, world!
React нь хэрэглэгчийн интерактив интерфейс бүтээхийг хялбарчилдаг. Aппликейшны state бүрт зориулсан энгийн бүтэц зохион байгуулахаас гадна, React нь ѳгѳгдѳл ѳѳрчлѳгдѳхѳд яг зѳв компонентоо ѳѳрчлѳн рендер хийдэг.
Declarative бүтэц нь кодыг тань debug хийхэд хялбар болгохоос гадна, ажиллагаа нь илүү тодорхой болох юм.
Бие даан state-ээ удирддаг маш энгийн компонент бичиж, эдгээрийг хольж найруулан нарийн бүтэцтэй хэрэглэгчийн интерфэйс бүтээ.
Компонентийн логик нь тэмплэйт-ээр бус JavaScript-ээр бичигддэг учраас ѳгѳгдлийг апп хооронд хялбар дамжуулж, DOM-оос state-ээ тусд нь байлгаж чадна.
Node ашиглан сервер талдаа React-ыг рендер хийж ашиглаж болдог мѳн гар утасны апп хийх бол React Native ашиглана.
React компонент нь render()
функцыг ашиглан орж ирсэн ѳгѳгдлийг харуулдаг. Энэ жишээ нь XML-адил синтакс болох JSX ашиглаж байна. Конпонентод гаднаас ѳгсѳн ѳгѳгдлийг render()
дотор this.props
ашиглан авдаг.
React-д заавал JSX ашиглах шаардлагагүй бѳгѳѳд Babel REPL ашиглан JSX хѳрвүүлэгдэн Javascript болохыг харж болно.
class HelloMessage extends React.Component {
render() {
return <div>Сайн уу {this.props.name}</div>;
}
}
root.render(<HelloMessage name="Taylor" />);
Гадна талаас(this.props
-оор) ѳгѳгдлийг авахаас гадна, компонент ѳѳрѳѳ доторх ѳгѳгдлѳѳ удирддаг(this.state
ашиглaдаг). Хэрвээ компонентийн доторх ѳѳрийн ѳгѳгдѳл нь ѳѳрчлѳгдвѳл render()
функц дахин дуудагдан рендер хийгдсэн хэсэг шинэчлэгддэг.
class Timer extends React.Component {
constructor(props) {
super(props);
this.state = {seconds: 0};
}
tick() {
this.setState(state => ({
seconds: state.seconds + 1,
}));
}
componentDidMount() {
this.interval = setInterval(() => this.tick(), 1000);
}
componentWillUnmount() {
clearInterval(this.interval);
}
render() {
return <div>Секунд: {this.state.seconds}</div>;
}
}
root.render(<Timer />);
props
болон state
ашиглан жижигхэн жагсаалтын аппликейшн хийе. Энэ жишээ нь state
ашиглан хэрэглэгчийн оруулсан текст болон нийт жагсаалтыг хянадаг. Эвэнт үсрэхэд барьж авах хэсэг элементэд бичигдсэн ч, ажиллах үед тухайн элементээс бус, хуудсаас хайх(event-delegation) болдог.
class TodoApp extends React.Component {
constructor(props) {
super(props);
this.state = {items: [], text: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
render() {
return (
<div>
<h3>Жагсаалт</h3>
<TodoList items={this.state.items} />
<form onSubmit={this.handleSubmit}>
<label htmlFor="new-todo">Юу хийж дуусгах ёстой вэ?</label>
<input
id="new-todo"
onChange={this.handleChange}
value={this.state.text}
/>
<button>Нэмэх #{this.state.items.length + 1}</button>
</form>
</div>
);
}
handleChange(e) {
this.setState({text: e.target.value});
}
handleSubmit(e) {
e.preventDefault();
if (this.state.text.length === 0) {
return;
}
const newItem = {
text: this.state.text,
id: Date.now(),
};
this.setState(state => ({
items: state.items.concat(newItem),
text: '',
}));
}
}
class TodoList extends React.Component {
render() {
return (
<ul>
{this.props.items.map(item => (
<li key={item.id}>{item.text}</li>
))}
</ul>
);
}
}
root.render(<TodoApp />);
React нь бусад сан, фрэймворктой асуудалгүй зохицдог. Энэ жишээ нь remarkable гэх Markdown-ын нэмэлт сан ашиглан <textarea>
-д бичигдсэн зүйлийг шууд хѳрвүүлж байна.
class MarkdownEditor extends React.Component {
constructor(props) {
super(props);
this.md = new Remarkable();
this.handleChange = this.handleChange.bind(this);
this.state = { value: 'Hello, **world**!' };
}
handleChange(e) {
this.setState({ value: e.target.value });
}
getRawMarkup() {
return { __html: this.md.render(this.state.value) };
}
render() {
return (
<div className="MarkdownEditor">
<h3>Оролт</h3>
<label htmlFor="markdown-content">
Markdown бичнэ үү.
</label>
<textarea
id="markdown-content"
onChange={this.handleChange}
defaultValue={this.state.value}
/>
<h3>Гаралт</h3>
<div
className="content"
dangerouslySetInnerHTML={this.getRawMarkup()}
/>
</div>
);
}
}
root.render(<MarkdownEditor />);
Hello, world!