{"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: 'Salam, **dünya**!'};\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

Daxiletmə

\n \n \n

Nəticə

\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
Salam {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} saniyə
;\n }\n}\n\nroot.render();\n","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

TODO

\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":"Sadə Komponent","domid":"hello-example"},"html":"

React komponenti daxil olan məlumatları qəbul edib nəyi göstəriləcəyini qaytaran, render() funksiyasını tətbiq edir. Bu nümunədə XML-ə oxşayan sintaksis - JSX işlənilir. Daxil olunan məlumat this.props ilə render funksiyasından oxuna bilər.

\n

JSX məcburi deyil və React işlətmək üçün tələb olunmur. JSX kompilyasiyasından yaradılan Javascript kodunu görmək üçün Babel REPL sınayın.

"}},{"node":{"fileAbsolutePath":"/vercel/path0/content/home/examples/a-stateful-component.md","fields":{"slug":"/home/examples/a-stateful-component.html"},"frontmatter":{"title":"Vəziyyətli Komponent","domid":"timer-example"},"html":"

Daxil olunan məlumatdan (this.props ilə oxunur) əlavə, komponent daxili vəziyyət məlumatlarını saxlaya bilər (this.state ilə oxunur). Komponent vəziyyətində dəyişikliklər olduqda, render olunmuş nişan render() funksiyasının çağrılmağı ilə yenilənir.

"}},{"node":{"fileAbsolutePath":"/vercel/path0/content/home/examples/an-application.md","fields":{"slug":"/home/examples/an-application.html"},"frontmatter":{"title":"Bir Applikasiya","domid":"todos-example"},"html":"

Gəlin props və state işlədərək kiçik bir Todo applikasiya yaradaq. Bu nümunədə state ilə cari elementlərin siyayısını, həmçinin istifadəçinin daxil etdiyi mətni izləyir. Hadisə işləyicilərinin sətirdaxili olmağına baxmayaraq, bu işləyicilər toplanır və hadisə deleqasiyası tərəfindən tətbiq edilir.

"}},{"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":"Xarici Pluginlər ilə Komponent","domid":"markdown-example"},"html":"

React sizə digər kitabxana və freymvorklara inteqrasiya etmək üçün metodlar ilə təmin edir. Bu nümunədə remarkable xarici Markdown kitabxanası işlənərək <textarea> elementinin dəyəri markdown-a real zamanda çevrilir.

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

React interaktiv UI yaranmasını çox asanlaşdırır. Applikasiyanızın hər bir halı üçün sadə görünüşlər yaradın. Məlumatlar dəyişən zaman React düzgün komponentləri səmərəli şəkildə dəyişir və render edir.

\n

Deklarativ görünüşlər sizini kodunuzu daha proqnozlaşdırıla bilən və asan dibuq olunan edir.

"}},{"node":{"frontmatter":{"title":"Komponent Əsasında"},"html":"

Öz halını idarə edən inkapsulasiyalı komponentlər düzəldib, sonra komponentləri tərtib edərək kompleks UI yaradın.

\n

Komponent məntiqi şablon əvəzinə JavaScriptdə yazıldığından, siz asanlıqla zəngin məlumatları öz applikasiyanıza göndərərək vəziyyəti DOMdan kənarda saxlaya bilərsiniz.

"}},{"node":{"frontmatter":{"title":"Bir dəfə öyrən, Hər yerdə yaz"},"html":"

Biz, sizin qalan texnologiya stekiniz haqqında heç bir təxmin etmirik. Bu səbədən siz mövcud kodunuzu yenidən yazmadan, yeni xüsusiyyətləri Reactdə yaza bilərsiniz.

\n

React həmçinin Node ilə serverdə render edə və mobil applikasiyaları React Native ilə dəstəkləyə bilər.

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