React что это в программировании

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.

Статьи по теме:
Какие навыки осваивать и как набраться опыта, чтобы выбирать, а не искать работу
Топ-10 языков согласно индексу TIOBE

Где искать модели для машинного обучения, готовиться к собеседованиям и осваивать новые технологии на практике

Основы React: всё, что нужно знать для начала работы

Хотите узнать о том, что такое React, но вам всё никак не выпадает шанс изучить его? Или, может быть, вы уже пробовали освоить React, но не смогли толком понять? А может, вы разобрались с основами, но хотите привести в порядок знания? Эта статья написана специально для тех, кто положительно ответил хотя бы на один из этих вопросов. Сегодня мы создадим простой музыкальный проигрыватель, раскрывая основные концепции React по мере продвижения к цели.

Разобравшись с этим материалом, вы освоите следующее:

• Компоненты React.
• Рендеринг ReactDOM.
• Классы компонентов и функциональных компоненты.
• JSX.
• Состояние (state).
• Обработка событий.
• Асинхронный метод setState.
• Свойства (props).
• Ссылки (refs).

Предварительная подготовка

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

Для начала создайте новую директорию проекта и добавьте туда три файла. Вот они на GitHub, а вот их код.

Файл app.css

body < background: #f9f9f9; font-family: 'Open Sans', sans-serif; text-align: center; >#container < position: relative; z-index: 2; padding-top: 100px; >.play < display: block; width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 60px solid #2c3e50; margin: 100px auto 50px auto; position: relative; z-index: 1; transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; left: 10px; >.play:before < content: ''; position: absolute; top: -75px; left: -115px; bottom: -75px; right: -35px; border-radius: 50%; border: 10px solid #2c3e50; z-index: 2; transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; >.play:after < content: ''; opacity: 0; transition: opacity 0.6s; -webkit-transition: opacity 0.6s; -moz-transition: opacity 0.6s; >.play:hover:before, .play:focus:before < transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); >.play.active < border-color: transparent; >.play.active:after < content: ''; opacity: 1; width: 25px; height: 80px; position: absolute; right: 8px; top: -40px; border-right: 20px solid #2c3e50; border-left: 20px solid #2c3e50; >h1 < text-transform: uppercase; color: #34495e; letter-spacing: 2px; font-size: 2em; margin-bottom: 0; >canvas < position: fixed; left: 0; top: 0; width: 100%; height: 100%; >audio

Файл app.js

var ALPHA, AudioAnalyser, COLORS, MP3_PATH, NUM_BANDS, NUM_PARTICLES, Particle, SCALE, SIZE, SMOOTHING, SPEED, SPIN, TIMES_CALLED, ANALYSER; NUM_PARTICLES = 150; NUM_BANDS = 128; TIMES_CALLED = 0; SMOOTHING = 0.5; MP3_PATH = 'music.mp3'; SCALE = < MIN: 5.0, MAX: 80.0 >; SPEED = < MIN: 0.2, MAX: 1.0 >; ALPHA = < MIN: 0.8, MAX: 0.9 >; SPIN = < MIN: 0.001, MAX: 0.005 >; SIZE = < MIN: 0.5, MAX: 1.25 >; COLORS = [ '#69D2E7', '#1B676B', '#BEF202', '#EBE54D', '#00CDAC', '#1693A5', '#F9D423', '#FF4E50', '#E7204E', '#0CCABA', '#FF006F' ]; function getAnimation(file) < AudioAnalyser = (function() < AudioAnalyser.AudioContext = self.AudioContext || self.webkitAudioContext; AudioAnalyser.enabled = AudioAnalyser.AudioContext != null; function AudioAnalyser(audio, numBands, smoothing) < var src; this.audio = audio != null ? audio : new Audio(); this.numBands = numBands != null ? numBands : 256; this.smoothing = smoothing != null ? smoothing : 0.3; this.audio = document.getElementById('audio'); if (!this.audio) < return; >try < this.audio.src = window.URL.createObjectURL(file); >catch (err) < console.log(err); >this.context = new AudioAnalyser.AudioContext(); this.jsNode = this.context.createScriptProcessor(2048, 1, 1); this.analyser = this.context.createAnalyser(); this.analyser.smoothingTimeConstant = this.smoothing; this.analyser.fftSize = this.numBands * 2; this.bands = new Uint8Array(this.analyser.frequencyBinCount); this.audio.addEventListener( 'play', (function(_this) < return function() < if (TIMES_CALLED === 1) < return; >ANALYSER.start(); TIMES_CALLED++; _this.source = _this.context.createMediaElementSource(_this.audio); _this.source.connect(_this.analyser); _this.analyser.connect(_this.jsNode); _this.jsNode.connect(_this.context.destination); _this.source.connect(_this.context.destination); return (_this.jsNode.onaudioprocess = function() < _this.analyser.getByteFrequencyData(_this.bands); if (!_this.audio.paused) < return typeof _this.onUpdate === 'function' ? _this.onUpdate(_this.bands) : void 0; >>); >; >)(this) ); > AudioAnalyser.prototype.start = function() < return this.audio.play(); >; AudioAnalyser.prototype.stop = function() < return this.audio.pause(); >; return AudioAnalyser; >)(); Particle = (function() < function Particle(x1, y1) < this.x = x1 != null ? x1 : 0; this.y = y1 != null ? y1 : 0; this.reset(); >Particle.prototype.reset = function() < this.level = 1 + floor(random(4)); this.scale = random(SCALE.MIN, SCALE.MAX); this.alpha = random(ALPHA.MIN, ALPHA.MAX); this.speed = random(SPEED.MIN, SPEED.MAX); this.color = random(COLORS); this.size = random(SIZE.MIN, SIZE.MAX); this.spin = random(SPIN.MAX, SPIN.MAX); this.band = floor(random(NUM_BANDS)); if (random() < 0.5) < this.spin = -this.spin; >this.smoothedScale = 0.0; this.smoothedAlpha = 0.0; this.decayScale = 0.0; this.decayAlpha = 0.0; this.rotation = random(TWO_PI); return (this.energy = 0.0); >; Particle.prototype.move = function() < this.rotation += this.spin; return (this.y -= this.speed * this.level); >; Particle.prototype.draw = function(ctx) < var alpha, power, scale; power = exp(this.energy); scale = this.scale * power; alpha = this.alpha * this.energy * 1.5; this.decayScale = max(this.decayScale, scale); this.decayAlpha = max(this.decayAlpha, alpha); this.smoothedScale += (this.decayScale - this.smoothedScale) * 0.3; this.smoothedAlpha += (this.decayAlpha - this.smoothedAlpha) * 0.3; this.decayScale *= 0.985; this.decayAlpha *= 0.975; ctx.save(); ctx.beginPath(); ctx.translate(this.x + cos(this.rotation * this.speed) * 250, this.y); ctx.rotate(this.rotation); ctx.scale( this.smoothedScale * this.level, this.smoothedScale * this.level ); ctx.moveTo(this.size * 0.5, 0); ctx.lineTo(this.size * -0.5, 0); ctx.lineWidth = 1; ctx.lineCap = 'round'; ctx.globalAlpha = this.smoothedAlpha / this.level; ctx.strokeStyle = this.color; ctx.stroke(); return ctx.restore(); >; return Particle; >)(); Sketch.create( < particles: [], setup: function() < var analyser, error, i, intro, j, particle, ref, warning, x, y; for (i = j = 0, ref = NUM_PARTICLES - 1; j if (AudioAnalyser.enabled) < try < analyser = new AudioAnalyser(MP3_PATH, NUM_BANDS, SMOOTHING); analyser.onUpdate = (function(_this) < return function(bands) < var k, len, ref1, results; ref1 = _this.particles; results = []; for (k = 0, len = ref1.length; k < len; k++) < particle = ref1[k]; results.push((particle.energy = bands[particle.band] / 256)); >return results; >; >)(this); analyser.audio = window.audio; ANALYSER = analyser; intro = document.getElementById('intro'); intro.style.display = 'none'; if ( /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent) ) < warning = document.getElementById('warning2'); return (warning.style.display = 'block'); >> catch (_error) < error = _error; >> else < warning = document.getElementById('warning1'); return (warning.style.display = 'block'); >>, draw: function() < var j, len, particle, ref, results; this.globalCompositeOperation = 'lighter'; ref = this.particles; results = []; for (j = 0, len = ref.length; j < len; j++) < particle = ref[j]; if (particle.y < -particle.size * particle.level * particle.scale * 2) < particle.reset(); particle.x = random(this.width); particle.y = this.height + particle.size * particle.scale * particle.level; >particle.move(); results.push(particle.draw(this)); > return results; > >); > function handleFileSelect(evt) < var files = evt.target.files; getAnimation(files[0]); >getAnimation(null); document .getElementById('files') .addEventListener('change', handleFileSelect, false);

Файл index.html

   
Play Music
 
      

Для успешного прохождения этого руководства вам понадобится свежая версия браузера Google Chrome, иначе не будут работать анимации. Выражаем благодарность Стивену Фабре за CSS для кнопки проигрывания и Джастину Виндлу за код визуализации (оригинал можно посмотреть здесь).

Откройте index.html в редакторе кода и в браузере. Пришло время познакомиться с React.

Что такое React?

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

Вот пример разбивки страницы на компоненты:

Каждый выделенный фрагмент страницы, показанной на рисунке, считается компонентом. Но что это значит для разработчика?

Что такое компонент React?

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

Для формирования страницы мы вызываем эти функции в определённом порядке, собираем вместе результаты вызовов и показываем их пользователю.

Напишем компонент внутри тега файла index.html с type , установленным в «text/babel» :

Когда мы вызываем функцию OurFirstComponent() , в ответ приходит фрагмент страницы.

Функции можно писать и так:

const OurFirstComponent = () => < return ( // То, что нужно для создания компонента, идёт сюда ); >

React использует язык программирования, называемый JSX, который похож на HTML, но работает внутри JavaScript, что отличает его от HTML.

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

Когда мы вызываем функцию OurFirstComponent() , она возвращает фрагмент JSX-кода. Мы можем использовать так называемый ReactDOM для вывода того, что представляет этот код, на страницу:

Теперь тег окажется внутри элемента с ID hook . Когда вы обновите страницу браузера, она должна выглядеть так:

Можно и написать собственный компонент на JSX. Делается это так:

ReactDOM.render(, placeWeWantToPutComponent);

Это — стандартный подход — вызывать компоненты так, будто вы работаете с HTML.

Сборка компонентов

Компоненты React можно помещать в другие компоненты.

Вот что выведет вышеприведённый код:

Именно так страницы собирают из фрагментов, написанных на React — вкладывая компоненты друг в друга.

Классы компонентов

До сих пор мы писали компоненты в виде функций. Их называют функциональными компонентами. Однако, компоненты можно писать и иначе, в виде классов JavaScript. Их называют классами компонентов.

class Container extends React.Component < render() < return ( 
I am the parent!
 
 ); > > const placeWeWantToPutComponent = document.getElementById('hook'); ReactDOM.render(, placeWeWantToPutComponent);

Классы компонентов должны содержать функцию, называемую render() . Эта функция возвращает JSX-код компонента. Их можно использовать так же, как функциональные компоненты, например, обращаясь к ним с помощью конструкции:

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

JavaScript в JSX

В JSX-код можно помещать переменные JavaScript. Выглядит это так:

class Container extends React.Component < render() < const greeting = 'I am a string!'; return ( 
  
 ); > >

Теперь текст «I am a string» окажется внутри тега .

Кроме того, тут можно делать и вещи посложнее, вроде вызовов функций:

class Container extends React.Component < render() < const addNumbers = (num1, num2) =>< return num1 + num2; >; return ( 
The sum is: 
 ); > >

Вот как будет выглядеть страница после обработки вышеприведённого фрагмента кода:

Подводные камни JSX

Переименуйте OurFirstComponent() в PlayButton . Нам надо, чтобы этот компонент возвращал следующее:

Однако, тут мы сталкиваемся с проблемой: class — это ключевое слово JavaScript, поэтому использовать его мы не можем. Как же назначить класс play элементу ?

Для того, чтобы этого добиться, нужно воспользоваться свойством className :

Особенности создаваемого компонента

Компоненты, основанные на классах, могут хранить информацию о текущей ситуации. Эта информация называется состоянием (state), она хранится в JS-объекте. В нижеприведённом коде показан объект, представляющий состояние нашего компонента. Его ключ — это isMusicPlaying , с ним связано значение false . Этот объект назначен this.state в методе constructor , который вызывается при первом использовании класса.

class Container extends React.Component < constructor(props) < super(props); this.state = < isMusicPlaying: false >; > render() < return ( 
 
 ); > >

Метод constructor компонента React всегда должен вызвать super(props) прежде чем выполнять что угодно другое.
Итак, а что нам делать с этим «состоянием»? Зачем оно придумано?

Изменение компонента React на основе его состояния

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

Вот с чего мы начнём. Узнаем состояние компонента с помощью конструкции this.state . В следующем коде мы проверяем состояние и используем его для принятия решения о том, какой текст показать пользователю.

class Container extends React.Component < constructor(props) < super(props); this.state = < isMusicPlaying: false >; > render() < const status = this.state.isMusicPlaying ? 'Playing' : 'Not playing'; return ( 
  
 ); > >

В функции render ключевое слово this всегда ссылается на компонент, внутри которого она находится.

Всё это не особенно полезно, если у нас нет способа изменять this.state.isMusicPlaying .

Как компонент реагирует на события?

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

class Container extends React.Component < constructor(props) < super(props); this.state = < isMusicPlaying: false >; > handleClick(event) < // Отреагировать на щелчок мышью >; render() < let status = this.state.isMusicPlaying ? 'Playing :)' : 'Not playing :('; return ( 
> 
 ); > >

Когда пользователь щёлкает по тексту, представленному тегом , компонент вызывает функцию handleClick . Функция получает объект события в качестве аргумента, а это значит, что она может, при необходимости, им пользоваться.

Мы используем метод .bind функции handleClick для того, чтобы ключевое слово this ссылалось на весь компонент, а не только на .

Как должен работать компонент

Когда меняется состояние компонента, он снова вызовет функцию render . Мы можем изменить состояние с помощью this.setState() , если передадим этой функции объект, представляющий новое состояние. Компонент на странице всегда будет представлять своё текущее состояние. React самостоятельно обеспечивать такое поведение компонентов.

handleClick() < if (this.state.isMusicPlaying) < this.setState(< isMusicPlaying: false >); > else < this.setState(< isMusicPlaying: true >); > >;

Теперь, разобравшись с этим механизмом, займёмся обработкой щелчка по кнопке.

Обмен данными между компонентами

Компоненты могут «общаться» друг с другом. Посмотрим, как это работает. Мы можем сообщить PlayButton , проигрывается музыка или нет, используя так называемые свойства (props). Свойства — это информация, коллективно используемая родительским компонентом и компонентами-потомками.

Свойств в JSX выглядят так же, как HTML-свойства. Мы назначаем PlayButton свойство, называемое isMusicPlaying , которое является тем же самым, что и isMusicPlaying в this.state .

class Container extends React.Component < constructor(props) < super(props); this.state = < isMusicPlaying: false >; > handleClick() < if (this.state.isMusicPlaying) < this.setState(< isMusicPlaying: false >); > else < this.setState(< isMusicPlaying: true >); > >; render() < return ( 
 />
 ); > >

Когда состояние Container меняется, свойство PlayButton также меняется, и функция PlayButton вызывается снова. Это означает, что вид компонента на экране обновится.

Внутри PlayButton мы можем реагировать на изменения, так как PlayButton принимает свойства как аргумент:

function PlayButton(props) < const className = props.isMusicPlaying ? 'play active' : 'play'; return />; >

Если мы поменяем состояние на this.state = < isMusicPlaying: true >; и перезагрузим страницу, на ней должна появиться кнопка паузы:

События как свойства

Свойства необязательно должны представлять собой какие-то данные. Они могут быть и функциями.

function PlayButton(props) < const className = props.isMusicPlaying ? 'play active' : 'play'; return href="#" title="Play video" className= />; > class Container extends React.Component < constructor(props) < super(props); this.state = < isMusicPlaying: false >; > handleClick() < if (this.state.isMusicPlaying) < this.setState(< isMusicPlaying: false >); > else < this.setState(< isMusicPlaying: true >); > >; render() < return ( 
 isMusicPlaying= />
 ); > >

Теперь, когда мы щёлкаем по кнопке PlayButton , она меняет состояние Container , которое изменит props PlayButton , что приведёт к обновлению кнопки на странице.

Неприятная особенность setState

При вызове setState изменение состояния не производится мгновенно. React ждёт немного для того, чтобы увидеть, не нужно ли внести ещё какие-то изменения, и только потом производит изменение состояния. Это означает, что нельзя точно знать, каким будет состояние компонента после вызова setState .

Поэтому вот так поступать не следует:

handleClick() < this.setState(< isMusicPlaying: !this.state.isMusicPlaying >); >;

Если вы изменяете состояние, основываясь на предыдущем состоянии, нужно делать это по-другому. А именно, следует передать setState функцию, а не объект. Эта функция принимает старое состояние как аргумент и возвращает объект, представляющий новое состояние.

Выглядит это так:

handleClick() < this.setState(prevState =>< return < isMusicPlaying: !prevState.isMusicPlaying >; >); >;

Эта конструкция сложнее, но она необходима только в том случае, если вы используете старое состояние для формирования нового состояния. Если нет — можно просто передавать setState объект.

Что такое ссылки?

Пришло время включить музыку. Для начала добавим тег :

class Container extends React.Component < constructor(props) < super(props); this.state = < isMusicPlaying: false >; > handleClick() < this.setState(prevState =>< return < isMusicPlaying: !prevState.isMusicPlaying >; >); >; render() < return ( 
 isMusicPlaying= /> 
 ); > >

Нам нужен способ обратиться к тегу и вызвать либо его метод play() , либо pause() . Сделать это можно с помощью конструкции document.getElementById(‘audio’).play() , но React предлагает кое-что получше.

Мы назначаем элементу атрибут, называемый ref , который принимает функцию. Эта функция, в качестве первого аргумента, принимает элемент , и присваивает его this.audio .

< this.audio = audioTag >> />
Эта функция будет вызываться каждый раз, когда выводится Container , то есть, this.audio всегда будет в актуальном состоянии и будет указывать на тег .
Теперь мы можем запускать и приостанавливать воспроизведение музыки:

handleClick() < if (this.state.isMusicPlaying) < this.audio.pause(); >else < this.audio.play(); >this.setState(prevState => < return < isMusicPlaying: !prevState.isMusicPlaying >; >); >;

Выгрузим на страницу музыкальный файл (лучше — в формате .mp3) с использованием кнопки Choose files , нажмём на кнопку запуска воспроизведения и послушаем музыку.

React за пределами index.html

Как вы, возможно, догадались, React-код не должен «жить» исключительно внутри тега . React поддерживает множество конфигураций сборки. К счастью, с помощью инструментов вроде Create React App всю рутинную работу по формированию каркаса приложения можно автоматизировать. Установите create-react-app , создайте новый проект, посмотрите руководство и приступайте к работе с JS-файлами в папке проекта src , применяя все те знания по React, которые вы сегодня получили.

Итоги

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

Уважаемые читатели! Если сегодня состоялось ваше первое знакомство с React — просим поделиться впечатлениями.

• Блог компании RUVDS.com
• Веб-разработка
• JavaScript
• ReactJS

Зачем фронтендерам 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 для начинающих

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

React что это в программировании

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

React js — описание и значения терминов

Фреймворк React.js — это фреймворк и библиотека JavaScript с открытым исходным кодом, разработанные и поддерживаемые Facebook и Instagram. Он используется для быстрого и эффективного создания интерактивных пользовательских интерфейсов и веб-приложений с применением значительно меньшего количества кода, чем при использовании обычного JavaScript. В React ты разрабатываешь свои приложения и проекты, создавая повторно используемые компоненты, которые можно рассматривать как независимые блоки Lego. Эти компоненты представляют собой отдельные части окончательного интерфейса, которые в собранном виде образуют весь пользовательский интерфейс приложения.

Основная роль React в приложении — управление отображением этого приложения точно так же, как буква V в шаблоне “модель-представление-контроллер” (MVC), обеспечивая оптимальное и наиболее эффективное выполнение рендеринга. Вместо того чтобы рассматривать весь пользовательский интерфейс как единое целое, React.js предлагает разработчикам разделить эти сложные пользовательские интерфейсы на отдельные повторно используемые компоненты, которые образуют строительные блоки всего пользовательского интерфейса. При этом платформа React JS сочетает в себе скорость и эффективность JavaScript с более эффективным методом манипулирования DOM для быстрого рендеринга веб-страниц и создания высоко динамичных и отзывчивых веб-приложений.

Виды React JS

Если говорить о видах React, то у него есть как простые, так и сложные компоненты, ниже коротко о каждом из них.

Простые компоненты (Functional Components)

Это функциональные компоненты, которые принимают определенные свойства (props) и возвращают JSX (JavaScript XML) для отображения интерфейса. Их еще называют “глупыми”, так как эти компоненты не выполняют сверхсложные задачи, а только выводят данные и являются несостоятельными.

Сложные компоненты (Class Components)

Сложные компоненты можно назвать “умными”, так как они управляют простыми компонентами и выполняют трудные и масштабные задачи, такие как запросы к серверу. Это классы, которые расширяют базовый класс React.Component. Они напротив имеют собственное состояние (state) и методы жизненного цикла. Сложные компоненты используются, когда необходимо управлять состоянием компонента.

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

Где применяется React JS и какие у него есть возможности

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

• Facebook
• Instagram
• Netflix
• Reddit
• Uber
• Airbnb
• SoundCloud
• Веб-сайт WhatsApp

С каждым годом React становится все более надежным и теперь он может использоваться для создания собственных мобильных приложений с использованием React Native и настольных приложений с использованием Electron.js. Поэтому React подходит для широкого спектра веб-проектов: от простых сайтов до сложных веб- и мобильных приложений.

React js — преимущества

• React.js создает настраиваемый виртуальный DOM. Поскольку виртуальный DOM JavaScript работает быстрее, чем обычный, это повышает производительность приложений и снижаем нагрузку на браузер.
• React упрощает процесс создания скриптов, что в свою очередь облегчает техническое обслуживание и повышает производительность, а также гарантирует более быстрый рендеринг.
• Наличие скрипта для разработки мобильных приложений для iOS и Android — одна из лучших особенностей React.
• Может использоваться с различными системами как на стороне клиента, так и на стороне сервера.
• Имеет компонентную архитектуру , ч то делает код более модульным и позволяет многократно использовать компоненты в разных частях приложения.
• Позволяет легко передавать и обновлять данные между компонентами.
• С React разработчик может генерировать реактивные интерфейсы. Они быстро реагируют на действия пользователя или редактуру данных без явного обновления страницы.
• Также в React есть серверный рендеринг, что улучшает показатели SEO, минимизирует время загрузки страниц и помогает повысить производительность.
• ReactJS поддерживает большое сообщество разработчиков, что способствует его постоянному развитию.

Недостатки react

• Нехватка документации и встроенных библиотек.
• Акцент React на пользовательском интерфейсе.
• Синтаксис может показаться сложным для новичков.
• Возможны проблемы с производительностью.

Заключение

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