{"draftJsState":{"blocks":[{"data":{"image":{"id":"610169dee54c2a602f42bc0c"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"18c1o"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":22,"offset":10}],"inlineStyleRanges":[],"text":"Источник: Nuances of Programming","type":"unstyled","key":"fglfe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что такое ReactJS?","type":"header-two","key":"2sjsp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"ReactJS очень популярный в среде веб-разработчиков инструмент. Что же он собой представляет?","type":"unstyled","key":"3muc2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"ReactJS — библиотека JavaScript, разработанная Facebook для создания пользовательских интерфейсов. С ее помощью разрабатываются высокореактивные и стабильно работающие страницы/веб-сайты. С ней можно забыть о традиционных веб-страницах, вынуждающих вас терять время из-за задержки при переходе на следующую страницу. “Молниеносные” веб-сайты, разработанные с помощью ReactJS, позволяют избежать этого цикла и обновлять контент на той же странице в момент происхождения события.","type":"unstyled","key":"f5hgo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вы скажете: но того же эффекта можно добиться, просто используя JavaScript и HTML (при необходимости CSS). Когда страница загружена, вы можете управлять DOM-деревом с помощью функций JavaScript и изменять содержимое страницы, делая ее интерактивной без необходимости запрашивать новую HTML-страницу. Так зачем же нужен React JS?","type":"unstyled","key":"djmoo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Почему React JS?","type":"header-two","key":"2b828"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вы действительно можете создать одностраничный интерактивный веб-сайт с помощью базового JavaScript, так как в конце концов ReactJS — это JavaScript и XML. Но ваша кодовая база — по мере своего роста — будет становиться все менее понятной и все более сложной для обработки или внесения изменений. Вам придется следовать императивному и постоянно повторяющемуся подходу к созданию интерактивного компонента. Манипулирование элементом в базовом JavaScript осуществляется на глобальном уровне. В результате при разработке новых элементов вы будете влиять на ранее созданные.","type":"unstyled","key":"bhtqu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"React предпочтительнее использовать по следующим причинам:","type":"unstyled","key":"8ijoq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"BOLD"}],"text":"Технология SPA (single-page application, по-русски: “разработка одностраничных приложений”): React поможет вам создать одностраничное приложение. С помощью ReactJS вы сможете изменять (управлять/манипулировать) контент всей страницы с минимальным кодом.","type":"unstyled","key":"lquq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":0,"style":"BOLD"}],"text":"Декларативный подход: React использует декларативный дизайн со всем синтаксическим сахаром, что помогает написать поддерживаемый код высокого уровня. Вам просто нужно определить цель, и React будет обрабатывать инструкции JavaScript DOM с учетом ситуаций, в которых они используются.","type":"unstyled","key":"2clut"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":48,"offset":0,"style":"BOLD"}],"text":"Компонент-управляемый пользовательский интерфейс: React основан на компонентной концепции. Компоненты являются многоразовыми строительными блоками в пользовательском интерфейсе. С помощью ReactJS вы можете создать инкапсулированный компонент, который управляет своими данными, и избежать сценария влияния на другие состояния и действия компонентов в DOM-дереве. Это только одна из характеристик компонент-управляемого интерфейса. Он также помогает повторно использовать код, разделять ответственность и избегать повторения.","type":"unstyled","key":"61jha"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как начать работу с React?","type":"header-two","key":"cogon"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Настройка среды React реально возможна. Все в ReactJS — это JavaScript.","type":"unstyled","key":"u7if"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поговорим о том, как реализовать с нуля проект со всеми библиотеками и разработать полноценное приложение ReactJS. Начните с выполнения следующей команды на своем терминале:","type":"unstyled","key":"ae0b8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"npx create-react-app ","type":"unstyled","key":"hmk1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"После создания проекта с заданным именем перейдите в каталог и запустите сервер:","type":"unstyled","key":"boukk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"cd \n\nnpm start","type":"unstyled","key":"5ttdv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":53,"style":"ITALIC"},{"length":14,"offset":113,"style":"ITALIC"}],"text":"Эта команда запустит сервер, который предоставит вам index.html(присутствует в общедоступном каталоге) по адресу localhost:3000:","type":"unstyled","key":"e4h5v"},{"data":{"image":{"id":"61016b2c334e192000547e4b"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"2fm7n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"npm start запускает не только просмотр и доставку, но и преобразование кода синтаксического сахара JSX (о нем будет речь далее) в исходный JavaScript.","type":"unstyled","key":"2e5kt"},{"data":{"image":{"id":"61016b2ce2aa8a3dae8db4bd"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"8se7h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":1,"offset":179,"style":"BOLD"}],"text":"Структура вашего проекта должна выглядеть так. При запуске npm startпервым исполняется файл index.js. Он манипулирует элементом идентификатора rootв index.html. Это вызывает метод render и заменяет данные контентом, возвращаемым App.js.","type":"unstyled","key":"7u2pn"},{"data":{"image":{"id":"61016b2ce2aa8a3dae8db4bf"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"1relb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":"ReactDOM.render — это метод, который вызывается для отображения React-элемента или DOM-элемента (первый параметр) в качестве дочерней единицы целевого элемента (второй параметр).","type":"unstyled","key":"c8gtl"},{"data":{"image":{"id":"61016b2ce2aa8a3dae8db4c0"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"6rt0v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"BOLD"},{"length":11,"offset":18,"style":"BOLD"}],"text":"App.js возвращает компонент. Компонент — это специальная функция, которая возвращает React-элемент. Возвращаемый HTML-код называется JSX(JavaScript XML). JSX — это синтаксический сахар для React.createElement(component, props, …children)(пока давайте просто скажем, что React.createElement похож на document.createElement и document.appendChild). Вы можете внести изменения в содержимое страницы, изменив файл App.js в src.","type":"unstyled","key":"l97h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Попробуйте внести изменения в этот HTML-код, заменив его приведенным ниже кодом, и сохраните файл, чтобы увидеть изменения на странице:","type":"unstyled","key":"6e9s0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

This is my first App.

","type":"unstyled","key":"6aag2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если хотите двигаться далее, не погружаясь сразу в сложные концепции ReactJS, то для самой базовой настройки вам просто нужно добавить приведенные ниже сценарии в свой index html.","type":"unstyled","key":"6e5oo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"c10gh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Приведенный выше код добавит пакеты reactи react-dom. Они добавляются для использования всех модулей/функций, необходимых для создания приложения React.","type":"unstyled","key":"96lt4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь создадим index.jsи будем манипулировать HTML-содержимым index.html.","type":"unstyled","key":"1ldkk"},{"data":{"image":{"id":"61016b2c31724048ef1b8ae4"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"5ln2j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":69,"style":"BOLD"}],"text":"Это создаст элемент h1с некоторым текстом через React.createElement. React.createElement принимает документы следующим образом:","type":"unstyled","key":"96b87"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"первый аргумент — это тег элемента, переданный в виде строки;","type":"unordered-list-item","key":"c8sh0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":136,"style":"ITALIC"}],"text":"второй аргумент является реквизитом для этого элемента (реквизит — это атрибуты элемента); вы можете передать либо объект с атрибутами (className, style или другим пользовательским атрибутом), либо значение null, если передачи данных не требуется;","type":"unordered-list-item","key":"1s8hg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"последний аргумент — это либо дочерние элементы, либо текст.","type":"unordered-list-item","key":"f4fnu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Приведенный выше код похож на index.js. Он создается с помощью create-react-app, где JSX сначала компилируется в этот фрагмент кода и преобразуется в Javascript при разработке проекта. Стоит заметить, что в какой-то момент вы заметите, что использование React.createElementзатрудняет чтение кода при попытке создать дерево компонентов. Вот пример для новичков:","type":"unstyled","key":"cogp4"},{"data":{"image":{"id":"61016b2c58d3f036d3ffbe2f"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"ebnrp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"JSX — это не что иное, как специальный синтаксис в React (синтаксический сахар для React.createElement), который помогает разработчику писать поддерживаемый и читаемый код, поэтому для изучения концепций ReactJS не обязательно знать JSX заранее, но есть своего рода соглашение о его использовании.","type":"unstyled","key":"2lk06"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Итак, мы закончили создание нашего первого базового приложения с JSX и без него.","type":"unstyled","key":"fnm94"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"},{"length":231,"offset":12,"style":"ITALIC"}],"text":"Примечание: каждый компонент должен начинаться с заглавной буквы. Это помогает React воспринимать элемент, начинающийся со строчной буквы, как элемент DOM, а элемент, начинающийся с заглавной буквы, — как специально определенный элемент React.","type":"unstyled","key":"fgp78"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Читайте также:","type":"unstyled","key":"76cvo"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":30,"offset":0}],"inlineStyleRanges":[],"text":"Почему пора завязывать с React","type":"unordered-list-item","key":"cra3s"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":66,"offset":0}],"inlineStyleRanges":[],"text":"Как с легкостью создавать формы на React с помощью react-hook-form","type":"unordered-list-item","key":"ek9mc"},{"data":{},"depth":0,"entityRanges":[{"key":3,"length":51,"offset":0}],"inlineStyleRanges":[],"text":"6 актуальных советов по созданию чистого кода React","type":"unordered-list-item","key":"364pi"},{"data":{},"depth":0,"entityRanges":[{"key":4,"length":8,"offset":14},{"key":5,"length":2,"offset":24}],"inlineStyleRanges":[],"text":"Читайте нас в Telegram, VK","type":"unstyled","key":"1p9bn"},{"data":{},"depth":0,"entityRanges":[{"key":6,"length":14,"offset":15},{"key":7,"length":44,"offset":31}],"inlineStyleRanges":[{"length":14,"offset":0,"style":"ITALIC"}],"text":"Перевод статьи Neha Sanserwal, ReactJS Introduction. Why and How to Use it.","type":"unstyled","key":"9rnan"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"U4qWLEBVBwS94eJKLn3d"}],"entityMap":{"0":{"data":{"url":"https://nuancesprog.ru/p/13297"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"href":"https://nuancesprog.ru/p/13173/","url":"https://nuancesprog.ru/p/13173/"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"href":"https://nuancesprog.ru/p/13056/","url":"https://nuancesprog.ru/p/13056/"},"mutability":"MUTABLE","type":"LINK"},"3":{"data":{"href":"https://nuancesprog.ru/p/13016/","url":"https://nuancesprog.ru/p/13016/"},"mutability":"MUTABLE","type":"LINK"},"4":{"data":{"href":"https://vk.com/away.php?to=https%3A%2F%2Ft.me%2Fnuancesproghumor&cc_key=","url":"https://vk.com/away.php?to=https%3A%2F%2Ft.me%2Fnuancesproghumor&cc_key="},"mutability":"MUTABLE","type":"LINK"},"5":{"data":{"href":"https://vk.com/nuancesprog","url":"https://vk.com/nuancesprog"},"mutability":"MUTABLE","type":"LINK"},"6":{"data":{"href":"https://neha-sanserwal.medium.com/","url":"https://neha-sanserwal.medium.com/"},"mutability":"MUTABLE","type":"LINK"},"7":{"data":{"href":"https://neha-sanserwal.medium.com/react-js-guide-acf087874f6","url":"https://neha-sanserwal.medium.com/react-js-guide-acf087874f6"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}