Что такое react js и зачем он нужен
Основы React: всё, что нужно знать для начала работы
Хотите узнать о том, что такое React, но вам всё никак не выпадает шанс изучить его? Или, может быть, вы уже пробовали освоить React, но не смогли толком понять? А может, вы разобрались с основами, но хотите привести в порядок знания? Эта статья написана специально для тех, кто положительно ответил хотя бы на один из этих вопросов. Сегодня мы создадим простой музыкальный проигрыватель, раскрывая основные концепции React по мере продвижения к цели.
Разобравшись с этим материалом, вы освоите следующее:
Предварительная подготовка
Рассмотрим такую ситуацию: к вам за помощью обращается маленький стартап. Они создали приятную страницу, пользуясь которой пользователи могут загружать в их сервис музыку и проигрывать её. Им хочется, чтобы вы сделали самое сложное — вдохнули в эту страницу жизнь.
Для начала создайте новую директорию проекта и добавьте туда три файла. Вот они на GitHub, а вот их код.
Для успешного прохождения этого руководства вам понадобится свежая версия браузера Google Chrome, иначе не будут работать анимации. Выражаем благодарность Стивену Фабре за CSS для кнопки проигрывания и Джастину Виндлу за код визуализации (оригинал можно посмотреть здесь).
Откройте index.html в редакторе кода и в браузере. Пришло время познакомиться с React.
Что такое React?
React — это инструмент для создания пользовательских интерфейсов. Его главная задача — обеспечение вывода на экран того, что можно видеть на веб-страницах. React значительно облегчает создание интерфейсов благодаря разбиению каждой страницы на небольшие фрагменты. Мы называем эти фрагменты компонентами.
Вот пример разбивки страницы на компоненты:
Каждый выделенный фрагмент страницы, показанной на рисунке, считается компонентом. Но что это значит для разработчика?
Что такое компонент React?
Компонент React — это, если по-простому, участок кода, который представляет часть веб-страницы. Каждый компонент — это JavaScript-функция, которая возвращает кусок кода, представляющего фрагмент страницы.
Для формирования страницы мы вызываем эти функции в определённом порядке, собираем вместе результаты вызовов и показываем их пользователю.
Напишем компонент внутри тега
Функции можно писать и так:
React использует язык программирования, называемый JSX, который похож на HTML, но работает внутри JavaScript, что отличает его от HTML.
Вы можете добавить сюда обычный HTML для того, чтобы он попал в пользовательский интерфейс:
Можно и написать собственный компонент на JSX. Делается это так:
Это — стандартный подход — вызывать компоненты так, будто вы работаете с HTML.
Сборка компонентов
Компоненты React можно помещать в другие компоненты.
Вот что выведет вышеприведённый код:
Именно так страницы собирают из фрагментов, написанных на React — вкладывая компоненты друг в друга.
Классы компонентов
До сих пор мы писали компоненты в виде функций. Их называют функциональными компонентами. Однако, компоненты можно писать и иначе, в виде классов JavaScript. Их называют классами компонентов.
В том случае, если вас интересуют компоненты без состояния, предпочтение следует отдать функциональным компонентам, их, в частности, легче читать. О состоянии компонентов мы поговорим ниже.
JavaScript в JSX
В JSX-код можно помещать переменные JavaScript. Выглядит это так:
Теперь текст «I am a string» окажется внутри тега
Кроме того, тут можно делать и вещи посложнее, вроде вызовов функций:
Вот как будет выглядеть страница после обработки вышеприведённого фрагмента кода:
Подводные камни JSX
Для того, чтобы этого добиться, нужно воспользоваться свойством className :
Особенности создаваемого компонента
Метод constructor компонента React всегда должен вызвать super(props) прежде чем выполнять что угодно другое.
Итак, а что нам делать с этим «состоянием»? Зачем оно придумано?
Изменение компонента React на основе его состояния
Состояние — это инструмент, позволяющий обновлять пользовательский интерфейс, основываясь на событиях. Тут мы будем использовать состояние для изменения внешнего вида кнопки проигрывания музыки, основываясь на щелчке по ней. Кнопка может отображаться в одном из двух вариантов. Первый указывает на возможность запуска проигрывания, второй — на то, что музыка проигрывается, и этот процесс можно приостановить. Когда пользователь щёлкает по кнопке, меняется состояние, а затем обновляется пользовательский интерфейс.
В функции render ключевое слово this всегда ссылается на компонент, внутри которого она находится.
Как компонент реагирует на события?
Пользователь может взаимодействовать с компонентом, щёлкая по кнопке проигрывания музыки. Мы хотим реагировать на эти события. Делается это посредством функции, которая занимается обработкой событий. Эти функции так и называются — обработчики событий.
Когда пользователь щёлкает по тексту, представленному тегом
Как должен работать компонент
Теперь, разобравшись с этим механизмом, займёмся обработкой щелчка по кнопке.
Обмен данными между компонентами
Когда состояние Container меняется, свойство PlayButton также меняется, и функция PlayButton вызывается снова. Это означает, что вид компонента на экране обновится.
Внутри PlayButton мы можем реагировать на изменения, так как PlayButton принимает свойства как аргумент:
Если мы поменяем состояние на this.state = < isMusicPlaying: true >; и перезагрузим страницу, на ней должна появиться кнопка паузы:
События как свойства
Свойства необязательно должны представлять собой какие-то данные. Они могут быть и функциями.
Неприятная особенность setState
Поэтому вот так поступать не следует:
Если вы изменяете состояние, основываясь на предыдущем состоянии, нужно делать это по-другому. А именно, следует передать setState функцию, а не объект. Эта функция принимает старое состояние как аргумент и возвращает объект, представляющий новое состояние.
Эта конструкция сложнее, но она необходима только в том случае, если вы используете старое состояние для формирования нового состояния. Если нет — можно просто передавать setState объект.
Что такое ссылки?
Пришло время включить музыку. Для начала добавим тег :
ReactJS для глупых людей
Пытаясь разобраться с библиотекой от Facebook ReactJS и продвигаемой той же компанией архитектурой «Flux», наткнулся на просторах интернета на две занимательные статьи: «ReactJS For Stupid People» и «Flux For Stupid People». Решил поделиться с хабравчанами переводом первой (а чуть позже и второй) статьи. Итак, поехали.
ReactJS для глупых людей
TL;DR В течении долгого времени я пытался понять, что такое React и как он вписывается в структуру приложения. Это статья, которой мне в свое время не хватало.
Что такое React?
Чем отличается React от Angular, Ember, Backbone и других? Как управлять данными? Как взаимодействовать с сервером? Что, черт возьми, такое JSX? Что такое «component»?
Остановитесь прямо сейчас.
React — это ТОЛЬКО УРОВЕНЬ ПРЕДСТАВЛЕНИЯ.
React часто упоминают в одном ряду с другими javascript фреймворками, но споры «React vs Angular» не имеют смысла, потому что это не сопоставимые вещи. Angular — это полноценный фреймворк (включающий и уровень представления). React — нет. Вот почему React вызывает столько непонимания в развивающемся мире полноценных фреймворков — это только представление.
React дает вам язык шаблонов и некоторые callback-функции для отрисовки HTML. Весь результат работы React — это HTML. Ваши связки HTML/JavaScript, называемые компонентами, занимаются тем, что хранят свое внутреннее состояние в памяти (например: какая закладка выбрана), но в итоге вам просто выплевывается HTML.
Разумеется, вы не можете построить полно функционирующее динамическое приложение только с React. Почему, мы рассмотрим позже.
Плюсы
После работы с React, я увидел три очень важных преимущества.
1. Вы всегда можете сказать, как ваш компонент будет отрисован, глядя на исходный код.
Это может быть важным преимуществом, хотя это ничем не отличается от шаблонов Angular. Давайте воспользуемся примером из реальной жизни.
Скажем, вам нужно изменить заголовок вашего сайта на имя пользователя после логина. Если вы не используете какой-либо MVC фреймворк, вы можете сделать что-то вроде:
По опыту могу сказать, что этот код испортит жизнь вам и вашим коллегам. Как производить отладку? Кто изменяет заголовок? Кто имеет доступ к заголовку? Кто определяет видимость? Манипуляция с DOM так же плоха, как оператор GOTO в логике вашей программы.
Вот как вы могли бы сделать это с React:
Мы можем тут же сказать, как компонент будет отрисован. Если вы знаете состояние — вы знаете результат отрисовки. Вам не нужно прослеживать ход выполнения программы. Когда разрабатывается сложное приложение, особенно в команде, это очень важно.
2. Связывание JavaScript и HTML в JSX делает компоненты простыми для понимания.
Странное сочетание HTML/JavaScript может вас смутить. Нас учили не вставлять JavaScript в DOM (например: обработчики OnClick), еще в то время, когда мы были «крошечными» разработчиками (ор: since we were wee developers). Но вы можете мне верить, работать с JSX компонентами это на самом деле замечательно.
Обычно вы разделяете представления (HTML) и функциональность (JavsScript). Это приводит к монолитному JavaScript файлу, содержащему всю функциональность для одной страницы, и вы должны следить за сложным потоком JS->HTML->JS->неприятная ситуация.
Связывание функциональности напрямую с разметкой и упаковка этого в портативный, автономный «компонент», сделает вас счастливее, а ваш код в целом лучше. Ваш Javasacript «хорошо знаком» с вашим HTML, так что смешивать их имеет смысл.
3. Вы можете рендерить React на сервере.
Если вы разрабатывает публичный сайт или приложение, и вы рендерите все на клиенте, то вы выбрали неправильный путь. Клиентский рендеринг — это причина, почему SoundCloud работает медленно, и почему Stack Overflow (используя только серверный рендеринг) работает так быстро. Вы можете рендерить React на сервере, и вы должны этого делать.
Angular и другие поощряют использование PhantomJS для рендеринга страницы и предоставления ее поисковым движкам (основываясь на user-агенте) или использование платных сервисов. ТЬФУ!
Минусы
Не забывайте, что React — это только представление.
В реальном мире React сам по себе бесполезен. Хуже того, как мы видим, это приводит к тому, что каждый изобретает свой велосипед.
2. Плохая и непонятная документация.
Повторюсь, эта статья для глупых людей. Посмотрите на первую часть боковой панели документации:
Здесь три отдельных, конкурирующие туториала для начинающих. Это удивляет. Боковая панель ниже, словно из моих ночных кошмаров, с разделами, которые точно не должны быть здесь, такие как «More About Refs» и «PureRenderMixin» (прим. переводчика: плагин для React).
3. React достаточно большой, учитывая то, как мало вы от него получаете, включая плохую кроссбраузерную поддержку.
35 KB gzipped
Это без библиотеки в reacat-with-addons, которая будет вам нужна для разработки реального приложения!
Это без библиотеки ES5-shim, необходимой для поддержки IE8!
Это без какой-либо другой библиотеки!
По размеру React сравним с Angular, хотя Angular — это полноценный фреймворк. React, откровенно говоря, жирный, для такой маленькой функциональности. Будем надеяться, что в будущем это поправят.
Хватит говорить «FLUX»
Flux скорее паттерн, чем фреймворк
Тьфу. Хуже всего то, что React не переосмысляет последние 40 лет знаний в области UI-архитектуры и не придумывает какой-то новой концепции управления данными.
Концепция Flux проста: ваше представление вызывает событие (например: пользователь вводит имя в текстовое поле), событие изменяет модель, затем модель вызывает событие, представление реагирует на событие модели и перерисовывается с новыми данными. Вот и все.
Однонаправленный поток данных и шаблон проектирования «наблюдатель» гарантирует, что ваши хранилища/модели, всегда находится в актуальном состоянии. Это полезно.
Плохой стороной Flux является то, что каждый заново изобретает его. Так и нет договоренности о библиотеки событий, слое модели, AJAX слое и остального, есть много разных реализаций «Flux» и все они конкурируют между собой.
Должен ли я использовать React?
Развернутый ответ: к сожалению, да, для многих вещей.
Я надеюсь, эта статься поможет таким же глупым людям, как и я, лучше понять React. Если этот пост сделал вашу жизнь проще, можете подписаться на меня в Твитере.
ReactJS: быстрый старт
Совсем скоро стартует курс «React.js разработчик», поэтому в стенах OTUS состоялся очередной открытый урок. На нем рассмотрели следующие вопросы:
В конце урока разработали небольшое веб-приложение на ReactJS. Вебинар провел Никита Овчинников, инженер-программист с более чем 8-летним опытом коммерческой разработки.
Что такое React?
Ответ на этот вопрос вы увидите, открыв официальный сайт, где написано, что React — это JavaScript-библиотека для построения юзер-интерфейсов.
Здесь же вы найдёте замечательный туториал, изучив который, вы сможете использовать этот фреймворк сразу после прочтения. При желании посмотрите туториал и на русском языке, но делать этого не рекомендуется. Если уж совсем плохо с английским, всё равно открывайте оригинальную английскую версию и используйте Google-переводчик. Дело в том, что официальные русскоязычные источники иногда отстают в плане перевода (бывает, что документация обновилась, а перевод ещё нет).
Почему React такой популярный?
О популярности React говорит, например, статистика за последние 6 месяцев, если не считать характерного проседания в зимние праздники:
Неплохие результаты показывает и следующая статистика:
Конечно, статистика — это ещё далеко не всё, но тем не менее по выборке мы видим, что популярность высока, и она только увеличивается.
Почему же React завоевал такую популярность? На это есть ряд причин:
Просто ли выучить React?
Итак, знакомьтесь — слабость №1: React выучить совсем непросто. И вот почему:
1. React — это совершенно другой образ мышления. Если вы с ним работаете, вам действительно нужно перестроиться. В React, в отличие от других фреймворков, есть только понятие композиции. Ребята из Facebook спроектировали свой фреймворк таким образом, что в нём нет никакого наследования. И эти же ребята из Facebook вполне логично объяснили такое положение вещей:
«At Facebook, we use React in thousands of components, and we haven’t found any use cases where we would recommend creating component inheritance hierarchies».
Собственно говоря, это заявление небезосновательно, ведь в ООП есть, разумеется, много известных проблем, например, избыточное количество абстракций. К тому же, не все разработчики являются сторонниками построения невероятных цепочек наследования и вот этого всего, хотя, конечно, где-то наследование и нужно, и полезно.
2. Второй момент, усложняющий изучение React, связан с тем, что в нем есть только рекомендации, и нет жесткого набора правил. Мало того, при изучении фреймворка это ещё терпимо, но когда вы попадете на реальный проект, вы очень сильно удивитесь. Дело в том, что нет двух одинаковых проектов в React, и в каждой компании проект с React абсолютно индивидуален. Вы привыкаете к одной ситуации, а потом переходите в другую команду и видите, что там всё по-другому: другие библиотеки, другие правила… И снова надо подстраиваться и адаптироваться. Как говорится, за гибкость надо платить.
3. Третья сложность изучения — для успешного освоения React разработчику нужно иметь высокий уровень. Нет, сам по себе React простой и писать на нём просто. Но для того, чтобы сделать на нём что-то более-менее сложное, нужно иметь хорошие скиллы программирования. При наличии пробелов в фундаментальных знаниях JS и TS, вам будет довольно сложно, и вы не всё будете понимать.
Проблема выбора
Теперь поговорим про слабость № 2 — проблему выбора. Речь идёт о многообразии, в котором легко потеряться. Тут действительно очень много всего. Появились недавно хуки — начался разговор про то, что классы больше не нужны, начались батлы React Hooks vs React Class… Все кинулись использовать хуки, а потом, сказали, что не всё понятно и вернулись к использованию классов и т. д. и т. п…
Собственно говоря, правильного ответа на вопрос «React Hooks или React Class» не существует. Или, если быть точнее, правильный ответ зависит от условий, в которых вы этот вопрос задаете.
Возникает другой вопрос: «Чем проверять типы»? Смотрите у нас есть:
Опять же, есть Create React App, Webpack.js и Babel, поэтому, как только вы начнете, у вас и здесь возникнет вопрос, а что использовать?
Следующие муки выбора связаны со State. Есть Redux и есть MobX, а внутри Redux есть ещё redux-saga и redux-thunk. И тяжело, не попробовав, осознать, что же лучше использовать в конкретной ситуации.
1. Router. Существует порядка пяти, вот самые популярные:
В чём сила, брат?
Несмотря на всё вышесказанное, React — очень сильная технология. Во-первых, если вы профессионал, работу будет найти очень легко. Скорее, будет сложно от нее отказаться, потому что предложений на рынке сейчас очень много:
Следующий плюс — множество готовых библиотек и решений. Об этом говорит тот же скриншот из GitHub (существует более миллиона репозиториев):
Стоит вам только подумать, что неплохо было бы «запилить эту штуку», как окажется, что она уже кем-то сделана. Технология действительно очень популярна.
Поддержка Typescript
В React есть просто замечательная поддержка Typescript. Этот язык хорош хотя бы потому, что с его помощью можно писать типы, которые реально работают и реально помогают. И с Typescript вы сможете написать действительно сильную систему типов. По сути, сейчас Typescript — это стандарт, и этот стандарт есть в React. Безусловно, вы можете его не использовать, отдав предпочтение JavaScript. Однако без Typescript сделать что-то вменяемо сложное очень тяжело, ведь без строгих типов очень сложно работать. Так же тяжело предсказать, как будет вести себя ваше решение без строгих типов. Это сложно сделать даже с типами, а без них уж совсем грустно…
В общем, обязательно поработайте с Typescript, т. к. это очень нужная технология:
Парочка советов
Напоследок, хотелось бы дать несколько рекомендаций. Сегодня много говорят про ООП, и вы без труда найдёте огромное количество информации на эту тему. И везде вам в миллионный раз напишут про базовый класс Animal, а от него — про Cat и Dog. Или про базовый класс Car, а от него — Ferrari и BMW. И вот это вот всё вам будут показывать из раза в раз и из одного учебника в другой, в то время как ваш уровень разработчика при этом будет расти со скоростью улитки.
В то же самое время явно недостаточно внимания уделяется именно функциональному программированию, понимание которого реально прокачает ваши скиллы. Если вы действительно научитесь правильно и грамотно его использовать. Одна из самых адекватных книг на сегодняшний день находится в свободном доступе здесь и настойчиво рекомендуется к прочтению:
Почему сложно изучить функциональное программирование? Потому что очень часто книги перегружены математикой, академической сложностью и т. п. После этой же книги у вас всё получится, т. к. она просто замечательная.
Почему ещё функциональное программирование важно? Потому что, такая штука, как Redux, строится на базовых основах функционального программирования. И освоив хотя бы базовое функциональное программирование, вы действительно начнете писать код намного лучше. Главное — правильно всё понять.
Второй момент, о котором хотелось бы поговорить — это архитектура. Архитектура наше всё! Есть очень хорошая архитектурная парадигма, называемая Ducks. Это именно про то, как строить React- и Redux-приложения. Эта архитектура стоит того, чтобы её рекомендовать для практического применения.
Сама идея очень интересная и представляет собой набор строгих и в то же время классных правил, которые позволят сделать структуру вашего решения понятной и читаемой. Это не лонгрид, поэтому достаточно один раз прочитать и понять содержимое. После этого вы сможете нормально организовывать ваши приложения. Ссылка прилагается.
React.js для новичков в программировании: что это, как устроен и зачем нужен
Если стажёр или совсем зелёный джун попросят вас объяснить, что такое React.js, — просто покажите им эту статью.
OlyaSnow для Skillbox Media
В интернете полно руководств по React.js с названиями типа for dummies, for idiots — вроде бы для чайников. Но они по большей части негуманны и довольно сложны — человеку без знания JavaScript пользы не будет, только сильнее запутается и почувствует себя тем самым dummy. Поэтому мы решили максимально просто объяснить, что такое React.js, для чего он нужен, как попробовать и что понадобится для полноценной работы.
Что это ещё за новый тикток такой?
React.js — это JavaScript-библиотека от Facebook для удобной разработки интерфейсов, то есть внешней части сайтов и приложений, с которой взаимодействует пользователь.
Главная фишка React.js — компоненты и состояния.
Компонент — это кусочек кода, который отвечает за внешний вид одного из элементов сайта или приложения. Причём такие кусочки-компоненты могут быть вложенными.
Состояние — это вся информация об элементе, в том числе о его отображении. Например, состояние объекта «термометр» может описываться свойствами current_temperature, min и max.
Фанат Free Software Foundation, использует Linux и недолюбливает Windows. Пишет истории про кодинг и программы на Python. Влюблён в Lisp, но пока что не умеет на нём программировать.
Переводим на понятный язык: что такое компоненты и состояния
Пока звучит немного абстрактно и сложно, но на деле всё гораздо проще. Потренируемся на Цукерберге: в конце концов, это его детище — ему и отвечать.
На скриншоте три крупных компонента — пост в ленте Facebook, блок краткой информации и блок с выводом фотографий. В каждый из них входят более мелкие компоненты. Например, внутри поста есть текст, изображение, аватарка, имя автора, лайки, комментарии, различные информационные элементы. Внутри блока с фотографиями — отдельные фото, а внутри блока с краткой информацией — собственно, та самая краткая информация.
У каждого из этих компонентов есть состояния. Например, блок краткой информации будет по-разному выглядеть на мобильной и десктопной версии, у сердечка меняется цифра с лайками или цвет (если вы лайкнули или не лайкнули запись), а пост может обрезать текст, показывать содержимое полностью, меняться в зависимости от содержания. Ведь содержание поста — это тоже его состояние. Именно в этом проявляется гибкость и сила React.js: вы пишете компонент один раз, а потом просто передаёте ему разные состояния.
Посмотрите, как в зависимости от состояния меняется размер аватарки:
Уже получилось три состояния, но это не предел — ведь внешний вид аватарки различается в мобильной и десктопной версии, в приложении для Android, iOS и так далее. Отметим, что аватарка практически везде будет вложенной — в составе более крупных компонентов React.js, таких как пост, шапка, боковая панель или меню.
В React.js есть собственные средства для управления состояниями, но на практике в средних и крупных проектах чаще используют Redux — сторонний менеджер состояний. Он удобнее и лучше масштабируется.
Зачем нужен React.js, если есть HTML, JavaScript и CSS
Никаких огородов. React.js — это всего лишь способ в удобном виде представить код JavaScript и HTML, сделать его повторяемым и наглядным. Компоненты React.js пишут на особом языке — JSX, который выглядит как смесь JavaScript и HTML. Вот пример кода на этом языке:
JSX-код — то, что кажется HTML-тегом
, на самом деле элемент JSX
Код JSX довольно наглядный, и, кстати, то, что похоже на HTML, — вовсе не HTML 🙂 Звучит галлюциногенно, но это просто синтаксис JSX.
Браузеру понимать JSX не нужно — код React.js транслируется в JavaScript, с которым знаком любой уважающий себя браузер. Для этого написанное на React.js приложение прогоняют, например, через Babel — специальную программу-транспайлер, которая переводит разные представления (то есть языки вроде JSX) в JavaScript-код.
JSX-код JavaScript-код после Babel
На первый взгляд, механика странная. Кажется, это как если бы Достоевский придумал свой собственный язык, писал на нём книги, а потом их переводили бы на русский и только после этого издавали. И это была бы хорошая аналогия — но только если бы книги Достоевского переводились на русский автоматически, а писать на новом языке было бы в несколько раз быстрее.
У React.js есть три мощных преимущества: