{"draftJsState":{"blocks":[{"data":{"image":{"id":"61c23e3d61ecbe266094ca1f"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"4j7bc"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":22,"offset":10}],"inlineStyleRanges":[],"text":"Источник: Nuances of Programming","type":"unstyled","key":"6dkn0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"React — это ведущая технология для разработки первоклассных пользовательских интерфейсов, быстрых, масштабируемых и, главное, многократно используемых. По данным опроса, проведенного StackOverFlow в 2021 году, React является самым востребованным веб-фреймворком. В 2022 году в React-разработчиках будет нуждаться больше компаний, чем когда-либо.","type":"unstyled","key":"7qmqu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что такое React.js?","type":"header-three","key":"agdl7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"React.js — это библиотека JavaScript, созданная компанией Facebook для создания масштабируемых компонентов пользовательского интерфейса. Она может использоваться для разработки одностраничных приложений, мобильных приложений, PWA (прогрессивных веб-приложений). Важнейшим фактором ее популярности является самый доступный в отрасли уровень обучения.","type":"unstyled","key":"fiiet"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В этой статье будет подробно, шаг за шагом, рассказано, как стать разработчиком React.","type":"unstyled","key":"25rcq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Большая часть нереактивного кода, написанного в React, — это JavaScript.","type":"blockquote","key":"4aiap"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Необходимые условия","type":"header-three","key":"736n6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"JavaScript","type":"header-three","key":"eo0m5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поскольку React — это библиотека JavaScript, важно иметь опыт работы с JS и понимание основополагающих концепций этого языка программирования. В настоящее время React состоит из React Hooks (хуков) и функциональных компонентов. Рекомендуется изучить ES6.","type":"unstyled","key":"5tpsp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Концепции JavaScript, которые нужно знать:","type":"unstyled","key":"d79lm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Переменные.","type":"ordered-list-item","key":"b7ecc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Стрелочные функции.","type":"ordered-list-item","key":"79p2a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Типы данных и их методы.","type":"ordered-list-item","key":"effjg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Манипуляции с Dom (document object model, объектная модель документа) и события.","type":"ordered-list-item","key":"7of4n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Функции высшего порядка и функции обратного вызова.","type":"ordered-list-item","key":"2tiip"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Промисы.","type":"ordered-list-item","key":"32jsa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Асинхронный JS.","type":"ordered-list-item","key":"fr5rb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"HTML/CSS","type":"header-three","key":"89k74"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Структурные компоненты в React разрабатываются с использованием HTML и стилизуются с помощью CSS или сторонних инструментов. Предположим, вы создаете компонент кнопки. Этот компонент будет иметь информационную метку, стилевое оформление и определенные атрибуты. Чаще всего для создания этого компонента используется элемент HTML button, который будет стилизован с помощью CSS или любой другой библиотеки стилей.","type":"unstyled","key":"37a4e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Основные концепции React, которые необходимо освоить","type":"header-three","key":"6506j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. Виртуальная Dom-модель и алгоритм Diffing","type":"header-three","key":"4l0is"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Виртуальная модель Dom и алгоритм Diffing — это то, что находится “за кулисами” React.js. Поскольку манипуляции с реальной dom-моделью слишком медленны, в React была использована концепция виртуальной dom-модели.","type":"unstyled","key":"gn9o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Виртуальная dom-модель — это абстракция реальной dom-модели. Каждый раз, когда компонент или элемент отображается, виртуальная dom-модель обновляется. Затем недавно обновленная виртуальная dom-модель сравнивается с копией предварительно обновленной виртуальной dom-модели, в результате чего определяется, какую из них нужно обновить.","type":"unstyled","key":"2aaje"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Процесс сравнения двух виртуальных dom-моделей называется diffing (от differentiation, дифференцирование). На каждом этапе реальная dom-модель заменяется виртуальной dom-моделью, а обновленная виртуальная dom-модель становится предварительно обновленной виртуальной dom-моделью для следующего изменения dom-модели.","type":"unstyled","key":"6b18a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2. JSX: язык шаблонов React","type":"header-three","key":"2p5fk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":61,"style":"BOLD"}],"text":"JSX можно назвать синтаксисом React. Он расшифровывается как JavaScript XML (eXtensible Markup Language, расширяемый язык разметки). JSX помогает писать HTML-код на JavaScript и отображать пользовательский компонент на UI.","type":"unstyled","key":"66r4i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const blog = 'programinja'","type":"unstyled","key":"abu8l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вы можете добавить переменную \"blog\" в элемент \"p\", используя возможности JSX.","type":"unstyled","key":"fgmd8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Blog: {blog}

","type":"unstyled","key":"f3ktf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3. Компоненты: строительные блоки приложений React","type":"header-three","key":"f53th"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Приложение React состоит из компонентов. Все в приложении React — от простой кнопки до сложной диаграммы дашборда — это компоненты. Приведенный ниже фрагмент кода представляет простой компонент React и отображает ссылку в пользовательском интерфейсе.","type":"unstyled","key":"118b8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import React from 'react'\n\nconst SimpleComponent = () => {\n return (\n Google!\n )\n}\n\nexport default SimpleComponent","type":"unstyled","key":"cgv3g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Этот компонент не является многоразовым, так как его метка и URL фиксированы. Чтобы сделать компонент многократно используемым, необходимо применять props (от properties, свойства) — пропсы.","type":"unstyled","key":"f7qau"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"4. Пропсы","type":"header-three","key":"cdc4n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":29,"offset":67,"style":"BOLD"},{"length":25,"offset":176,"style":"BOLD"}],"text":"Пропсы — это объекты-свойства, используемые для передачи данных, доступных только для чтения, между компонентами React. Пропсы могут передаваться как переменные или объекты в однонаправленном потоке.","type":"unstyled","key":"aehnl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"/// simpleComponent.js\n\nimport React from 'react'\n\nconst SimpleComponent = ({ label, url }) => {\n return (\n {url}\n )\n}\n\nexport default SimpleComponent","type":"unstyled","key":"fuh3b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Компонент Link теперь используется многоразово и может быть отображен с различными метками и URL, как показано в следующем фрагменте.","type":"unstyled","key":"70ium"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"/// index.js\n\nimport SimpleComponent from './simpleComponent'\n\nconst App = () => {\n return (\n \n )\n}","type":"unstyled","key":"c0k9i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"5. Управление состоянием","type":"header-three","key":"c0l6a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":69,"style":"BOLD"}],"text":"Говоря простым языком, состояние — это объект JavaScript, хранящий изменяемые данные, которые могут быть использованы и обновлены компонентом. Любое изменение состояния приводит к повторному отображению компонента. Традиционно состояние ассоциируется с компонентами, основанными на классах, однако с помощью хука useState/useReducer им можно управлять в функциональных компонентах.","type":"unstyled","key":"7a0ic"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":77,"style":"BOLD"}],"text":"Управление состоянием может осуществляться на уровне компонента путем вызова хука useState и на глобальном уровне с помощью решений по управлению состоянием, таких как Redux, Context API, Recoil и т. д.","type":"unstyled","key":"eh7no"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"6. Хуки React","type":"header-three","key":"ap2ss"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В 2018 году в React 16.8 появились хуки. Хуки React помогают управлять состояниями и методами жизненного цикла функциональных компонентов, сделав излишними компоненты на основе классов. Хуки можно использовать только в функциональных компонентах и на верхнем уровне.","type":"unstyled","key":"9ja69"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"BOLD"}],"text":"Базовые хуки:","type":"unstyled","key":"h1d4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"useState;","type":"unordered-list-item","key":"cecn0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"useEffect;","type":"unordered-list-item","key":"8hesu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"useContext.","type":"unordered-list-item","key":"f8oj3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":0,"style":"BOLD"}],"text":"Дополнительные хуки:","type":"unstyled","key":"1ild2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"useReducer;","type":"unordered-list-item","key":"920eg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"useCallback;","type":"unordered-list-item","key":"63a45"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"useMemo;","type":"unordered-list-item","key":"ehu1g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"useRef;","type":"unordered-list-item","key":"4rps5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"useImperativeHandle;","type":"unordered-list-item","key":"108jn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"useLayoutEffect;","type":"unordered-list-item","key":"coljn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"useDebugValue.","type":"unordered-list-item","key":"3al6b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import React, { useState } from 'react'\n\nconst App = () => {\n\nconst [sum, setSum] = useState(1) /// Начальное значение суммы равно 1.\n\nreturn (\n <>\n \n \n )\n}\n\nexport default App","type":"unstyled","key":"8l648"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В приведенном выше компоненте управление состоянием осуществляется через хук useState на локальном уровне.","type":"unstyled","key":"fdjcs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"7. Создание собственных пользовательских хуков","type":"header-three","key":"bl6c9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":283,"style":"BOLD"}],"text":"Пользовательские хуки могут быть созданы для совместного многократного использования функциональной логики в нескольких компонентах. Например, можно создать пользовательский хук для определения ширины окна браузера или получения данных из API. Имя пользовательского хука начинается с use.","type":"unstyled","key":"fn0b7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В приведенном ниже примере создан пользовательский хук, который возвращает ширину и высоту окна браузера. Его можно использовать для мобильной отзывчивости и т. д.","type":"unstyled","key":"c9a01"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import { useLayoutEffect, useState } from 'react'\n\nconst useWindowSize = () => {\n\nconst [size, setSize] = useState([0, 0])\n\nuseLayoutEffect(() => {\n\nconst updateSize = () => {\n\nsetSize([window.innerWidth, window.innerHeight])\n\n}\n\nwindow.addEventListener('resize', updateSize)\n\nupdateSize()\n\nreturn () => window.removeEventListener('resize', updateSize)\n\n}, [])\n\nreturn size\n\n}\n\nexport default useWindowSize","type":"unstyled","key":"769ii"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для определения ширины окна и отображения компонентов в настольных или мобильных устройствах (в соответствии с размерами экрана) можно использовать хук useWindowSize.","type":"unstyled","key":"aqklk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const NavBar = () => {\n const [width] = useWindowSize()\n return (\n width > 786 ? : \n )\n}","type":"unstyled","key":"4fer7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Усвоив перечисленные понятия, можете считать себя начинающим разработчиком React. Но есть несколько концепций более высокого уровня, которые необходимо изучить, чтобы выгодно выделяться на фоне коллег-новичков.","type":"unstyled","key":"b49c0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Продвинутые темы React","type":"header-three","key":"5hent"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Компоненты более высокого порядка.","type":"ordered-list-item","key":"5rjht"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Разделение кода.","type":"ordered-list-item","key":"57htm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ссылки.","type":"ordered-list-item","key":"8epef"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Контекстный API.","type":"ordered-list-item","key":"daf9e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рендеринг на стороне сервера.","type":"ordered-list-item","key":"ai1gh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Компонент React Suspense.","type":"ordered-list-item","key":"d6d2n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Компоненты React Server.","type":"ordered-list-item","key":"dc5av"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"После освоения этих концепций у вас будут все основания называться разработчиком React.","type":"unstyled","key":"enc9r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Однако, поскольку React сам по себе является библиотекой, вам придется использовать другие библиотеки и узловые пакеты (например, React Router — для маршрутизации, Redux — для управления состоянием и т. д.), предоставляющие больше функциональных возможностей.","type":"unstyled","key":"d1t8j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Экосистема React","type":"header-three","key":"9sbdb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. React Router/React Router Dom","type":"header-three","key":"dedvb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"React Router — это библиотека маршрутизации для перехода между компонентами React путем изменения URL-адресов. Когда пользователь переходит по URL, React Router определяет, установлен ли компонент для отображения по этому маршрутизатору, и выполняет рендеринг в пользовательском интерфейсе.","type":"unstyled","key":"bq6c3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2. Управление состоянием с помощью сторонних библиотек","type":"header-three","key":"373o6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":248,"style":"BOLD"},{"length":6,"offset":255,"style":"BOLD"},{"length":4,"offset":264,"style":"BOLD"}],"text":"React обеспечивает управление состоянием на уровне компонентов и глобальном уровне с помощью хука useState и Context API. Однако, если приложение очень сложное и требует большей степени контроля, можно использовать сторонние инструменты, такие как Redux, Recoil и Mobx.","type":"unstyled","key":"4vd4p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3. Формы","type":"header-three","key":"fnj9t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":156,"style":"BOLD"},{"length":17,"offset":165,"style":"BOLD"}],"text":"Создание динамических и сложных форм с валидацией и прочими элементами требует использования специальных библиотек. Для разработки форм широко используются Formic и React Hooks Forms. Эти библиотеки легко справляются со всеми аспектами формы. Yup широко используется для добавления валидации.","type":"unstyled","key":"1jvt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"4. Тестирование React","type":"header-three","key":"chqt4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Тестирование React — это концепция проверки компонентов в соответствии с предъявляемыми к ним требованиями. Например, вы создали поле ввода и ожидаете, что оно будет вести себя определенным образом. Тест будет написан с учетом этого сценария использования.","type":"unstyled","key":"fi9ko"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В отличие от ручной проверки, автоматизированное тестирование обеспечивает стабильное функционирование компонентов и позволяет экономить время, а также быстро выявлять ошибки. Для разработчика важно уметь писать тестовые сценарии для созданных им компонентов. Jest, Cypress и React Testing Library широко используются для тестирования приложений React.","type":"unstyled","key":"1tbds"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"5. Стилизация/библиотеки пользовательского интерфейса","type":"header-three","key":"e4c92"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":11,"offset":194},{"key":2,"length":4,"offset":207},{"key":3,"length":9,"offset":213},{"key":4,"length":17,"offset":336},{"key":5,"length":12,"offset":355}],"inlineStyleRanges":[],"text":"Вместо создания компонентов пользовательского интерфейса, таких как Modals, Buttons, Menu, Dropdowns и т. д., можно использовать любую библиотеку пользовательского интерфейса. Базовыми являются Material-UI, Antd, Bootstrap. Кроме того, существует множество библиотек стилей для разработки индивидуального стилевого оформления, например Styled-components, Tailwind CSS.","type":"unstyled","key":"1v0f1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"6. Работа с API","type":"header-three","key":"3tifh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Множество библиотек на базе промисов предлагают отличные решения для работы с Rest и GraphQL API. Axios и Superagent являются популярными для Rest API. Apollo и Relay доминируют в GraphQL.","type":"unstyled","key":"9ms49"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Инструменты, которые нужно изучить","type":"header-three","key":"akijs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"NPM.","type":"ordered-list-item","key":"595qa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Git.","type":"ordered-list-item","key":"e4q1q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Webpack.","type":"ordered-list-item","key":"2h1il"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Heroku/Netlify.","type":"ordered-list-item","key":"3q92j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Firebase/AWS Amplify.","type":"ordered-list-item","key":"f5h2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Проекты для обучения","type":"header-three","key":"enchr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Магазины электронной коммерции.","type":"ordered-list-item","key":"dm7tq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Приложение со списком дел.","type":"ordered-list-item","key":"be1k7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Базовое приложение SaaS (software as a service, программное обеспечение как услуга).","type":"ordered-list-item","key":"36q0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поздравляем! После освоения перечисленных здесь концепций вы сможете освоить React. Начинайте применять полученные навыки и продолжайте учиться.","type":"unstyled","key":"efg3b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Читайте также:","type":"unstyled","key":"7tvum"},{"data":{},"depth":0,"entityRanges":[{"key":6,"length":81,"offset":0}],"inlineStyleRanges":[],"text":"Плюсы и минусы React: виртуальная DOM, синтаксис JSX и другие аргументы для спора","type":"unordered-list-item","key":"brrb8"},{"data":{},"depth":0,"entityRanges":[{"key":7,"length":48,"offset":0}],"inlineStyleRanges":[],"text":"3 простых шага для написания сложных компонентов","type":"unordered-list-item","key":"ris5"},{"data":{},"depth":0,"entityRanges":[{"key":8,"length":52,"offset":0}],"inlineStyleRanges":[],"text":"Введение в фронтэнд и бэкэнд – основы веб-разработки","type":"unordered-list-item","key":"4vntn"},{"data":{},"depth":0,"entityRanges":[{"key":9,"length":8,"offset":14},{"key":10,"length":2,"offset":24}],"inlineStyleRanges":[],"text":"Читайте нас в Telegram, VK","type":"unstyled","key":"bkcj3"},{"data":{},"depth":0,"entityRanges":[{"key":11,"length":8,"offset":15},{"key":12,"length":103,"offset":25}],"inlineStyleRanges":[{"length":14,"offset":0,"style":"ITALIC"}],"text":"Перевод статьи Ali Raza: How to become React developer in 2022? Roadmap / Learning path to land entry-level React developer job.","type":"unstyled","key":"b9n5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"JnK8zSerq2YB97UL0Nk1"}],"entityMap":{"11":{"data":{"href":"https://thealiraza.medium.com/","url":"https://thealiraza.medium.com/"},"mutability":"MUTABLE","type":"LINK"},"12":{"data":{"href":"https://medium.com/programinja/how-to-become-a-react-developer-in-2022-here-is-the-complete-roadmap-faf645d17e11","url":"https://medium.com/programinja/how-to-become-a-react-developer-in-2022-here-is-the-complete-roadmap-faf645d17e11"},"mutability":"MUTABLE","type":"LINK"},"0":{"data":{"url":"https://nuancesprog.ru/p/14812/"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"href":"https://mui.com/","url":"https://mui.com/"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"href":"https://ant.design/","url":"https://ant.design/"},"mutability":"MUTABLE","type":"LINK"},"3":{"data":{"href":"https://react-bootstrap.github.io/","url":"https://react-bootstrap.github.io/"},"mutability":"MUTABLE","type":"LINK"},"4":{"data":{"href":"https://styled-components.com/","url":"https://styled-components.com/"},"mutability":"MUTABLE","type":"LINK"},"5":{"data":{"href":"https://tailwindcss.com/","url":"https://tailwindcss.com/"},"mutability":"MUTABLE","type":"LINK"},"6":{"data":{"href":"https://nuancesprog.ru/p/14500/","url":"https://nuancesprog.ru/p/14500/"},"mutability":"MUTABLE","type":"LINK"},"7":{"data":{"href":"https://nuancesprog.ru/p/1509/","url":"https://nuancesprog.ru/p/1509/"},"mutability":"MUTABLE","type":"LINK"},"8":{"data":{"href":"https://nuancesprog.ru/p/205/","url":"https://nuancesprog.ru/p/205/"},"mutability":"MUTABLE","type":"LINK"},"9":{"data":{"href":"https://t.me/nuancesprog","url":"https://t.me/nuancesprog"},"mutability":"MUTABLE","type":"LINK"},"10":{"data":{"href":"https://vk.com/nuancesprog","url":"https://vk.com/nuancesprog"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}