{"componentChunkName":"component---src-pages-index-js","path":"/","result":{"data":{"codeExamples":{"edges":[{"node":{"id":"a-component-using-external-plugins","code":"class MarkdownEditor extends React.Component {\n constructor(props) {\n super(props);\n this.md = new Remarkable();\n this.handleChange = this.handleChange.bind(this);\n this.state = { value: 'Hello, **world**!' };\n }\n\n handleChange(e) {\n this.setState({ value: e.target.value });\n }\n\n getRawMarkup() {\n return { __html: this.md.render(this.state.value) };\n }\n\n render() {\n return (\n
\n

Оролт

\n \n \n

Гаралт

\n \n
\n );\n }\n}\n\nroot.render();\n","mdAbsolutePath":"/vercel/path0/content/home/examples/a-component-using-external-plugins.md"}},{"node":{"id":"a-simple-component","code":"class HelloMessage extends React.Component {\n render() {\n return
Сайн уу {this.props.name}
;\n }\n}\n\nroot.render();\n","mdAbsolutePath":"/vercel/path0/content/home/examples/a-simple-component.md"}},{"node":{"id":"a-stateful-component","code":"class Timer extends React.Component {\n constructor(props) {\n super(props);\n this.state = {seconds: 0};\n }\n\n tick() {\n this.setState(state => ({\n seconds: state.seconds + 1,\n }));\n }\n\n componentDidMount() {\n this.interval = setInterval(() => this.tick(), 1000);\n }\n\n componentWillUnmount() {\n clearInterval(this.interval);\n }\n\n render() {\n return
Секунд: {this.state.seconds}
;\n }\n}\n\nroot.render();","mdAbsolutePath":"/vercel/path0/content/home/examples/a-stateful-component.md"}},{"node":{"id":"an-application","code":"class TodoApp extends React.Component {\n constructor(props) {\n super(props);\n this.state = {items: [], text: ''};\n this.handleChange = this.handleChange.bind(this);\n this.handleSubmit = this.handleSubmit.bind(this);\n }\n\n render() {\n return (\n
\n

Жагсаалт

\n \n
\n \n \n \n \n
\n );\n }\n\n handleChange(e) {\n this.setState({text: e.target.value});\n }\n\n handleSubmit(e) {\n e.preventDefault();\n if (this.state.text.length === 0) {\n return;\n }\n const newItem = {\n text: this.state.text,\n id: Date.now(),\n };\n this.setState(state => ({\n items: state.items.concat(newItem),\n text: '',\n }));\n }\n}\n\nclass TodoList extends React.Component {\n render() {\n return (\n
    \n {this.props.items.map(item => (\n
  • {item.text}
    • \n ))}\n
\n );\n }\n}\n\nroot.render();\n","mdAbsolutePath":"/vercel/path0/content/home/examples/an-application.md"}}]},"examples":{"edges":[{"node":{"fileAbsolutePath":"/vercel/path0/content/home/examples/a-simple-component.md","fields":{"slug":"/home/examples/a-simple-component.html"},"frontmatter":{"title":"Энгийн Компонент","domid":"hello-example"},"html":"

React компонент нь render() функцыг ашиглан орж ирсэн ѳгѳгдлийг харуулдаг. Энэ жишээ нь XML-адил синтакс болох JSX ашиглаж байна. Конпонентод гаднаас ѳгсѳн ѳгѳгдлийг render() дотор this.props ашиглан авдаг.

\n

React-д заавал JSX ашиглах шаардлагагүй бѳгѳѳд Babel REPL ашиглан JSX хѳрвүүлэгдэн Javascript болохыг харж болно.

"}},{"node":{"fileAbsolutePath":"/vercel/path0/content/home/examples/a-stateful-component.md","fields":{"slug":"/home/examples/a-stateful-component.html"},"frontmatter":{"title":"Стейттэй Компонент","domid":"timer-example"},"html":"

Гадна талаас(this.props-оор) ѳгѳгдлийг авахаас гадна, компонент ѳѳрѳѳ доторх ѳгѳгдлѳѳ удирддаг(this.state ашиглaдаг). Хэрвээ компонентийн доторх ѳѳрийн ѳгѳгдѳл нь ѳѳрчлѳгдвѳл render() функц дахин дуудагдан рендер хийгдсэн хэсэг шинэчлэгддэг.

"}},{"node":{"fileAbsolutePath":"/vercel/path0/content/home/examples/an-application.md","fields":{"slug":"/home/examples/an-application.html"},"frontmatter":{"title":"Аппликейшн","domid":"todos-example"},"html":"

props болон state ашиглан жижигхэн жагсаалтын аппликейшн хийе. Энэ жишээ нь state ашиглан хэрэглэгчийн оруулсан текст болон нийт жагсаалтыг хянадаг. Эвэнт үсрэхэд барьж авах хэсэг элементэд бичигдсэн ч, ажиллах үед тухайн элементээс бус, хуудсаас хайх(event-delegation) болдог.

"}},{"node":{"fileAbsolutePath":"/vercel/path0/content/home/examples/a-component-using-external-plugins.md","fields":{"slug":"/home/examples/a-component-using-external-plugins.html"},"frontmatter":{"title":"Нэмэлт ашигласан компонент","domid":"markdown-example"},"html":"

React нь бусад сан, фрэймворктой асуудалгүй зохицдог. Энэ жишээ нь remarkable гэх Markdown-ын нэмэлт сан ашиглан <textarea> -д бичигдсэн зүйлийг шууд хѳрвүүлж байна.

"}}]},"marketing":{"edges":[{"node":{"frontmatter":{"title":"Declarative"},"html":"

React нь хэрэглэгчийн интерактив интерфейс бүтээхийг хялбарчилдаг. Aппликейшны state бүрт зориулсан энгийн бүтэц зохион байгуулахаас гадна, React нь ѳгѳгдѳл ѳѳрчлѳгдѳхѳд яг зѳв компонентоо ѳѳрчлѳн рендер хийдэг.

\n

Declarative бүтэц нь кодыг тань debug хийхэд хялбар болгохоос гадна, ажиллагаа нь илүү тодорхой болох юм.

"}},{"node":{"frontmatter":{"title":"Компонент-д тулгуурласан"},"html":"

Бие даан state-ээ удирддаг маш энгийн компонент бичиж, эдгээрийг хольж найруулан нарийн бүтэцтэй хэрэглэгчийн интерфэйс бүтээ.

\n

Компонентийн логик нь тэмплэйт-ээр бус JavaScript-ээр бичигддэг учраас ѳгѳгдлийг апп хооронд хялбар дамжуулж, DOM-оос state-ээ тусд нь байлгаж чадна.

"}},{"node":{"frontmatter":{"title":"Ганц удаа сур, Хаа сайгүй ашигла"},"html":"

Node ашиглан сервер талдаа React-ыг рендер хийж ашиглаж болдог мѳн гар утасны апп хийх бол React Native ашиглана.

"}}]}},"pageContext":{}},"staticQueryHashes":[]}