React

React.js — это библиотека для языка программирования JavaScript с открытым исходным кодом для разработки пользовательских интерфейсов. Она помогает быстро и легко реализовать реактивность — явление, когда в ответ на изменение одного элемента меняется все остальное.

Освойте профессию «Frontend-разработчик»

У React открытый исходный код и мощное сообщество. Это одна из самых популярных библиотек для веб-разработки.

Кто пользуется React

React применяют фронтенд-разработчики. В модели MVC, название которой расшифровывается как Model-View-Controller, интерфейс — это View, представление, внешнее отображение, с которым взаимодействует пользователь, та часть сайта или приложения, которая видна человеку. Специалисты, которые с ней работают, в частности, используют React.js. Также с React могут работать верстальщики, тестировщики и другие специалисты, задействованные в создании веб-интерфейсов.

Для чего нужен React

React используют для создания одностраничных и многостраничных приложений, разработки крупных сайтов. Например, с его помощью написан стриминговый сервис Netflix и реализованы новостные ленты крупнейших социальных сетей. Библиотека предназначена:

• для создания функциональных интерактивных веб-интерфейсов, работая с которыми, не нужно постоянно обновлять страницу;
• быстрой и удобной реализации отдельных компонентов и страниц целиком — элементы в React легко использовать повторно;
• легкой разработки сложных программных структур — их просто описывать, если использовать реализованный в React подход;
• доработки новой функциональности с любым изначальным стеком технологий: библиотека не зависит от остального инструментария и будет хорошо работать, на чем бы ни был написан код;
• разработки одностраничных и многостраничных приложений (SPA и PWA). Это приложения, которые функционируют как программы и веб-сервисы и имеют соответствующий интерфейс;
• работы с серверной частью сайта или разработки мобильных приложений. В таких случаях React используют совместно с инструментами, адаптирующими веб-технологии под другие цели.

Профессия / 9 месяцев
Frontend-разработчик

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

Особенности библиотеки React

React имеет ряд особенностей, которые делают его гибким и мощным инструментом. Мы разберем некоторые из них.

React не является полноценным фреймворком, являясь библиотекой для создания пользовательских интерфейсов. Важно понимать разницу между фреймворками и библиотеками:

1. Фреймворк — это комплексное решение, которое предоставляет набор инструментов, библиотек и правил для разработки приложений. Фреймворк часто определяет структуру приложения, а разработчику предоставляется меньше свободы в выборе инструментов и архитектурных решений. Примеры фреймворков включают Angular и Ember.
2. Библиотека — это набор функций и компонентов, которые помогают в определенных задачах, но не навязывают общую архитектуру приложения. Разработчик имеет большую свободу выбора остальных инструментов и архитектурных решений. React — это пример библиотеки, которая сосредотачивается на создании пользовательских интерфейсов.

Таким образом, React предоставляет инструменты для создания компонентов пользовательского интерфейса, управления состоянием и взаимодействия с DOM, но не навязывает конкретную архитектуру приложения. Разработчики могут использовать React в комбинации с другими библиотеками и инструментами по своему усмотрению, что делает его гибким и позволяет создавать разнообразные типы веб-приложений.

Декларативность

Декларативный стиль означает, что достаточно один раз описать, как будут выглядеть результаты работы кода — элементы в разных состояниях. Ему не нужно фокусироваться на способах достижения результатов: большую часть задач выполнит библиотека. React.js будет автоматически обновлять элементы в зависимости от условий, главная задача — грамотно описать их. Удобный и понятный подход облегчает написание и отладку кода.

Виртуальное DOM-дерево

Любой веб-интерфейс основан на HTML-документе и CSS-стилях, к которым подключен код на JavaScript. Структура HTML-документа, точнее его модель, называется DOM-деревом (DOM расшифровывается как Document Object Mode, объектная модель документа). Это древовидная модель, в которой в иерархическом виде собраны все используемые на странице элементы.

React включает в себя механизм, который управляет процессом рендеринга компонентов. Рендеринг — это процесс создания визуального представления компонента, которое отображается в браузере или мобильном приложении.

Особенность React в том, что он создает и хранит в кэше виртуальное DOM-дерево — копию DOM, которая изменяется быстрее, чем реальная структура. Это нужно для того, чтобы быстро обновлять страницы. Если пользователь выполнит действие или наступит какое-либо событие, DOM должна измениться, так как изменятся объекты на странице. Но реальная объектная модель может быть огромной, ее обновление — медленный процесс. Поэтому React работает не с ней, а с виртуальной копией в кэше, которая весит меньше.

Когда происходит событие, из-за которого код должен обновить объект, изменение быстро отображается в виртуальном DOM. После этого обновляется реальная объектная модель. Для пользователя это значит, что изменения на странице отобразятся мгновенно, а не после долгой загрузки.

Обновление DOM по частям

Чтобы улучшить быстродействие, React обновляет DOM не полностью. Он хранит в памяти две облегченных копии: актуальную и предыдущую. Когда что-то обновляется, библиотека сравнивает версии между собой и изменяет только ту часть дерева, которая действительно поменялась. Это нужно, чтобы не перезагружать DOM целиком и не замедлять страницу. Подход кажется сложным, но он важен для оптимизации загрузки.

Возможность повторно использовать компоненты

React основан на компонентах — отдельных элементах веб-интерфейса. Компоненты инкапсулированы, то есть самостоятельны: в каждом из них размещены все необходимые методы и данные. Подробнее про инкапсуляцию можно почитать в нашей статье про ООП: это один из ключевых критериев объектно-ориентированного подхода. В случае с компонентами React инкапсуляция также означает, что состояние элемента хранится в нем самом, а не в отдельном объекте.

Инкапсулированные самостоятельные компоненты можно использовать повторно, размещать в другом месте кода, в ином разделе или на другой странице. Данные можно переносить по всему приложению, использовать вне DOM конкретной страницы. Это ускоряет разработку и сокращает количество действий для создания функционирующего интерфейса. Благодаря отсутствию сложных зависимостей инкапсуляция также облегчает отладку.

Станьте Frontend-разработчиком
и создавайте интерфейсы сервисов, которыми пользуются все

Нисходящий поток данных

Компоненты могут передавать свойства и данные друг другу, но только в одном направлении — от «родительских» к дочерним. Это помогает реализовать четкую иерархию, облегчает отладку. Однонаправленный поток данных означает, что программист всегда может понять, откуда именно к элементу поступили данные.

Еще одна особенность потока данных — отсутствие возможности изменять свойства напрямую. Для этого существуют специальные callback-функции. Так называются части исполняемого кода, которые передаются от одного компонента другому в виде параметра функции. Это позволяет поддерживать стабильность: свойства оказываются неизменяемыми после создания, а callback-функция как бы пересоздает их. В результате использования коллбэков поток данных выглядит так: свойства и информация передаются сверху вниз, а события происходят снизу вверх.

Синтаксис JSX

JSX расшифровывается как JavaScript XML. Это расширение языка JavaScript, которое помогает описывать HTML-подобные элементы с помощью кода на React. С помощью синтаксиса на React создают компоненты страницы и гибко управляют ими.

Несмотря на то что элементы похожи на HTML, это по-прежнему язык JavaScript с возможностью быстро и легко изменять DOM с помощью кода. И все же JSX воспроизводится как HTML: по сути разработчик описывает нужный компонент на языке разметки, а тот остается JavaScript-объектом с широкой функциональностью. Это удобно, упрощает программирование, но может запутать начинающих.

React Hooks

В старых версиях управлять состояниями можно было с помощью классов — специальных конструкций, о которых можно подробнее прочесть в статье про ООП. Сейчас в React.js есть поддержка хуков — так называются специальные функции-«крючки», которые «цепляются» за состояние элемента или за метод. Изменение состояния или вызов метода «тащит» за собой эти функции, и они автоматически выполняются — это помогает избежать использования классов, облегчает и упрощает написание кода.

В React есть встроенные хуки, но разработчик может создавать и собственные — это помогает повторно использовать код и уменьшить его количество.

React Developer Tools

Так как React.js — очень популярная технология, его создатели разработали бесплатные расширения для браузера с инструментами для проверки и отладки. Фронтендеры часто пользуются консолью и панелью разработчика в браузере, чтобы проверить, как работает их код. React Developer Tools облегчают задачу и расширяют возможности. Например, можно просматривать прямо в браузере компоненты с большим уровнем вложенности и не искать их в коде долгое время. React Developer Tools существуют для новых версий популярных браузеров Firefox и Google Chrome.

Преимущества React

Популярность

Это один из трех самых распространенных инструментов для фронтенд-разработки. Кроме него, популярны Vue.js и Angular, но первый пока не так распространен, а второй намного сложнее в изучении. Еще одна популярная технология — jQuery, но она постепенно уходит в прошлое. На React написано множество сайтов и приложений. Ее используют такие крупные компании, как Яндекс, Uber, Сбербанк, Авито, BBC, Airbnb, Netflix и другие. Вакансий много, и они высоко оплачиваются даже на начальных уровнях.

Огромное сообщество

Это еще одно следствие популярности: React-разработчиков много, в том числе опытных, многие из них пишут туториалы и статьи, помогают новичкам влиться в процесс разработки. В ходе обучения начинающий всегда может обратиться на тематические ресурсы, где ему постараются помочь. Людей в сообществе хватает, можно получить ответы на большинство вопросов. Документация поддерживается и обновляется, существует в том числе на русском языке.

Развитая экосистема

Создатели React активно побуждали пользователей вкладываться в развитие проекта, и энтузиасты писали свои технологии для совместного использования с библиотекой. В результате сейчас сформировалась целая экосистема: десятки библиотек и других инструментов, которые можно использовать в разработке. Это делает процесс проще и легче, позволяет решать огромное количество задач.

Читайте также Что нужно знать, чтобы начать работать frontend-разработчиком?

Простота создания

С помощью компонентов проекта можно быстро и легко собрать интерактивный, чутко реагирующий на любые изменения интерфейс сайта или приложения любой сложности. Это намного проще, чем прописывать реакции на всевозможные события вручную, и снижает количество ошибок. Так как компоненты можно использовать повторно в любом месте кода, задача становится еще легче. Например, для создания сложного многостраничного сайта или приложения не нужно многократно писать один и тот же компонент.

Реактивность

Это одно из ключевых преимуществ проекта, вынесенное в название. Библиотека реагирует на обновление компонента и автоматически отображает его изменения в дереве документа. Изменения могут происходить в ответ на действия пользователя, какие-то внешние перемены или другие события. В результате сайты и приложения становятся более привлекательными для пользователя.

Эффективность

Благодаря виртуальному DOM библиотека экономит ресурсы. Чтобы изменить состояние элементов, не нужно полностью перезагружать все DOM-дерево, лишний раз тратить трафик пользователя и нагружать браузер. Изменяются только конкретные элементы, это происходит через виртуальное DOM-дерево — сайты и приложения становятся «легче» и удобнее.

Высокая скорость

Сайты и приложения, написанные на React, быстрые и отзывчивые благодаря виртуальному DOM. Дерево занимает меньше места, быстрее обновляется.

Также ускоряется работа программистов. Компоненты легко создавать и переиспользовать, между ними уже продумана логика сообщения. Главная задача — грамотно описать состояния. Не нужно прописывать всю логику и принципы с нуля, это за разработчика уже сделали создатели React.

Удобная отладка

Ошибок с React бывает меньше, чем при написании кода на «чистых» языках без библиотек. Это происходит, потому что многое реализуется автоматически, соответственно, уменьшается влияние «человеческого фактора». Но даже если при разработке программист допустил ошибку, ее довольно легко отследить и исправить благодаря четкой логике потока данных, дополнительным инструментам, понятному синтаксису. Код на React легко читать, понимать и отлаживать.

Недостатки React

Запутанность синтаксиса

Технология JSX удобная и широко используется, но сначала она может вызвать сложности в изучении. Людям непривычно «смешивать» друг с другом HTML и JavaScript, поэтому в синтаксисе легко запутаться и ошибиться. Со временем путаница и ошибки проходят — к этой особенности нужно просто привыкнуть.

Неполное соответствие MVC

React отвечает только за часть View. Поэтому для реализации модели потребуется подбирать стек из разных технологий. React можно использовать практически с любым стеком.

Это одна из причин, по которой React иногда называют библиотекой, а не фреймворком: по одному из определений фреймворк должен позволять полностью реализовать ту или иную модель.

Трудности с SEO-оптимизацией

React-компоненты намного сложнее оптимизировать в рамках SEO. SEO — это поисковая оптимизация, проработка сайта таким образом, чтобы он соответствовал требованиям поисковых систем. Если сайт находится на первой странице поиска по тематическим запросам, его посетят больше пользователей.

Чтобы поисковая система «заметила» сайт, страницы должен проиндексировать поисковый робот. Роботу проще индексировать HTML. React-компоненты, написанные на JavaScript, индексируются тяжелее и медленнее, поэтому страницы сложнее оптимизировать.

Как начать пользоваться React

Для начала новичку нужно на достаточном уровне изучить JS. Кроме «чистого» JavaScript, React поддерживает TypeScript. Но для работы с React знать TypeScript необязательно.

После изучения JavaScript новичок может начинать работу с проектом. У официального сайта есть русская версия, на ней подробно описаны способы, как это можно сделать. Можно воспользоваться онлайн-песочницей или подключить документ с библиотекой к страницам сайта — для тренировки и обучения подойдет любой вариант.

На ранних этапах начинающему разработчику может хватить новых версий документации на русском языке. Чтобы получить полноценную практику и глубоко изучить библиотеку, потребуется помощь наставника.

Frontend-разработчик

Научитесь создавать удобные и эффектные сайты, сервисы и приложения, которые нужны всем. Сегодня профессия на пике актуальности: в России 9000+ вакансий, где требуется знание JavaScript.

Статьи по теме:
Добрые и важные проекты, которые появились благодаря IT
Подробная инструкция с примерами и лайфхаками

Делимся ресурсами для поиска и подборкой возможностей для студентов в IT, которыми можно воспользоваться прямо сейчас

Что такое React.js: для чего нужен, преимущества и недостатки, как работать

React.js — это сторонняя библиотека языка JavaScript, созданная для разработки интерактивных пользовательских интерфейсов. Благодаря этой библиотеке развертывание веб-приложений и интерактивных UI-интерфейсов значительно ускоряется (по сравнению с программированием на «ванильном» JS). Разработчику на React необходимо писать гораздо меньше кода, чем если бы он пытался запрограммировать интерфейс только на стандартном JavaScript. Чтобы задать функциональность компоненту веб-приложения в React — достаточно описать то, как будут выглядеть определённые части интерфейса в различных состояниях. Изменять существующий код, при этом, не обязательно. Кроме того, логика описывается на стандартном JS, а не в шаблонах, поэтому можно передавать любые данные по всему веб-приложению. Если проводить аналогию с реальным миром, то разработку на React.js можно представить как процесс сбора Lego-конструктора — другими словами, вы создаёте компоненты многоразового использования. Такие блоки представляются отдельными, независимыми частями одного большого интерфейса, ну а в собранном состоянии эти блоки образуют весь пользовательский интерфейс веб-приложения целиком.

Простыми словами, React.js — это JS-библиотека для создания функциональности пользовательских интерфейсов

Так выглядит простейший компонент на React

Особенности React.js

Это библиотека для фронтенд-разработки с открытым исходным кодом и компонентной основой. Ключевые особенности React:

• Высокий уровень производительности. Достигается за счет использования виртуального DOM. Подробнее о нем мы скажем чуть ниже.
• Наличие компонентов. Библиотека позволяет разделить страницу на составные части: такие компоненты, как строительные плиты, являются частью одного большого пользовательского интерфейса. При этом, логика таких компонентов написана на JS, что оптимизирует работу программиста, упрощая логику разработки и позволяя использовать компоненты повторно.
• Наличие условных операторов. Это особенность библиотеки сводится к тому, что мы можем писать условные выражения. При этом данные в браузере выводятся в соответствии с условиями, которые указаны в JSX.
• Присутствие виртуального DOM. Document Object Model — это независимый от языка программный интерфейс, который используется для доступа к содержимому HTML- или XML-документа.

Объектная модель документ стандартного HTML

Такой интерфейс разделяет код на модули и только после этого — выполняет его. Чистый (стандартный) JS плох тем, что замедляет веб-приложение: фреймворки JS обновляют DOM целиком, сразу. В результате — приложение тормозится. React же задействует так называемый виртуальный DOM. При каждом изменении приложения сперва будет обновляться виртуальный DOM — он идентифицирует появившиеся различия между реальным Document Object Model и виртуальным Document Object Model. После того как такие отличия обнаружены, виртуальный DOM обновит только ту часть, которая подверглась изменениям, всё остальное останется без изменений. В итоге — приложение работает быстрее, стабильнее и разработчик допускает меньшее количество ошибок.

Объекты в Real DOM обновляются только, когда они обновляются в Virtual DOM

• Наличие расширений. Для создания не только функциональных, но и красивых интерфейсов предусмотрены сторонние расширения: React Native, Flux, React Style Helper, Redux. При этом расширения позволяют развертывать мобильные приложения любой сложности или, например, внедрять серверный рендеринг — для экономии ресурсов
• Возможность одностороннего связывания данных. Эта функция позволяет сохранить высокую скорость программирования и оставить заявленную модульность. Дело в том, что данные в React.js передаются всегда только в «одном направлении» (проще говоря, код «идёт» сверху-вниз. Другими словами — от родителей к дочерним компонентам. Свойства в дочерних элементах не могут вернуть данные в родителя, но, при этом, они могут обмениваться данными с родителями — чтобы менять состояние на основе входных данных. В этом и есть суть одностороннего связывания данных
• Оптимизация и простота. Как мы уже отмечали выше React.js основан на блоках и компонентах, которые можно использовать повторно. Всё это делает написанный код, по сути, многоразовым. Простой для понимания, с элементарной логикой и меньшим количеством символов — вот ещё три важных характеристики React.js.
• Использование расширения синтаксиса JSX. Это расширение, по сути, используют комбинацию синтаксиса языка разметки веб-страницы HTML и языка JS. Если вы знаете оба этих языка — освоить расширенный синтаксис JSX не составит труда. Благодаря нему и происходит встраивание JS-объектов внутрь комментов HTML. При этом важно помнить: ни один браузер не поддерживает JavaScript Syntex Extension, поэтому для его перекомпиляции используется Babel.

Так выглядит JSX-синтаксис, который использует React

Зачем нужен React.js, если есть JavaScript

React — не фреймворк, а сторонняя библиотека. И в этом различии проявляется сила его использования, например, в соединении с другими библиотеками. Фреймворк, в основном, имеет все функции и должен быть написан только одним способом, в то время как библиотеки могут быть использованы в соответствии с потребностями разработчика.

Один из способов добавить React на страницу

Постигая библиотеку React.js вы совершенствуетесь в профессии Fullstack-разработчика. Если вашего текущего стека технологий не хватает для полноценного трудоустройства — обязательно запишитесь на курс full-stack.

За 12 месяцев вы получите всё, что необходимо современному фронт- и бэкенд-разработчику. Кроме необходимых знаний и навыков, сертификата и возможности трудоустройства, вы также приобретете 11 впечатляющих пунктов в своё будущее портфолио. По окончанию курса вы будете безупречно знать HTML и «стили», сможете создать адаптивную вёрстку для любого сайта, изучите не только JavaScript, но и библиотеки React и Vue, Node.js, а также глубоко погрузитесь в PHP.

Лучший способ осознать, почему React.js лучше простого JavaScript — сравнить оба инструмента. Стандартный JavaScript (за рубежом также распространен термин «ванильный») — скриптовый язык, который функционирует без всяких библиотек. Вы можете создавать скрипты на нём без каких-то правил, лимитов и писать его где угодно. Другими словами, у ванильного JavaScript отсутствует структура: вы написали скрипт, попытались открыть его в браузере и он сразу начнёт выполняться сверху вниз, строка за строкой. А вот React.js — имеет структуру и определенные законы, которым подчиняется эта библиотека.

React.js не только обладает корректной структурой, но и описывает, как должны протекать данные, как они должны выполняться (какова последовательность выполнения строк кода). Кроме того, каждый компонент React.js тесно взаимодействует друг с другом, но при этом — остается изолированным от своих соседей.

Давайте рассмотрим отличия между React.js и JavaScript на конкретных сценариях, которые возникают перед веб-разработчиком.

Как сохраняются данные в браузере: JavaScript и React.js

Здесь есть существенные различия. До того как UI-интерфейс попадёт в приложение, он должен сохраниться в браузере. Только так можно быстро вывести необходимые данные, когда пользователь взаимодействует с приложением. Таким образом, после того как начальный UI-интерфейс будет загружен, пользователь уже сможет проводить с ними какие-либо действия.

Давайте взглянем на особенности сохранения данных в браузере при использовании стандартного JavaScript. Данные хранятся в DOM. Это стандартный метод. При этом браузер сам генерирует объектное хранилище и отдаёт необходимые HTML-узлы. Посмотрите на этот пример.

Когда пользователь указывает текст в соответствующее поле, его значение автоматически сохранит браузер:

Пользовательский интерфейс ввода изменяется только по мере того, как пользователь что-то вводит. Взгляните ещё раз на наш пример. Когда пользователь отправляет такую форму, разработчик сможет вручную извлечь значение из текстового поля ввода, поместив его в DOM. Вот код, который позволит решить эту проблему:

const input = document.getElementById("item-input"); console.log(input.value);

И, да — казалось бы, это какая-то мелочь. Для одного ввода это, безусловно, так. Но когда разные входы имеют разные идентификаторы глобально — ситуация превращается в настоящий бич. Именно поэтому, разработчик заранее должен убедиться: изменение в каждом отдельном месте кода происходит эффективно, а каждый ID — изначально идентифицируется корректно.

Переходим к особенностям сохранения данных в браузере для React.js. Эта библиотека использует методологию управляемых компонентов — для установки значения текста в объекте JS, когда пользователь набирает его. Для хранения входного значения — необходимо определить состояние. Представить это в условиях реального кода можно, например, вот так:

const [itemInput, setItemInput] = useState(""); Такую строчку может потребоваться добавлять всякий раз, когда изменяется значение ввода. Стоит признать: код для поля ввода становится более сложным и разрастается. Оцените сами: " onChange=" setItemInput(e.target.value)>. Но есть и жирный плюс: гораздо легче становится узнать текущее значение поля ввода JSt, поскольку он считывает значение из памяти элементарной командой: Console.log(itemInput);

Итак, вы сами можете оценить плюсы, которые даёт React.js при использовании пользовательских данных. В первую очередь — это отсутствие зависимости от объектной модели документа при хранении текущего состояния веб-приложения. И это и есть одна из главных причин, по которым React.js получил такую огромную популярность.

Как создаётся функциональность веб-приложения на JavaScript и React.js

Здесь всё ещё интереснее. В стандартном JS просто отсутствуют требования, распределяющие функциональность веб-приложения. Это означает, что начальный список просто указан в индексе-HTML так, как он должен выводиться на странице. Допустим, вот таким образом:

Казалось бы, такое разделение разметки (HTML-код) и функциональности (JS) должно быть удобным, быстрым и продуманным решением. В теории все так. Но в 2023 году, когда сложность веб-приложений достигла своего пика (и будет расти в дальнейшем), такой подход теряет свою первоначальную актуальность. Ведь разработчику придётся учитывать сразу два кода, и это действительно снизит скорость программирования. И сейчас мы увидим как элегантно и просто эту проблему решает библиотека React.js:

Таким образом, мы видим не только исходный код, но и то, что было обновлено. Это очень удобно и экономит немало времени, оптимизируя создание сложных веб-приложений.

Как создаётся UI интерфейс на JavaScript и React.js

В простом JavaScript UI-интерфейс разрабатывается в HTML-документе на серверной стороне, затем он попадает в браузер. Документ на этом этапе может выглядеть следующим образом:

Примерно такой код отправляется в браузер. При этом, на протяжении всего процесса, JavaScript вообще не понадобится.

А вот React.js начинает взаимодействие с UI с непосредственного, зафиксированного HTML-файла:

 Опа! А здесь пусто. Так как же React.js генерирует пользовательский интерфейс? 

Пользовательский интерфейс определяется элементом, который будет возвращать JSX (обратите внимание, что он очень похож на HTML-код, но им не является). На самом деле — это полноценный скрипт, написанный на JS:

Согласитесь, выглядит это гораздо приятнее и чище, чем перегруженный уже на старте ванильный JavaScript. Какие различия мы наблюдаем здесь? Самое главное: React.js без посредников идентифицирует UI-интерфейс в браузере (вместо того, чтобы определять его на серверной стороне, как это делает JS). Таким образом, уже на старте веб-приложение начинает строится с пустого контейнера, после — в него попадает UI-интерфейс. Далее — наш компонент «Ассортимент» выводится в div-контейнере через ReactDOM-библиотеку. Например, вот таким вот образом:

, , , document.getElementById("root") )

В стандартном JavaScript результаты будут выведены в браузер только после непосредственной генерации UI-интерфейса на серверной стороне. React.ks и здесь ведет себя по-другому: результаты будут выведены сразу в браузере.

Как обновляется UI-интерфейс JavaScript и React.js

Мы плавно подходим к последнему отличию стандартного JavaScript и библиотеки React.js. Заключается оно в том, как приложение реагирует на взаимодействие с пользователем: от клика по кнопке для добавления нового элемента, до обновления UI интерфейса, отражающего изменения.

Фактический клик по кнопке может быть запрограммирован непосредственно в коде. Это означает, что обработчик клика вообще не понадобится. Следующий код можно использовать для добавления атрибута onClick к самой кнопке:

>Add React

И все, что должна сделать эта функция — добавить новый элемент (который хранится в памяти JS) в существующий массив элементов, используя функцию setItems:

Добавьте эту строку

React автоматически зарегистрирует, что в списке произошло изменение, и самостоятельно обновит пользовательский интерфейс. Эта функция обновления — подлинная магия React. Она берет функцию из обычного JS и сжимает ее до одной единственной директивы. Давайте посмотрим на код:

function addItem()

Вывод в JavaScript и React.js

И не забывайте о том, что вывод в React.js всегда отдается в JSX. Давайте посмотрим на разницу между JavaScript и React.

Напишем HTML с помощью JSX:

const myelement = 
Привет Мир!
; ReactDOM.render(myelement, document.getElementById('root'))

Создадим HTML без использования JSX:

const myelement = React.createElement('h1', <>, 'Я не использую JSX!'); ReactDOM.render(myelement, document.getElementById('root'));

Популярность React.js в 2023 году

Измерять популярность изолированно — неблагодарное занятие. И мы решили сравнить популярность React.js с одним из главных конкурентов — Angular, платформой для создания веб-приложений на ЯП TypeScript. Профильный ресурс для разработчиков Stack Overflow год назад провел опрос: согласно нему React был самым первым по популярности веб-фреймворком во всем мире. Но в 2022 году, по данным Statista, React обогнал Node.js: 47,12 % веб-разработчиков используют этот фреймворк против 42,62 % пользователей React.

Популярность библиотеки в России стабильно росла начиная с 2015 года

По прогнозам профильных специалистов, React будет лидировать и в будущем: в настоящее время на этой библиотеке работает более 1 200 000 сайтов, а количество открытых вакансий для программистов на React — увеличилось на 184% в период после выхода COVID (данные по США и Европе).

Использование библиотеки React на сайтах

Анализируя рынок вакансий для технологий React и Angular за последние три года, можно заметить — технология более востребована во всем мире среди компаний из США, Англии, Канады, Китая, Японии, Германии, Франции, Индии, Австралии, Бразилии.

Интерес к React.js не угасает: бизнес продолжает инвестировать в развитие этого фреймворка и вспомогательных ресурсов.

В декабре 2020 года Vercel инвестировала около 40 миллионов долларов в развитие React.

На данный момент React имеет конкурентное преимущество перед другими популярными фреймворками (Angular или Vue.js). Ожидается, что спрос на React будет еще более высоким глобально.

Плюсы и минусы

Приложения React создаются с использованием компонентов; эти компоненты являются многоразовыми, то есть нет необходимости переписывать код для каких-то конкретных вещей. Раньше многие блоки, такие как навигационная панель, нижний колонтитул или статусная строка, нужно было добавлять на разные страницы. Используя компоненты, мы можем просто написать их один раз и использовать в любом месте.

Плюсы использования React

Но компонентность — не единственное преимущество. Вот другие плюсы React:

• Огромное сообщество. React имеет огромную поддержку среди разработчиков и широчайшее сообщество. Многие разработчики-любители и профессионалы помогают решить их проблемы. Вы можете решить любую проблему в своем приложении, просто погуглив ее в интернете. С нестандартными случаями — поможет сообщество.
• Легкость в освоении: поначалу React, конечно, кажется сложным. Но после того, как вы поймете основные компоненты и их работу — кодинг пойдет как по маслу. С помощью простых функций можно разрабатывать очень сложные приложения. Вы должны помнить: как технология React прост в изучении, но сложен в освоении.
• React Native. Большинство веб-приложений также нуждается в версии для мобильных устройств. И если вы сталкивались с мобильной разработкой, то наверняка знаете как непросто сделать мобильное приложение для двух разных архитектур: Android и iOS. Но эту проблему можно решить, изучив React, ведь в нем существует так называемый React Native, который упрощает оптимизирует развертывание мобильных приложений для Android и iOS. При этом подход использует те же методологии, что и сам React. Поэтому — изучение React также поможет стать мобильным разработчиком.
• Широкая масштабируемость и гибкость. React можно использовать со многими другими библиотеками, которые обеспечивают широкий спектр функциональности, инструментов и возможностей.

Эти красавцы используют React

Недостатки использования React

Без минусов — никуда. Вот основные недостатки библиотеки:

• Сложность обучения. Можно сказать, что у этой библиотеки крутая кривая обучения. Как уже говорилось ранее, изучить React может быть легко, но вот освоить его разносторонне — очень сложно. На обучение может потребоваться много времени и практики. Особенно, если вы никогда не работали с JavaScript.
• Библиотека фронтенда. React — только фронтенд-технология и для работы в бэкенде вам нужно изучить другие инструменты (например, Express или Next.js). React можно использовать, если нужно развернуть одностраничное или статичное приложение.
• Не SEO-friendly из коробки. Это одна из основных проблем библиотеки. Веб-приложения на React.js имеют ограничения для SEO. Это можно понять на простом примере: вы отправляете кому-то ссылку на сайт, когда вы отправляете ссылку — с ней передается небольшое изображение и описание. Но у сайтов на React (или других веб-приложений) ситуация иная: весь JavaScript должен быть обработан, прежде чем вышеуказанные данные смогут быть переданы. Таким образом, краулеры поисковых систем также не смогут прочитать нужные им данные о сайте (и это может снизить рейтинг домена в поиске). Эту проблему можно решить с помощью Next.js, который задействует серверный рендер.
• Частые изменения. Над ошибками и проблемами React постоянно работают его создатели. Это также означает, что за небольшой промежуток времени может быть выпущено значительное количество обновлений. Например, недавно было опубликовано обновление ES6. И фактически оно поменяло привычные паттерны разработки React. Так что придется постоянно оставаться в курсе и менять приложение в соответствии с обновлениями библиотеки.

Как работать с React.js: создаем первую программу на React.js

Чтобы лучше усвоить основы React.js — давайте напишем маленькое приложение на JavaScript с использованием библиотеки React. Даем пошаговую инструкцию ниже.

Для создания приложения выполните следующие шаги:

Шаг 1: Начните с простой команды создания приложения:

npx create-react-app foldername

Шаг 2: Измените каталог на только что созданную папку.

cd foldername

Структура проекта: Создается структура проекта по такой схеме:

• public (папка)
• src (папка)
  • App.js
  • FailMessage.js
  • PassMessage.js
  • index.js
  • style.css

  Шаг 3: Теперь создайте новый файл PassMessage.js (не забудьте, что он должен быть размещен в папке src). Внутрь файла добавьте такой код:

  import React from 'react' import App from './App'; function PassMessage() < return ( 
   
  >>Поздравляем! Вы успешно прошли тест.
   
   ) > export default PassMessage

  Шаг 4: Теперь создайте еще один файл FailMessage.js (он также должен находиться в папке src, как и предыдущий файл). Внутрь файла добавьте такой код:

  import React from 'react' import App from './App' function FailMessage() < return ( 
   
  >>Вы не прошли тест. Повезет в следующий раз!
   
   ) > export default FailMessage

  Шаг 5: Добавьте следующий код внутрь файла App.js:

  import PassMessage from './PassMessage'; import FailMessage from './FailMessage'; function App(props) < const isPass = props.isPass; if (isPass) < return ; > return ; >; export default App;

  Шаг 6: Добавьте следующий код внутрь файла index.js.

  import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import FailMessage from './FailMessage'; import PassMessage from './PassMessage'; ReactDOM.render( />, document.getElementById('root')); 

  Шаг 7: откройте терминал и введите следующую команду:

  npm start

  Попробуйте провзаимодействовать с программой. У нас всего два значения: isPass= и isPass=.

  Вам мало? Обязательно обратите внимание на наш бесплатный видеокурс React I от Loftschool. В нём вы найдёте все основы, которые необходимы для построения базы по React.js. За несколько часов вы разберетесь в следующих моментах:

  1. Что такое React.
  2. Virtual DOM.
  3. JSX.
  4. Рендеринг с условиями.
  5. Работа со списками.
  6. Компоненты.
  7. Props.
  8. State.
  9. События.
  10. React Devtools.

  Заключение

  Если вы хотите изучить React.js всесторонне и с максимальной эффективностью, обязательно обратите внимание на наш курс React разработчика в LoftSchool.

  

  Программа курса (1-я и 2-я недели)

  При помощи этого курса вы научитесь разрабатывать веб-приложения на React, оптимизировать их, разделять работу с данными, управлять потоками данных и заниматься тестированием приложений. Кроме того, вы познакомитесь с дополнительными инструментами для React.js, которые сделают разработку быстрой, эффективной и максимально простой. Курс предназначен для разработчиков с опытом от 1 года, либо тех, кто уже успешно прошел курс Комплексное обучение JavaScript.

  Напоследок — даем 9 причин выбрать React.js в 2023 году.

  Причина 1. Доступ к обширной базе данных JS: она насчитывает миллионы разработчиков, которые могут получить помощь от различных сообществ, таких как:

  • Профильные сайты (форумы, блоги).
  • React в Twitter (@reactjs).
  • Reddit’s React community.
  • Профильные справочные платформы.
  • Stack Overflow.
  • DEV’s React community.
  • Официальный раздел блога React на сайте компании-разработчика.

  Кроме того, библиотека React является домом для тысячи элементов и компонентов веб-дизайна (кнопок, сеток, ярлыков, иных элементов с функциями), которые разработчики могут использовать повторно по своему усмотрению.

  Причина 2. Помогает разработать зрелый, быстрый и простой для понимания рабочий процесс. Библиотека предлагает оптимизированный интерфейс разработки и отлаженный годами синтаксис. Все перечисленное — ключевое преимущество React. Использование Virtual DOM повышает скорость работы веб-приложений, а API React почти ничего не весит, но гарантирует высокую производительность. Согласно тесту Google Lighthouse, React набирает 82 балла (из 100) по производительности.

  Причина 3. Предлагает многоцелевую, чистую архитектуру, которая окупается в долгосрочной перспективе. Мы уже говорили выше, что React — один из лучших кандидатов для развертывания масштабных веб-приложений (благодаря JSX, который позволяет использовать всю мощь JavaScript). Кроме того, можно задействовать React Native, который дает нативный внешний вид и возможность использования нестандартных модулей.

  Причина 4. Стабильный фронтенд-фреймворк. Поскольку эту библиотеку используют многие технологические гиганты (например, запрещенная соцсеть) безопасность и стабильность ее будет расти. Веб-разработка на React будет получать долгосрочную поддержку от всех, кто так или иначе использует эту библиотеку. Все это обеспечивает React заслуженное третьем место в рейтинге лучших кроссплатформенных библиотек по версии Stack Overflow 2022.

  Причина 5. Подход React, ориентированный на сообщество. React может похвастаться впечатляющим сообществом из более чем 15 тысяч участников, поскольку он работает под лицензией MIT и является open-source фреймворком. Разработчики самого разного уровня регулярно поддерживают библиотеку. Независимо от того, хотите ли вы создавать многостраничные или одностраничные веб-приложения, сообщество React всегда готово прийти на помощь.

  Причина 6. Предлагает многократно используемые компоненты. React использует разработку по блокам (компонентный подход). Такие блоки UI-интерфейса (например, выпадающий список, лента комментариев, окно чата) сосуществуют в одном пространстве и могут эффективно и свободно взаимодействовать друг с другом. Разработчики могут создавать автономные, многократно используемые компоненты. Это экономит время и силы разработчика.

  Причина 7. Позволяет создавать сложные приложения за меньшее время. Если существует бизнес-потребность в создании более сложного приложения с привлекательным пользовательским интерфейсом, то React точно решит эту проблему (пусть не в одиночку). Благодаря изоморфной «природе» кода, веб-приложение может быть развернуто быстрее (за счет кода JavaScript, который используется и во фронт- и бэкенде).

  Причина 8. Обеспечивает бесшовную, гибкую и совместимую веб-разработку, благодаря тесной связи с JS. Компоненты и концепции React легче изучить и реализовать (в отличие от других фреймворков). Тем не менее, разработчику необходимо иметь базовые знания CSS, HTML и, прежде всего, JavaScript. Имея хорошее базовое понимание React, разработчик может писать чистый и более читабельный код. Кроме того, он может повторно использовать свои знания об одной технологии на различных платформах, что обеспечивает максимальную гибкость и совместимость.

  Причина 9. Широко используется: в опросе Stack Overflow говорится: «Node.js и React.js — две наиболее распространенные веб-технологии, используемые профессиональными разработчиками и теми, кто учится программировать».

  React.js Разработка веб-приложений

  Курс рассчитан на веб-разработчиков с опытом от 1 года или на тех, кто уже прошел наш курс «Комплексное обучение JavaScript»

  React.js

  Устройте конкурс между агентствами и узнайте реальные цены и сроки выполнения вашего проекта. Создание заказа занимает 5 минут.

  Об инструменте

  Что такое React.js

  React.js – бесплатная библиотека для фронтенд-разработки, которая написана на JavaScript. По данным опроса Stack Overflow за 2021 год, эту библиотеку чаще всего используют при создании новых проектов. Среди 67593 опрошенных программистов, более 40% используют React.js, на втором месте – более ранняя jQuery с 34%. React.js – разработка Facebook. Корпорация применяет библиотеку в своих проектах и активно развивает ее.

  Подобно главным конкурентам – фреймворкам Vue.js и Angular, React.js применяет декларативный подход к написанию кода, в отличие от императивного чистого JavaScript. Если декларативный подход – указание «что сделать», то императивный подход – указание «как сделать». Императивный подход требует написания большего количества кода, поэтому все фронтенд-разработчики используют те или иные библиотеки.

  React.js использует технологию React Virtual DOM, которая позволяет влиять на отдельные элементы DOM – структурированного представления HTML-документа вместе с CSS. Такой подход позволяет влиять только на те элементы DOM, которые будут динамически изменяться, благодаря чему, библиотека меньше нагружает производительность сайта. Позже подобный подход начала использовать Vue.js.

  В библиотеке используется JSX – эдакая смесь JavaScript и HTML, которая позволяет воздействовать на компоненты, работая одновременно со структурой веб-страницы и динамическими функциями в одной наглядной модели. JSX конвертируется в JavaScript с помощью компилятора Babel. Такой подход обеспечивает доступ к более низкоуровневой оптимизации пользовательского интерфейса.

  Сферы применения React.js

  Данная библиотека используется исключительно во фронтенд-разработке сайтов. Для разработки мобильных приложений, у Facebook есть другая технология – React Native. В отличие от React.js, React Native – не библиотека, а кроссплатформенный фреймворк. React Native работает не с Virtual DOM, а с элементами пользовательского интерфейса приложения. Зная React, разработчику будет легко начать работать с React Native, поскольку у этих технологий очень похожий синтаксис.

  Преимущества разработки на React.js

  • большое количество разработчиков на React;
  • низкоуровневость библиотеки в сравнении с фреймворками позволяет более глубоко оптимизировать фронтенд;
  • реализация JSX связывает HTML и JavaScript, делая рабочий код более простым и понятным;
  • JSX позволяет легче находить ошибки благодаря своей структуре;
  • технология Virtual DOM позволяет применять библиотеку только к динамически изменяемым элементам;
  • большое количество расширений в свободном доступе, можно облегчить работу, используя чужие наработки;
  • поддержка и развитие сотрудниками Facebook.

  Недостатки разработки на React.js

  • довольно часто при обновлении библиотеки приходится переписывать часть кода;
  • меньше подходит к небольшим проектам в сравнении с Vue.js;
  • неопытный разработчик может работать неэффективно в React, формируя сложный код из-за большой свободы действий в библиотеке.

  Примеры готовых работ на React.js

  • Социальные сети – facebook.com, instagram.com.
  • Сайт «Нетфликс» – netflix.com.
  • Сайт «Нью Йорк Таймс» – nytimes.com.

  Зачем фронтендерам React, если есть JavaScript

  Сайты на чистом JavaScript давно стали редкостью: обычно при разработке используют библиотеки и фреймворки. Одна из самых популярных библиотек — React. В этой статье мы познакомимся с её основными принципами и идеями. Мы расскажем, что из себя представляет React, какие у него преимущества в сравнении с другими инструментами и как работать с React-компонентами.

  Зачем нужны реактивные фреймворки и библиотеки?

  Современные сайты отличаются от тех, которыми мы пользовались раньше: они более динамичны. С их помощью можно покупать товары, общаться с друзьями или писать комментарии.

  Изменилась и структура сайтов. Изначально они состояли из набора отдельных HTML-страниц. Сейчас они представляют собой один HTML-документ, внешний вид которого меняется динамически через JavaScript.

  Такой подход получил название SPA — single-page application, или одностраничное приложение. SPA делает сайты полноценными приложениями, которые не перезагружаются между переходами по страницам. Чтобы выполнить переход, нужно полностью перерисовать контент документа с помощью JavaScript и полученных данных.

  Хотя требования к интерактивности сайтов выросли, инструменты для её создания почти не изменились. Работа с DOM по-прежнему остаётся императивной, «из коробки», и выглядит примерно так:

  Привет, Мир. Меня зовут .
   function setName(name) < const nameWrapper = document.querySelector(".js-name"); if (nameWrapper) < nameWrapper.textContent = name; >> setName("Вася"); 

  Этот код может показаться неплохим, если нужно добавить имя пользователя в строку приветствия или создать слайдер. Но предположим, мы делаем SPA-приложение с такой корзиной:

  

  И эту корзину нужно перерисовать в страницу оформления заказа:

  

  В этом случае решение задачи «в лоб» будет невероятно трудоёмким. Придётся написать тысячи строк кода взаимодействия с DOM API — такой код будет сложно читать и поддерживать. Использование библиотеки наподобие jQuery лишь поменяет интерфейс взаимодействия с DOM, но не решит проблему.

  Можно написать свою реализацию MV* паттерна и настроить связывание данных, построив свою систему рендеринга. Но такие решения сложно реализовать быстро и качественно, а новым членам команды разработки будет непросто разобраться в чужих паттернах.

  Подобные сложности привели к созданию реактивных фреймворков и библиотек. Идея реактивности такова: вместо того, чтобы каждый раз вручную в коде в императивном виде менять интерфейс приложения, гораздо удобнее изначально в декларативном виде задать связь между данными и их отображением и в дальнейшем в коде менять только данные. Интерфейс будет перерисовываться автоматически под новые данные.

  То есть реактивный подход подразумевает работу с данными, при изменении которых автоматически меняются и другие части программы, в том числе интерфейс. React стал одной из первых и самой популярной на начало 2022 года реактивной библиотекой для работы с интерфейсами.

  �� Начните кодить на React

  Научитесь собирать интерфейсы в экосистеме React с нуля и создавать интерактивные React-компоненты.

  Что такое React?

  React — это декларативная JavaScript-библиотека для создания пользовательских интерфейсов. Она позволяет собирать сложный UI из маленьких изолированных кусочков кода, называемых «компонентами».

  React предоставляет два синтаксиса для создания компонентов: классовый и функциональный. Классовый используется редко, так как синтаксис классов часто излишен для описания компонентов. Поэтому в статье мы будем рассматривать функциональные компоненты.

  Функциональный компонент в React — это JavaScript-функция, которая на входе получает объект с данными для отрисовки компонента — их называют props, а на выходе возвращает описание интерфейса, который нужно отобразить.

  Пример с приветствием пользователя на React может выглядеть так:

  import React from "react"; function HelloWorld (props) < return (Привет, Мир. Меня зовут ); > export default HelloWorld; 

  В этом коде легко разобраться, даже если вы не знаете синтаксиса React. Здесь в виде функции описан React-компонент HelloWorld. На входе он получает объект с данными, props, который содержит свойство name c именем пользователя. Функция возвращает специальный код, похожий на HTML-разметку. Подробнее о нём расскажем позже, а сейчас лишь важно понимать, что этот код работает. React действительно отобразит на странице DOM-дерево — оно будет соответствовать разметке, которую вернуло HelloWorld. Но в отличие от обычного HTML, мы смогли подставить в разметку данные из объекта props , тем самым шаблонизировав её.

  Код на React выглядит легче и лаконичнее решения на чистом JS. Мы не описываем, как перерисовывать интерфейс. Вместо этого мы указываем, что нужно отобразить на месте компонента, и используем для этого синтаксис, похожий на HTML. Такой подход позволяет относительно легко решать и более сложные задачи. Например, перерисовать разметку страницы корзины и отобразить на её месте интерфейс страницы заказа.

  Для своих перерисовок React использует Virtual DOM. Это позволяет обновлять только изменившиеся узлы DOM-дерева, а не перерисовывать всю страницу. Благодаря этому приложения не расходуют лишние ресурсы.

  React решает проблемы фронтендеров при разработке интерфейсов динамичных сайтов и SPA-приложений. При использовании классической связки JavaScript и HTML перерисовка интерфейса сильно усложняется. React же не ограничивает возможности разработчика, в отличие от любых фреймворков.

  Востребован ли React на рынке фронтенд-разработки? Сравнение с Angular и Vue

  Проекты на чистом JavaScript стали экзотикой — чаще разработчики используют реактивные библиотеки и фреймворки: React, Vue или Angular. Трудно понять, какой фреймворк лучше и удобнее — разработчики постоянно спорят и не могут прийти к компромиссу.

  На наш взгляд, современные библиотеки и фреймворки похожи друг на друга — каждый из них имеет свои преимущества и недостатки, но в целом они одинаково эффективны. Статьи про сравнение инструментов часто бывают необъективными, так как разработчики полагаются на личные предпочтения. Например, если команда целый год переписывала сайт с Vue на React, то её члены скажут, что React лучше, и наоборот. Поэтому не стоит тратить время на сравнение разных реактивных фреймворков и библиотек. Вместо этого лучше изучить как минимум один из них.

  И всё же одно преимущество у React есть — React-разработчиков чаще нанимают. Вот сравнение количества вакансий по React, Angular и Vue на hh.ru:

  

  Количество вакансий для фронтендеров с опытом работы 1-3 года

  Компании ищут React-разработчиков в два раза чаще, чем разработчиков на Vue или Angular.

  Если сравнивать количество загрузок npm-пакетов, то и здесь React превосходит фреймворки. По данным npm trends за последний год, среднее ежемесячное число загрузок пакета React — 11 млн, Angular и Vue — около 2,8 млн.

  

  Хотя формально их вообще нельзя сравнивать, так как React — библиотека, а Vue и Angular — фреймворки. Однако из-за различных переходных вариаций, таких как «прогрессивный фреймворк», и других особенностей различий между библиотеками и фреймворками во фронтенде почти нет.

  Типовые задачи React-разработчика

  Типовые задачи разработчика состоят в написании React-компонентов. Далее из таких компонентов строятся страницы сайта.

  Реактивные фреймворки — это программирование на основе работы с данными, поэтому важно знать тип данных, который приходит в компоненты. Так как JavaScript не позволяет явно описывать типы данных, React-разработчики обычно используют в проектах TypeScript.

  React отвечает только за отображение интерфейса. Поэтому вокруг него есть целая экосистема инструментов, решающих остальные задачи фронтенд-разработки:

  Управление состоянием — библиотеки для работы с глобальными данными приложения, которые не относятся к конкретному компоненту, а нужны во многих частях сайта. Среди популярных инструментов для управления состоянием можно выделить Redux и Mobx.

  Роутинг. SPA подразумевает переход между страницами сайта без дополнительных запросов к серверу. Поэтому задачами роутинга, соответствия страниц определённым URL, тоже занимаются фронтендеры. Для таких задач существует ряд популярных библиотек, в частности, React Router.

  Серверный рендеринг. Одна из проблем SPA — многие поисковики ожидают HTML, а не JavaScript. Поэтому важно отдавать на запросы поисковиков не пустой HTML-файл, на котором JavaScript «рисует» интерфейс, а готовую HTML-разметку. Чтобы её генерировать из компонентов, разработан фреймворк Next.js.

  Создание UI-элементов. Типовые UI-элементы обычно не пишут с нуля — для них используют готовые UI-библиотеки: MUI, Ant Design и многие другие.

  Стилизация. Для стилизации в React часто используют не обычный CSS, а подход CSS-in-JS. Он позволяет описывать стили прямо в JavaScript. Одна из самых популярных реализаций подхода CSS-in-JS — библиотека styled-components.

  Это далеко не полный список задач и инструментов, с которыми работает React-разработчик в повседневной жизни.

  Как работать с React-компонентами?

  Рассмотрим подробнее синтаксис компонентов. Как мы уже говорили, React-компонент — это JavaScript-функция, которая на входе получает объект с данными для отрисовки компонента, а на выходе возвращает React-элемент.

  React-элемент — это JavaScript-объект, описывающий узел DOM-дерева. Он имеет специальный формат, который React умеет обрабатывать и отображать на странице. Для создания таких объектов библиотека React предоставляет метод React.createElement .

  Чтобы создать на странице разметку

  Тяжело читать React.createElement.

  , можно написать React-компонент:

  import React from "react"; function HelloReact() < // не нужно думать, что это такое, дальше мы будем использовать JSX return React.createElement( "p", <>, "Тяжело читать ", React.createElement("b", <>, "React.createElement"), ". " ); > 

  Вызовы React.createElement не выглядят интуитивно понятными. Глядя на код, сложно понять, что будет выведено на страницу. Поэтому React.createElement обычно напрямую не применяется, а используется специальный синтаксис JSX.

  Что такое JSX?

  JSX — расширение JavaScript для описания интерфейса прямо в JS с помощью синтаксиса, похожего на HTML. С использованием JSX пример будет выглядеть так:

  import React from "react"; function HelloReact() < return 
  Тяжело читать React.createElement.
   > 

  С JSX код стал понятнее. Сразу видно, какой фрагмент DOM-дерева описывает компонент.

  JSX позволяет шаблонизировать разметку, подставляя в неё данные, вычисленные из JavaScript-выражений. Для этого используется синтаксис фигурных скобок. Если переписать пример из начала статьи на React, то он может выглядеть так:

  import React from "react"; function HelloWorld (props) < return (Привет, Мир. Меня зовут ); > export default HelloWorld; 

  Здесь компонент HelloWorld получает в объекте props имя пользователя name и на основе этих данных возвращает нужную разметку: Привет, Мир. Меня зовут . Благодаря синтаксису фигурных скобок значение из переменной name подставляется в JSX.

  Однако браузер ничего не знает про JSX и не умеет его интерпретировать. При использовании JSX нужно настроить сборку проекта так, чтобы JSX автоматически трансформировался в JavaScript-объекты и в браузер попадал чистый JS. Для этого есть Babel-плагины и пресеты, а также проекты наподобие CreateReactApp. В статье мы используем онлайн IDE CodeSandbox, которая предоставляет готовый шаблон для React-проектов.

  Теперь посмотрим, как заставить React вывести на экран JSX-разметку. Для этого React предоставляет метод ReactDOM.render . Первым параметром в него передаётся JSX-разметка. Вторым — узел DOM-дерева, в который нужно вставить кусочек интерфейса.

  Чтобы вывести компонент HelloWorld в DOM-узел с id root , нужно написать:

  import ReactDOM from "react-dom"; import HelloWorld from "./hello-world"; const rootElement = document.getElementById("root"); ReactDOM.render(HelloWorld() , rootElement); 

  Вызов HelloWorld c объектом вернёт нужную JSX-разметку, а rootElement хранит ссылку на DOM-элемент с id root . В результате вызов ReactDOM.render(HelloWorld() , rootElement) вставит полученный из компонента интерфейс в нужный DOM-узел.

  Вручную, как функции, компоненты обычно не вызывают. Дело в том, что в JSX можно вставлять компоненты как обычные HTML-теги, передавая данные через атрибуты. При отрисовке на месте компонента в JSX будет выведена та разметка, которую вернёт компонент.

  Имя компонента в JSX должно начинаться с большой буквы, иначе JSX будет идентифицировать его как обычный HTML-тег.

  Таким образом, вместо ReactDOM.render(HelloWorld() , rootElement); пишут: ReactDOM.render( , rootElement); .

  Композиция компонентов и хуки

  Возможность вставлять в JSX не только HTML-теги, но и свои компоненты — один из важнейших приёмов в React. Страницы сайта обычно бывают намного сложнее, чем пример Hello World : они состоят из сотен или даже тысяч HTML-элементов. Описывать такую страницу в одном модуле или компоненте — плохая идея. Код превратится в огромную простыню. Поэтому страницы разбивают на более мелкие кусочки интерфейса, и каждый из них реализуют в виде отдельного компонента. Этот приём в React называют композицией компонентов.

  Тот же самый пример с HelloWorld можно представить в виде композиции двух маленьких компонентов:

  // компонент Name import React from "react"; function Name(props) < return ; > export default Name; // компонент HelloWorld import React from "react"; import Name from "./name"; function HelloWorld(props) < return ( 
  Привет, Мир. Меня зовут />
   ); > export default HelloWorld; 

  Теперь за отрисовку имени пользователя отвечает компонент Name. Его можно использовать не только в HelloWorld , но и любой другой части интерфейса, где необходимо вывести имя пользователя.

  Для более сложных страниц композиция может быть больше, например:

  

  Таким образом, интерфейс в React представляет собой дерево компонентов, каждый из которых отвечает за свой кусочек интерфейса. Так как данные передаются только через props сверху вниз, от родительских компонентов к дочерним, это образует однонаправленный поток данных. Работа с ними становится более предсказуемой и понятной.

  Создаваемые с помощью React пользовательские интерфейсы не статичны. Мы можем их перерисовать в ответ на действия пользователя. Для этого React предоставляет React-хуки.

  Хуки — это функции, которые позволяют изменить стандартное поведение системы собственным кодом. При этом интерфейс функции ограничивает эти изменения безопасными для системы пределами.

  В случае с React хуки помогают управлять жизненным циклом компонента, позволяя в нужный момент вызвать, например, его перерисовку.

  В результате счётчик на React может выглядеть так:

  import React, < useState >from "react"; export default function Counter(< initValue >) < const [value, setValue] = useState(initValue || 1); return ( 
   setValue(value - 1)>>-  setValue(value + 1)>>+ 
   ); > 

  useState — специальный React-хук для хранения состояния компонента. Когда состояние меняется, компонент перерисовывается.

  При вызове useState возвращает массив, первый элемент которого — значение состояния. Во втором элементе хранится функция-сеттер, с помощью которой можно менять значение состояния. Для кнопок передан props onClick . В него записана функция, которая вызывается при нажатии на кнопку — setValue с новым значением состояния. Это вызывает перерисовку, и на экране отображается актуальное значение value .

  useState — только один из множества доступных хуков. Более того, при необходимости разработчик может писать свои кастомные хуки.

  Итак, какие у React преимущества в сравнении с нативным JavaScript:

  1. React предоставляет декларативное описание интерфейса — с ним удобнее работать, чем с вереницей императивных инструкций DOM API.
  2. React сам решает, какие узлы DOM-дерева в какой момент обновлять. Он не выполняет лишних операций, поэтому код на React быстрее, чем большинство наивных реализаций на чистом JavaScript.
  3. У React отличная документация. Самописные решения для реализации дата биндинга обычно плохо задокументированы или не задокументированы вовсе.
  4. Благодаря JSX в одном компоненте мы видим и логику, и разметку, с которой должна работать данная логика. Обычно они неразрывно связаны, и видеть их рядом намного удобнее, чем отдельно хранить HTML и JavaScript.
  5. Разбиение кода на компоненты позволяет переиспользовать код.

  Итоги

  React востребован в мире современной фронтенд-разработки: многие разработчики по умолчанию используют его для написания интерфейсов. Такая популярность привела к тому, что некоторые джуны начинают изучать React, не зная базовый JavaScript. Это грубая ошибка. React — всего лишь JS-библиотека, и чтобы её освоить, нужно хорошо знать JavaScript.

  При изучении React уделите больше времени функциональному синтаксису написания компонентов — он используется чаще. На классовых компонентах, как правило, осталось написанным только «легаси». Также советуем освоить TypeScript, ведь его применяют в большинстве проектов на React.

  У React есть своя философия, приёмы и ограничения, которые нужно соблюдать, чтобы писать качественный код. Поэтому важно не просто выучить синтаксис, но и общаться с более опытными коллегами, показывать им свой код. Только так вы сможете стать хорошим React-разработчиком.

  Чтобы было проще выбрать:

  • Ключевые навыки фронтендеров в 2022
  • Как стать JavaScript-разработчиком в 2022
  • 6 книг по JavaScript для начинающих

  «Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

  Похожие публикации:

  1. Object sender c что это
  2. Как называется способность объекта скрывать свои данные и реализацию от других объектов системы
  3. Как удалить модуль в андроид студио
  4. Кардборд что это