{"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);","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":"

React-компоненты реализуют метод 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). Когда данные состояния компонента изменятся, React ещё раз вызовет render() и обновит отрендеренную разметку.

"}},{"node":{"fileAbsolutePath":"/vercel/workpath0/content/home/examples/an-application.md","fields":{"slug":"/home/examples/an-application.html"},"frontmatter":{"title":"Приложение","domid":"todos-example"},"html":"

Используя props и state, можно создать небольшое приложение списка дел. В этом примере используется state для отслеживания текущего списка элементов, а также текста, введённого пользователем. Хотя обработчики событий встроены в разметку, они собираются и реализуются с помощью делегирования событий.

"}},{"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 позволяет работать с другими библиотеками и фреймворками. В этом примере используется внешняя библиотека remarkable, чтобы в режиме реального времени преобразовать 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.js и на мобильных платформах, используя React Native.

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