{"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: 'Привіт, **світе**!' };\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\nReactDOM.render(\n ,\n document.getElementById('markdown-example')\n);\n","mdAbsolutePath":"/vercel/workpath0/content/home/examples/a-component-using-external-plugins.md"}},{"node":{"id":"a-simple-component","code":"class HelloMessage extends React.Component {\n render() {\n return (\n
\n Привіт, {this.props.name}\n
\n );\n }\n}\n\nReactDOM.render(\n ,\n document.getElementById('hello-example'),\n);\n","mdAbsolutePath":"/vercel/workpath0/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 (\n
\n Пройшло секунд: {this.state.seconds}\n
\n );\n }\n}\n\nReactDOM.render(\n ,\n document.getElementById('timer-example')\n);","mdAbsolutePath":"/vercel/workpath0/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\nReactDOM.render(\n ,\n document.getElementById('todos-example')\n);\n","mdAbsolutePath":"/vercel/workpath0/content/home/examples/an-application.md"}}]},"examples":{"edges":[{"node":{"fileAbsolutePath":"/vercel/workpath0/content/home/examples/a-simple-component.md","fields":{"slug":"/home/examples/a-simple-component.html"},"frontmatter":{"title":"Простий компонент","domid":"hello-example"},"html":"

Компоненти реалізують метод render(), який приймає вхідні дані і повертає те, що буде показано користувачу. У цьому прикладі використовується XML-подібний синтаксис під назвою JSX. Доступ до вхідних даних, які передаються в компонент, можна отримати за допомогою render() та this.props.

\n

JSX не є обов’язковим для React. Спробуйте Babel REPL, щоб побачити необроблений код JavaScript, створений на етапі компіляції JSX.

"}},{"node":{"fileAbsolutePath":"/vercel/workpath0/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). Коли дані стану компонента змінюються, відбувається повторне відрендерення розмітки з використанням функції render().

"}},{"node":{"fileAbsolutePath":"/vercel/workpath0/content/home/examples/an-application.md","fields":{"slug":"/home/examples/an-application.html"},"frontmatter":{"title":"Застосування","domid":"todos-example"},"html":"

Використовуючи пропси і стан, ми можемо створити невеликий додаток для складання списку справ. Цей приклад використовує стан для відстеження поточного списку елементів, а також тексту, введеного користувачем. Хоча обробники подій здаються вбудованими, вони будуть зібрані та реалізовані за допомогою методу делегування подій.

"}},{"node":{"fileAbsolutePath":"/vercel/workpath0/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 дозволяє взаємодіяти з іншими бібліотеками та фреймворками. У цьому прикладі використана дивовижна зовнішня бібліотека — Markdown, для зміни значення <textarea> в реальному часі.

"}}]},"marketing":{"edges":[{"node":{"frontmatter":{"title":"Декларативний"},"html":"

React спрощує створення інтерактивних інтерфейсів. Вам потрібно лише описати, як різні частини інтерфейсу виглядають у кожному стані вашого додатку і React ефективно оновить та відрендерить лише потрібні компоненти, коли ваші дані зміняться.

\n

Декларативні інтерфейси роблять ваш код більш передбачуваним і його набагато легше налагоджувати.

"}},{"node":{"frontmatter":{"title":"Заснований на компонентах"},"html":"

Створюйте інкапсульовані компоненти, які керують власним станом, а з них будуйте складні інтерфейси.

\n

Оскільки логіка компонентів написана на JavaScript, замість шаблонів, ви з легкістю можете передавати складні дані у вашому додатку і зберігати стан окремо від DOM.

"}},{"node":{"frontmatter":{"title":"Вивчіть лише раз — пишіть будь-де"},"html":"

Ми не робимо припущень щодо стеку технологій які ви використовуєте, тому ви можете розробляти нові функції в React, не переписуючи існуючий код.

\n

React також може рендеритись на сервері, використовуючи Node, і приводити в дію мобільні додатки, які використовують React Native.

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