{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"React - это одна из самых популярных библиотек JavaScript для разработки пользовательских интерфейсов. Созданный компанией Facebook, React предоставляет удобные инструменты для создания динамических и масштабируемых веб-приложений. В этой обширной статье мы рассмотрим основы React, начиная с установки и создания первого компонента, и заканчивая более сложными концепциями, такими как состояние, жизненный цикл компонентов и маршрутизация\\.","type":"unstyled","key":"51j0p"},{"data":{"image":{"id":"663156fa7197fd057a3129c5"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"5ojk3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"28bt5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"BOLD"}],"text":"Введение в React","type":"unstyled","key":"15r1d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"7rrs7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"React - это библиотека JavaScript, которая позволяет разрабатывать пользовательские интерфейсы, разбивая их на компоненты. Одним из ключевых преимуществ React является использование виртуального DOM, который позволяет эффективно обновлять только те части интерфейса, которые изменились, без перерисовки всего дерева DOM.","type":"unstyled","key":"dfk41"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"a3anc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":1,"style":"BOLD"}],"text":" Установка React","type":"unstyled","key":"8l4um"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для начала работы с React необходимо установить Node.js и npm (Node Package Manager). После этого можно создать новый проект React с помощью Create React App, инструмента, который автоматически настроит окружение для разработки React приложения.","type":"unstyled","key":"93c0h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"djrnn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"npx create-react-app my-app","type":"blockquote","key":"5ef6j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"cd my-app","type":"blockquote","key":"9sug5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"npm start","type":"blockquote","key":"b71a2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"fjgti"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"После выполнения этих команд вы сможете запустить свое первое React приложение и увидеть \"Hello, World\\!\" на экране\\.","type":"unstyled","key":"js36"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"1dua4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":0,"style":"BOLD"}],"text":"Создание компонентов","type":"unstyled","key":"5nhq0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"2ikhk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Компоненты являются основными строительными блоками React приложений. Каждый компонент может быть представлен как функциональный или классовый. Функциональные компоненты - это функции, которые возвращают JSX (расширение JavaScript, позволяющее писать HTML внутри JavaScript). Классовые компоненты - это классы, которые наследуются от базового класса React.Component и имеют метод render().","type":"unstyled","key":"ad5lm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"bilhm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// Функциональный компонент","type":"blockquote","key":"34o9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"function Welcome(props) {","type":"blockquote","key":"ff8mm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" return

Hello, {props.name}

;","type":"blockquote","key":"4570e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"93ljh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"33ild"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// Классовый компонент","type":"blockquote","key":"9j41a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"class Welcome extends React.Component {","type":"blockquote","key":"fg7gj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" render() {","type":"blockquote","key":"630pi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" return

Hello, {this.props.name}

;","type":"blockquote","key":"9qch5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"cti7a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"cqabb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":0,"style":"BOLD"}],"text":"Свойства и состояние","type":"unstyled","key":"f4t7l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"5dj85"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Свойства (props) и состояние (state) являются двумя ключевыми концепциями в React. Свойства передаются компоненту как атрибуты и доступны только для чтения, в то время как состояние управляется компонентом и может изменяться с течением времени.","type":"unstyled","key":"1r9f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"bic8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"class Counter extends React.Component {","type":"blockquote","key":"7ln68"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" constructor(props) {","type":"blockquote","key":"a5lgb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" super(props);","type":"blockquote","key":"khj9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" this.state = { count: 0 };","type":"blockquote","key":"cncp2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" }","type":"blockquote","key":"76ji0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"eo39o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" render() {","type":"blockquote","key":"2b3bk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" return (","type":"blockquote","key":"1qo64"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"ee4k1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Count: {this.state.count}

","type":"blockquote","key":"75i92"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"2sopk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"4c7d5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" );","type":"blockquote","key":"3foss"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" }","type":"blockquote","key":"5oe81"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"11q50"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"13vcm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":0,"style":"BOLD"}],"text":"Жизненный цикл компонентов","type":"unstyled","key":"aaqlq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"bqgja"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"React компоненты имеют жизненный цикл, который состоит из различных методов, вызываемых на разных этапах жизни компонента. Некоторые из наиболее используемых методов жизненного цикла:","type":"unstyled","key":"5ras2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"fevq5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"BOLD"}],"text":"componentDidMount(): вызывается после того, как компонент отрисован на странице.","type":"unstyled","key":"1p0on"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":0,"style":"BOLD"}],"text":"componentDidUpdate(): вызывается после обновления состояния или свойств компонента.","type":"unstyled","key":"fte4u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":0,"style":"BOLD"}],"text":"componentWillUnmount(): вызывается перед удалением компонента со страницы.","type":"unstyled","key":"3p4nc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"bm6n4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"class Timer extends React.Component {","type":"blockquote","key":"ul8r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" constructor(props) {","type":"blockquote","key":"916a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" super(props);","type":"blockquote","key":"57gdm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" this.state = { seconds: 0 };","type":"blockquote","key":"e2nhv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" }","type":"blockquote","key":"f88i0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"46jpf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" componentDidMount() {","type":"blockquote","key":"fa7mf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" this.timerID = setInterval(() => this.tick(), 1000);","type":"blockquote","key":"6i62p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" }","type":"blockquote","key":"6nc2u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"a34tm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" componentWillUnmount() {","type":"blockquote","key":"60jng"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" clearInterval(this.timerID);","type":"blockquote","key":"qjn4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" }","type":"blockquote","key":"78mq1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"fs2k2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" tick() {","type":"blockquote","key":"feo2n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" this.setState({ seconds: this.state.seconds + 1 });","type":"blockquote","key":"ef4t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" }","type":"blockquote","key":"6rm4v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"cgtm3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" render() {","type":"blockquote","key":"eqe5u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" return

Seconds: {this.state.seconds}

;","type":"blockquote","key":"jlo8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" }","type":"blockquote","key":"90auc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"3gbk9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"mg6j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"BOLD"}],"text":"Маршрутизация","type":"unstyled","key":"clicb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"8mg76"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Маршрутизация позволяет переходить по различным страницам веб-приложения без перезагрузки страницы. Для реализации маршрутизации в React часто используется библиотека React Router.","type":"unstyled","key":"5me82"},{"data":{"image":{"id":"663156c420437023d83d6ef9"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"6re75"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"9op6b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"npm install react-router-dom","type":"blockquote","key":"efj9u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"8p6vt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"49llh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import { BrowserRouter as Router, Route, Routes, Link } from \"react-router-dom\";","type":"blockquote","key":"937sn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"93n0k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"function App() {","type":"blockquote","key":"2eels"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" return (","type":"blockquote","key":"cucpq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"90f12"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"5vs05"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"ausdb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"5dmld"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Home","type":"blockquote","key":"csaj8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
","type":"blockquote","key":"t77v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" About","type":"blockquote","key":"7819r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"43e2i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"a2vra"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"ei1r1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"a5lhg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"cdhhj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"3etrm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"2gmqe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"99q7b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" );","type":"blockquote","key":"66gpk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"7gj73"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"fmn8p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"Заключение","type":"unstyled","key":"f8bu2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"7j6vb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"React - это мощная библиотека JavaScript, которая делает разработку веб-приложений более простой и эффективной. В этой статье мы рассмотрели основы React, начиная с установки и создания компонентов, и заканчивая более сложными концепциями, такими как состояние, жизненный цикл компонентов и маршрутизация.","type":"unstyled","key":"3fi1d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"a6uc6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Надеемся, что данная статья поможет вам лучше понять основы React и применить их в вашем проекте.","type":"unstyled","key":"bmimm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"6vsp0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":110,"offset":0,"style":"BOLD"}],"text":"Спасибо за просмотр! Ставьте лайки и подписывайтесь на наш блог, чтобы не пропускать новые интересные статьи. ","type":"unstyled","key":"8kl8c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"c5dk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"84f6h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"0llMtnpX2baVzJEf4VeE"}],"entityMap":{}},"mentions":[]}