Лучшие методы и приемы, с помощью которых ведется разработка на React


Содержание материала:

8 бесплатных обучалок фреймворку React.js

GitBook по React на русском

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

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

Курсы по React от Tyler McGinnis

От русского языка переходим к хардкорно-английскому, а именно видеокурсам, направленным на базовое знакомство с библиотекой React. 48 занятий (не переживайте, в сумме это 287 минут), посвящённых базовым принципам работы с библиотекой, рассмотрению шаблонных примеров и решению типовых задач. Можете использовать вместе с русским учебником для подтягивания знаний английского.

Hacking with React

Электронная бесплатная книга по React, которая поможет вам практически с нулевыми знаниями погрузиться в мир веб-разработки. Начинается она с настройки библиотеки, знакомит с JSX, а далее с помощью Hacking with React вы создадите свой первый проект. Но не надейтесь найти здесь всю интересующую вас информацию по React и уж тем более по разработке веба. Данная книга только для поверхностного ознакомления. Кстати, если вы любитель почитать книги вне дома и работы, можете за нескромные 10$ скачать автономную версию учебника.

Официальный туториал по React

Если вам нужна исчерпывающая информация, единственный способ найти её — обратиться к первоисточнику, то есть к официальной странице библиотеки. Почему данный туториал не на первом месте в данном списке? Всё просто. Дело в том, что, на мой личный взгляд, он несколько избыточен для новичка. Если у вас есть опыт работы с каким-либо ещё JS-фреймворком, то официальное представление удобно и понятно. Если вы только вчера постигли основы программирования, лучше загляните сюда попозже.

Фундаментальные курсы от Egghead

Платформа Egghead предлагает видеоуроки, среди которых есть как общий вводный курс по JavaScript, так и занятия по отдельным фреймворкам, будь то Angular или React. Последний курс является третьим по объему материала, и он включает в себя 5 бесплатных разделов.

Два из них посвящено общим вопросам создания мобильных веб-приложений, два — знакомству с Redux, и ещё один раздел поведает о вопросах роутинга в React. Так как платформа выпускает бесплатные материалы исключительно для «затравки», то на полноценные знания можете рассчитывать только при оплате подписки категории Pro. Однако для получения представления о React и Redux хватит и этих коротких занятий.

GtiBook по Redux на русском

Раз уж речь зашла о Redux, который хоть и не является частью React, но определённо обитает где-то в этой же экосистеме, то вашему вниманию представлен русскоязычный учебник по этой дисциплине. Автор тот же, но материал здесь рассчитан на более искушённую публику. Здесь вы прочитаете и про webpack, и про hot module replacement, чего не было в первой части. А в результате вы вместе с автором создадите приложение для сборки фотографий из сети Вконтакте по заданным параметрам.

React и Redux с Cabin

Это минимальный туториал по созданию приложения с нуля. Начинаете с установки React, его настройки, подключаете Redux, работаете с фильтрами и получаете готовый продукт. Информация очень схожа с русскоязычной версией, но здесь больший акцент делается на гибкость и функциональность. А ещё работать здесь будете с фотографиями из Instagram.

The React Convention

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

React.js практически с самого своего появления в 2013 году стал привлекать внимание массовой аудитории разработчиков. В 2020 году это официально один из двух наиболее популярных JavaScript-фреймворков (библиотек), а по некоторым данным и вовсе абсолютный лидер. В общем, если вы веб-разработчик, то вам строго рекомендуется хотя бы ознакомиться с React и его возможностями. И вам в помощь 8 абсолютно бесплатных туториалов.

GitBook по React на русском

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

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

Курсы по React от Tyler McGinnis

От русского языка переходим к хардкорно-английскому, а именно видеокурсам, направленным на базовое знакомство с библиотекой React. 48 занятий (не переживайте, в сумме это 287 минут), посвящённых базовым принципам работы с библиотекой, рассмотрению шаблонных примеров и решению типовых задач. Можете использовать вместе с русским учебником для подтягивания знаний английского.

Hacking with React

Электронная бесплатная книга по React, которая поможет вам практически с нулевыми знаниями погрузиться в мир веб-разработки. Начинается она с настройки библиотеки, знакомит с JSX, а далее с помощью Hacking with React вы создадите свой первый проект. Но не надейтесь найти здесь всю интересующую вас информацию по React и уж тем более по разработке веба. Данная книга только для поверхностного ознакомления. Кстати, если вы любитель почитать книги вне дома и работы, можете за нескромные 10$ скачать автономную версию учебника.

Официальный туториал по React

Если вам нужна исчерпывающая информация, единственный способ найти её — обратиться к первоисточнику, то есть к официальной странице библиотеки. Почему данный туториал не на первом месте в данном списке? Всё просто. Дело в том, что, на мой личный взгляд, он несколько избыточен для новичка. Если у вас есть опыт работы с каким-либо ещё JS-фреймворком, то официальное представление удобно и понятно. Если вы только вчера постигли основы программирования, лучше загляните сюда попозже.

Фундаментальные курсы от Egghead

Платформа Egghead предлагает видеоуроки, среди которых есть как общий вводный курс по JavaScript, так и занятия по отдельным фреймворкам, будь то Angular или React. Последний курс является третьим по объему материала, и он включает в себя 5 бесплатных разделов.

Два из них посвящено общим вопросам создания мобильных веб-приложений, два — знакомству с Redux, и ещё один раздел поведает о вопросах роутинга в React. Так как платформа выпускает бесплатные материалы исключительно для «затравки», то на полноценные знания можете рассчитывать только при оплате подписки категории Pro. Однако для получения представления о React и Redux хватит и этих коротких занятий.

GtiBook по Redux на русском

Раз уж речь зашла о Redux, который хоть и не является частью React, но определённо обитает где-то в этой же экосистеме, то вашему вниманию представлен русскоязычный учебник по этой дисциплине. Автор тот же, но материал здесь рассчитан на более искушённую публику. Здесь вы прочитаете и про webpack, и про hot module replacement, чего не было в первой части. А в результате вы вместе с автором создадите приложение для сборки фотографий из сети Вконтакте по заданным параметрам.

React и Redux с Cabin

Это минимальный туториал по созданию приложения с нуля. Начинаете с установки React, его настройки, подключаете Redux, работаете с фильтрами и получаете готовый продукт. Информация очень схожа с русскоязычной версией, но здесь больший акцент делается на гибкость и функциональность. А ещё работать здесь будете с фотографиями из Instagram.

The React Convention

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

Как стать React Native разработчиком в 2020 году

Спенсер Карли, эксперт по React Native и Meteor, составил пошаговый учебный план изучения React Native. Если вы хотите приобщиться к этой технологии, то его система послужит для вас прекрасным введением в кроссплатформенную разработку.

Если вы посмотрите результаты исследования The State of JavaScript 2020, то найдете массу интересных данных. Для меня было удивительно узнать, что много людей хотят изучать React Native.

Это здорово. В прошлом году я работал на полную ставку, обучая людей использовать React Native. Я учил всех: от команд разработчиков, стремящихся максимизировать свои существующие ресурсы и достигать успеха сразу на iOS и на Android, до людей в Африке и Индии, стремящихся улучшить качество жизни своего общества с помощью мобильных приложений.

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

Я очень много отвечаю на электронные письма. Вопрос, который возникает у людей чаще всего: какой лучший способ изучения React Native? Я им отвечаю, что лучшего способа не существует.

Советы по изучению React Native

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

Я понимаю, что мы все заняты, но несколько советов могут помочь учиться значительно быстрее.

Избегайте шума

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

Отлично! Мир технологий, в котором мы живем, постоянно растет и развивается.

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

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

Создайте план и придерживайтесь его.

Начните с малого

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

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

Изучите одну концепцию / один пакет / одну технику за раз.

Как только вы выясните, как это делается в sandbox, перенесите свои знания в реальное приложения. Вы будете счастливее, если будете четко понимать, что и почему происходит.

Расписание дня

Вы заняты. Я занят. Мы все заняты. Но у нас всегда есть время для важных вещей — встреча с боссом или инвестором, может быть, свидание.

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

Найдите 5 минут — я знаю, что вы можете. Забронируйте 5 минут в будние дни. Как только это будет удобно, увеличьте время до 10. Затем до 15 и так далее.

Очень важно записывать в календарь, когда и сколько вы будете учиться. Я учусь 30 минут до обеда и 15-30 минут после.

Составьте учебный план

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

Хватит бездумно читать технологические новости. Сейчас нет времени на это. Пришел момент составить план обучения.

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

Не будьте исключительно потребителем

Я считаю, что это то, с чем многие борются студенты моих курсов. Они смотрят видео – и все. Максимум — пишут тот код, о котором говорится в ролике.

Потребление и создание — это то, как можно достичь мастерства. Вы сталкиваетесь с проблемами, которые должны отлаживать, вы спрашиваете, почему что-то сделано определенным образом, и наращиваете мышечную память.

Не только потребляйте, но и создавайте.

Образовательные ресурсы по React Native

JavaScript

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

React

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

Я большой поклонник Дэна Абрамова. Он научит вас всему, что вам необходимо знать.

Если вы новичок в JSX, поможет это:

Я также постоянно ссылаюсь на различные методы жизненного цикла (lifecycle methods), потому что мой мозг отказывается их помнить:

React Native

Для начала изучите официальное руководство, особенно основы:

Как только вы закончите с этим, у меня для вас есть бесплатный курс. Он проведет вас через создание конвертера валют с помощью React Native:

Другим бесплатным ресурсом является React Native Express от Девина Аббота.

Эти ресурсы дадут вам прочную основу для дальнейшего развития.

Инструменты

Одна из самых трудных вещей в изучении чего-то нового — это убедиться, что вы настроили свою среду таким образом, чтобы могли действительно эффективно обучаться. Вот как это сделать.

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

Другое преимущество — они предоставляют вам множество API по умолчанию (например, доступ к камере, доступ к иконкам и многое другое), поэтому вам не нужно беспокоиться об их установке. Это просто работает.

Если вы никогда не работали с React Native, или даже если работали, я бы настоятельно рекомендовал попробовать этот ресурс. Именно с его помощью я создаю все свои приложения.

React Navigation

Ваше приложение, вероятно, будет работать не с одним экраном. Чтобы справиться с навигацией, выберите React Navigation. Он прост в использовании, и большинство обучающих программ, с которыми вы сталкиваетесь (как только вы закончите свой учебный план!), скорее всего, будут его использовать.

React Native Elements

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

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

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

Лучшие методы и приемы, с помощью которых ведется разработка на React

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

Честное предупреждение

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

Пока далеко от идеала, но вряд ли я сама продвинулась бы ещё дальше за этот промежуток времени.

Если вы из тех, кто желает сразу же окунуться в Реакт и полностью изучить его, включая сборку и необходимый инструментарий — это потрясающе! Начните с этого. А ещё я бы посоветовала этот великолепный курс от «Frontend Masters»: «Современные веб-приложения»

Разрушители легенд: спецвыпуск о практичности в Реакте

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

Миф #1: для Реакта необходимо использовать встроенные стили.

Неа! Отнюдь. Можно использовать CSS, как и обычно. Потратив уйму времени на рефакторинг гигантского объёма CSS-кода, я поняла, насколько это важно. Реакт относительно новый и ему пока не приходилось выдерживать испытание переделками дизайнов. Если бы мне пришлось заново продираться через тысячи строк встроенных стилей ради обновления padding и line-height , меня бы, как разработчика, это наверняка расстроило.

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

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

Миф #2: для атрибутов элемента придётся использовать JavaScript-синтаксис, который совсем не похож на HTML.

Ещё одна, на мой взгляд, приятная деталь в стиле преподавания Веса Боса, это то, как он постепенно подводит слушателя к более привычному подходу и реализации. Я иногда грешу излишне упрощенным и очевидным кодом, хотя и понимаю, что другим нравятся примеры поабстрактнее.

Он предлагает писать разметку с помощью JSX, который наиболее близок к нашему другу, традиционному HTML, так что лично для меня это гораздо понятнее. Поэтому вместо:

Каждый из них работает. Но когда наша разметка становится всё сложнее, я обнаружила, что знакомый HTML в виде JSX помогает моему пониманию. Но учтите, что даже с JSX есть незначительные различия.

Миф #3: чтобы опробовать Реакт, нужно понимание всех инструментов для сборки.


И действительно, для Реакта нужно использовать инструменты для сборки, поэтому, как правило, туториалы начинаются с этого. Но я бы посоветовала начинать с того, что если вы совсем новичок, вам следовало бы поковыряться на CodePen, JSBin или JSFiddle. Это — хороший способ повторять и усваивать уроки, прежде чем вкладывать кучу сил в совершенно новую технологию. С целью сделать первый шаг, в сегодняшних примерах я планирую использовать CodePen.

Топ-пост этого месяца:  Как изменить письмо при смене пароля из личного кабинета

Использование Реакта в типичных приложениях

В типичных приложениях на React 0.14+ прежде всего нам потребуется React и ReactDOM:

А затем вызов ReactDOM.render :

Использование Реакта в CodePen

В нашем случае просто выберем Реакт из выпадающего меню в панели JS (кликнете на иконку шестеренки вверху панели), а затем воспользуемся Babel в качестве компилятора.

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

Также, чтобы приступить к работе, потребуется отладчик для Реакта в виде расширения для Chrome или для Firefox, которые отлично подходят для отладки виртуальной DOM.

В случае CodePen можете выбрать «Отладочный режим», и это расширение автоматически определит Реакт:

Использование Реакта

Вот основные «кирпичики», которые нам нужно знать для дальнейшей работы:

Разберём это по частям. В последней строке мы находим id главного div ( main ) и отображаем в нём компонент , загружающий всё приложение Реакта. Чтобы увидеть созданный DOM-элемент, можно воспользоваться вкладкой «Реакт» в отладчике.

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

И последнее, что стоит отметить, это то, что вместо класса для элемента мы используем className . Это подвох, если вы привыкли писать HTML-разметку для веб-страниц. К счастью, это легко исправить. В этой документации отлично описан JSX и его синтаксис.

Следующим шагом будет расширение приложения с помощью компонента. Название для заголовка можно выбирать на свой вкус, но для наглядности, пусть оно отражает его роль в документе. Можно заметить, что если нам также понадобиться добавить элемент навигации, сделать это не составит труда. Вот такая же страница со стандартным бутстраповским рядом кнопок для компонента , и более семантичным h1 для нашего «Привет, мир!» вместо div :

Ничего сложного, правда? Всё равно, что строительные блоки любой веб-страницы. Мы создали навигацию с шапкой, и применили эти компоненты к компоненту приложения, который отображён в body. Единственным подвохом последнего примера может показаться непонятный дополнительный div вокруг и . Это потому, что мы должны всегда возвращать один элемент. У нас не может быть два сестринских элемента, вот и приходится оборачивать их в один div.

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

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

Обычные подозреваемые: переменные и обработка событий

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

И снова возьмём первое демо (давайте использовать его на протяжении всей статьи):

У компонента статьи в блоге весьма простая разметка, так что начнём с этого:

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

Мы хотим добавить оператор переменной внутрь вызова функции render, но прежде, чем вернуть разметку. Можно затем получить к ней доступ, вызвав переменную, в данном случае . Событие по клику — встроенный обработчик onClick , вероятно, противоречащий хорошему тону, к которому вы привыкли. Это имя мы выбрали сами, когда как render — метод фреймворка. Мы вызваем и пишем метод, хранимый как tryClick (произвольное имя) внутри того же компонента, к примеру:

Синтаксис для событий в Реакте начинается с «on» и использует верблюжийРегистр. Например:

  • click = onClick
  • mouseEnter = onMouseEnter
  • keyPress = onKeyPress

Здесь можно найти полный список всех поддерживаемых событий.

Объединение Реакта с другими библиотеками (в данном случае Greensock)

Для анимации я предпочитаю GSAP. В Реакте можно использовать и другие библиотеки, поэтому объеденим GSAP с Реактом и посмотрим, что будет.

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

Если вы привыкли к jQuery, то наверняка знакомы с выборкой элементов прямо из DOM. В этом случае, даже при анимировании DOM-элементов мы воспользуемся методом getDOMNode() Реакта, а не просто выберем их. А также вы заметите, что на самом деле мы вызываем функцию для анимации в компоненте приложения, и просто передаем её ниже нашим боксам. (Чтобы увидеть анимацию, возможно придётся нажать кнопку «Rerun»)

Возможно, вы привыкли обращаться к DOM через jQuery или ванильный JavaScript. Можно по-прежнему делать так, но здесь мы обращаемся к частям DOM через getDOMNode() и refs , в этой строке: var sq1 = this.refs.squares1.getDOMNode(); . Немного подробнее об этом написано в документациии Реакта.

У Реакта есть и другие способы добавить динамики вашим проектам — React-Motion Ченга Лу просто замечателен, еще стоит отметить React-GSAP-Enhancer.

Создание глобальной функции-хелпера

Можно даже писать функции-хелперы, к которым легко может обращаться множество компонентов. Для этих функций подходит та же точечная нотация, что и для this.functionName . Мы сохраняем функцию-хелпер (в этом примере на CodePen — прямо в начале файла, но в реальных приложениях это был бы отдельный файл) и объявляем каждую из них в качестве объекта, таким же способом, как и в структуре компонента.

Что-то вроде правильно отформатированной даты в первом демо со статьями блока могло бы выглядеть так:

И использовано вот так:

Настоящее дело: управление состоянием

Хорошо! Теперь, когда мы разобрались со строительными блоками, перейдём к одной из самых класссных вещей.

Реакт безусловно хорош в создании простых для понимания и небольших размеров компонентов, но где действительно проявляется его мощь — это управление состоянием для этих компонентов. Разберём это немного подробнее.

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

  1. Первое — это состояние. Оно — принадлежность компонента, а значит, его область видимости ограничена компонентом, и мы будем обращаться к нему так: . Можно обновить состояние, вызвав this.setState() .
  2. Второе касается того, как передавать (предназначенные только для чтение) данные от родителя к компоненту (вроде того, как приложение было родителем для header в первом примере). Мы зовём это props, как в слове «property» (свойство), и будем использовать его прямо в компоненте посредством . Дочерние элементы компонента не могут менять эти данные.

Каждый раз, когда мы меняем что-либо из этих двух вещей и наш компонент зависит от этого, Реакт будет перерисовывать те части вашего компонента, которые ему понадобится

Прелесть виртуальной DOM в том, что Реакт ищет только те ноды в DOM, которые нужно обновить.

Теперь я прочитала кучу всего про состояние, но думаю, Весу удалось выразиться яснее всех, поэтому я перефразирую его: Если вы привыкли к jQuery, то все данные у вас хранятся в DOM. Реакту это ни к чему, он хранит данные в объекте (состоянии), а затем отрисовывает вещи, в зависимости от объекта. Это как главный эталон, от которого всё зависит.

Props на практике

Для начала давайте просто опробуем this.props , добавив к компоненту Header , а после обратимся к нему в приложении.

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

Практика

Давайте немного разовьем это и поработаем с состояниями. Если мы в итоге собираемся менять this.state , нужно довести его до готовности. Для этого воспользуемся getInitialState , что позволит установить, какое состояние самое первое. Без этого мы не сможем добавить состояние.

Давайте просто менять фон в зависимости от выбора пользователя.

Важная часть этого, которую нужно учитывать — требуется функция handleChange

С нативными select-ами в обычном DOM ничего подобного бы не понадобилось, поскольку они автоматически обновлялись бы по выбору пользователей. В Реакте все состояния управляются компонентом, поэтому если нужно, чтобы input или select следил за изменениями, вам придется описать это в коде. Это означает, что за состояние отвечает компонент, а не пользователь.

На первый взгляд неясно, ради чего было столько возиться, но мы намеренно оставляем эти примеры маленькими. По-настоящему Реакт проявляет себя, когда дело доходит до больших сложностей. Как бы я ни любила jQuery (а я до сих пор люблю jQuery, это не то, что можно выразить булевой переменной true/false), вам не удастся уйти от довольно частой проверки при изменениях. В Реакте это решается тем, что эта необходимость устраняется благодаря простоте направления потока данных, по этой же причине его проще отслеживать в очень сложных приложениях.

Основные понятия состояния

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

Реакт показывает лучшие результаты работы, когда мы обновляем состояния и перерисовываем низкоуровневые компоненты. По сути мы хотим, чтобы эти компоненты оставались без состояния и брали данные из высокоуровневых компонентов. Компоненты на верхних уровнях иерархии (вроде нашего приложения) работают отлично именно тогда, когда запоминают состояния. Таким образом они управляют большей частью логики взаимодействия и передают состояние вниз с помощью props. Тем не менее, моменты, при которых у каждого компонента будет собственное состояние, не исключены. Однако, важно помнить, что соседние компоненты должны «общаться» не напрямую, а через родительский компонент.

Поэтому нам нужно по максимуму сохранять состояние в компоненте. На самом деле, вам не стоит беспокоиться о том, когда что-то перерисовывается. Всё, что вам важно учитывать — когда изменяется состояние, а об отображении Реакт позаботится сам.

Из такой идеологии разработки напрямую следует то, почему я также не советую использования props в getInitialState , и здесь можно подробнее почитать о том, почему это считается антипаттерном.

Мы не хотим слишком злоупотреблять состоянием. Хотя компонент и отображается довольно быстро, производительность может упасть, если слишком уж увлечься управлением состоянием. Можно обойти это, едва это станет проблемой, но лучше не попадать в такие ситуации, в принципе.

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

Информацию об элементе можно также получить с помощью так называемого ref. Использование Ref-ов осуществляется за счёт прикрепления их к любому компоненту. Затем они возвращаются во время вызова метода render() и после мы можем ссылаться на них снаружи render() . Это крайне полезно.

И снова возьмём первый пример на CodePen. Давайте на минутку задумаемся, как создаются эти новые статьи в блоге, и при этом применим ref-ы.

На каждом поле формы у нас есть ref, наподобие такого:

А на самом элементе формы мы вызываем:

который ссылается на функцию createPost выше функции render, и использует ref-ы для хранения информации из отправляемой формы:

а затем можно обратиться к нему в состоянии приложения с помощью this.props :

Это крайне удобно, поскольку теперь есть переменная post , с объектом, хранящим своё название (показано тут), дату, детали и т.д. Мы по-прежнему не храним ничего из этого в состоянии приложения, а только лишь дали приложению возможность это использовать. Рассмотрим это подробнее в следующем разделе, заодно с keys.

Этот пример я взяла в качестве способа поговорить о ref-ах в целом, но в приложениях из реальной жизни, вам, возможно, захочется рассмотреть что-то вроде form-serialize, чтобы упаковать поля формы для отправки аяксом.

Keys и использование Ref-ов

В последнем разделе мы создали способ хранить данные, собранные в форме, без передачи их куда-либо. Это потому, что в Реакте мы стремимся управлять этим состоянием в верхнем уровне иерархии. Для сохранения этого состояния, мы запускаем начальное состояние с пустым объектом. Вот где в итоге сохраняются данные из формы.

Затем возьмём функцию addPost. Заметьте, что управление находится здесь, а не в форме, даже хотя вызов происходит из формы. Мы даём состоянию временнУю метку, чтобы статьи оставались уникальными, а также настраиваем состояние для статей.

У каждого дочернего элемента в массиве должен быть уникальный key.prop . Это важно, поскольку при любой возможности Реакт всё равно будет повторно использовать существующий DOM. Реакт использует keys для отслеживания того, какие элементы в DOM он должен обновить. Он избавляет нас от перерисовки всех DOM-элементов, когда это требуется. Это улучшает производительность нашего приложения.

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

Можно видеть, что когда приложение отображается, мы используем Object.keys для создания нового массива. Затем берём .map() с функцией renderPost , которую создадим заранее. Для тех, кто не знаком с .map() , она полезна для создания массива из существующего массива, можете представить её в виде цикла.

Теперь давайте создадим эту самую функцию renderPost, которую только что вызвали. Мы передаём ключ в качестве параметра и назначаем его в качестве ключа, индекса, и создаём объект, который мы называем details, чтобы хранить информацию о состоянии статьи.

Может показаться странным, что мы передаём key и index , но внутри компонента невозможно обратиться к ключу prop , поэтому мы передаём ещё один ключ под названием index . Функция renderPost просто создаёт компонент для каждого элемента в массиве, с подробностями, переданными вниз по иерархии, к которым затем можно обратиться. Это довольно-таки круто, поскольку, если в нашем состоянии что-то обновится, это распространится вниз по иерархии и мы сможем управлять им в одном месте.

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

А теперь всё вместе

Теперь, когда с keys всё ясно, взглянем на минутку на общую картину. Мы рассмотрели getInitialState , componentDidMount и render , но в Реакте есть ещё один метод при подключении — componentWillMount . Он похож на componentDidMount , но выполняется прямо перед первым отображением компонента.

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

Заключение

О Реакте написано гораздо больше, а эта статья лишь начало. Надеюсь, это путешествие новичка позволило понять, как подготовиться к работе с Реакта. Эта статья растянулась аж на 20 страниц, но при этом мы даже не затронули массу других важных тем в связи с Реактом, включающих ES6, Browserify, Gulp, Webpack, несметное число альтернативных реализаций и многое другое.

Опять же, для дальнейшего изучения, я настоятельно рекомендую погрузиться в курс Веса Боса, и он предлагает 10%-скидку для читателей CSS-Tricks с кодом CSSTRICKS, а также посмотреть некоторые видео на Frontend Masters. У Майкла Джексона есть прекрасный учебный курс, на котором можно зарегистрироваться для участия (мы ждём его на Trulia в Сан-Франциско в марте!). Есть также отличный учебник Артемия Федосеева под названием «Основы Реакта» и этот список Артёма Сапегина, который стоит занести в закладки. Ну и не забывайте, что документация по Реакту тоже очень неплоха. Счастливого изучения!

Большое спасибо Майклу Джексону, Весу Босу и Вэл Хед за проверку этой статьи.

P.S. Это тоже может быть интересно:

Если вам понравилась статья, поделитесь ей!

Лучшие методы и приемы, с помощью которых ведется разработка на React

Коллекция материалов для изучения ES2015, React, Redux, Webpack, Babel и всего остального.

Думаешь, что подборка не полная? Присылай Pull Request с недостающими материалами!

ES2015: то, что действительно нужно

Перед тем, как вы утоните с головой в пучине вод React самое полезное, что вы можете сделать – изучить некоторые возможности ES2015, которыми вы будете пользоваться постоянно.

Блочные зоны видимости [RU] – const , let вместо var : в чём разница и где стоит быть осторожным.

Стрелочные функции [RU] – f => f вместо function (f) < return f; >и как не потерять контекст выполнения функции без использования метода bind .

Расширение литерала объекта [RU] – сокращённые записи свойств и методов в объектах.

Деструктуризация объектов и массивов [RU] – сокращённая запись обращения к свойствам.

Модульная система [RU] – основы использования нативных модулей.

Классы [RU] – работа с прототипами и наследованием в новом стандарте.

Интерполяция строк [RU] или как забыть про ‘hello, ‘ + userName + ‘!’ .

Новые методы массивов [EN]: Array.from , find , fill , includes и многие другие.

Обещание бургерной вечеринки [RU] – основы работы промисов на интересных примерах.

Онлайн песочница [EN] для изучения промисов с визуализацией алгоритма их выполнения. Есть несколько отличных примеров для демонстрации принципов работы и возможность написать код своими руками.

React: Основы основ

Статья из официальной документации Thinking in React [RU] про идеологию библиотеки, поможет понять, основные идеи лежащие в основе React.

React курс для начинающих [RU] – текстовый курс по основам React на русском языке. Научит только самым базовым вещам: работе с компонентами, lifecycle хуками, формами и валидацией пропсов с помощью PropTypes.

React.js for Stupid People [EN] – спасёт вас, если вы до сих пор ничего не поняли. Всё максимально доступно для самых чайников. Есть перевод на русский язык – React.js для глупых людей [RU].

Абсолютный минимум [EN], того что надо знать, чтобы начать работать с React.

Modern React with Redux [EN] – курс по основам React. Подойдёт для всех, кто только начинает своё знакомство с экосистемой React. В ходе первой части курса вы построите приложение для поиска и просмотра видео на YouTube (только React, никаких изысков), во второй части начнёте своё путешествие в страну Redux и создадите приложение с использованием Redux и Google Maps API.


React to the Future [EN] – презентация про то, чем действительно является React и, почему появление библиотеки – это большой шаг вперёд.

Объяснение принципов работы пропсов и состояний [EN] в React на примере Дарт Вейдера и повстанцев.

Подборка интерактивных примеров [EN], которые помогут разобраться в базовых идеях, лежащих в основе библиотеки.

Ныряем в React с головой

PureComponent в React [RU] – как и зачем применять, разбор отличий от Component.

Основы производительности React-приложений [RU] – как правильно работать с shouldComponentUpdate .

Основы работы с содержимым head [RU] в React-приложениях (в том числе и изоморфных) с помощью библиотеки react-helmet.

React Lifecycle Methods – how and when to use them [EN] – всё про жизненный цикл компонентов в React: подробно о том, как работает каждый метод + разбор ситуаций, в которых может понадобиться каждый хук.

Контекст в React [EN] – экспериментальный функционал, на который опираются многие популярные библиотеки (react-redux, react-intl).

Компоненты высшего порядка [EN] – руководство по работе с вашими собственными компонентами высшего порядка.

Десять мини-паттернов в React [EN]: разбор лучших практик при работе с компонентами.

Курс Advanced React and Redux [EN] расскажет про основы тестирования React компонентов, работу с аутентификацией на стороне клиента и сервера и компоненты высшего порядка.

Работа с AJAX запросами в React [EN] — где и когда загружать данные.

Работа с анимациями в React [EN] с помощью ReactCSSTransitionGroup. Если вы видели приложения на React с невероятно крутыми переходами между страницами, то посмотрите, как за пару минут можно прикрутить нечто подобное к себе в проект.

Робкое знакомство с Redux

Подборка 8 вещей, которые обязательно надо изучить в React, перед знакомством с Redux. [EN]

Когда я пойму, что готов к Redux?, перевод статьи разработчика о том, как понять, что наступило время освоить Redux.

Лучший способ ознакомиться с Redux — посмотреть курс от самого создателя (Дэна Абрамова) на egghead.io [EN] — 30 видео уроков, в которых покажут не только, как пользоваться библиотекой, но и объяснят принцип её работы (по сути, в ходе курса вы сами напишете свой мини-Redux) + в конце расскажут про связку с React с помощью компонентов из React-redux, объяснят, как создавать компоненты-контейнеры, единственная цель которых передавать данные в другие компоненты, а также, как использовать контексты при работе с React.

Сразу после курса бегите читать официальную документацию [EN]. Документация небольшая по объёму, но проясняет многие детали, которые не смог покрыть курс. Так же существует вольный перевод документации на русском языке [RU].

Статья Лучшие практики при работе с Redux [EN] расскажет, как не совершить типичных ошибок: где и как организовать бизнес логику приложения, как правильно работать с асинхронными операциями, как создать архитектуру проекта на Redux и многое другое.

mergeStateToProps [RU] — возможности React Redux, о которых вы не знали ( mapDispatchToProps на стероидах).

Идиоматический Redux [EN] – второй курс от создателя Redux (Дэна Абрамова) про продвинутые техники использования библиотеки.

Обзор экосистемы Redux [EN] — объяснение принципов сосуществования с React, React Router + паттерны работы с асинхронностью и аутентификацией.

Асинхронный Redux [EN] – разбор библиотек для работы с асинхронными операциями в Redux.

React Router 4 [RU] – простое объяснение отличий от предыдущих версий.

React router + browserHistory [EN] – как правильно использовать в продакшене.

Всё о React Router 4 [EN] – подробно о новых идеях заложенных в новой версии библиотеки и почему всё так кардинально изменилось.

Напиши свой React Router, или как работает четвёртая версия React Router изнутри [EN] – лучший способ понять принцип работы React Router.

Изоморфные приложения на React с React Router 4 версии [EN] – как организовать server-side рендеринг приложения.

React Router не всегда идеальное решение для организации роутинга. Facebook, например, вообще не использует его в своих проектах. Обзор альтернатив React Router [EN].

Как написать свой роутер [EN] – руководство по созданию собственного роутера, работающего с server-side рендерингом.

Анимированные переходы между страницами + React Router 4 [EN] – введение в использование ReactTransitionGroup.

Как избежать излишней сложности состояния приложения [RU] – руководство по правильной организации Redux-стора в больших приложениях.

Пять советов по работе с Redux в больших приложениях [EN] – продвинутое использование селекторов, техники разделения состояния, переиспользование редюсеров.

От и до: уроки по созданию полноценных приложений

Создаём клон Trello [RU]. Описывается разработка сайта c авторизацией и функционалом популярного. Помимо React используется Redux, PostgreSQL, Phoenix (фреймворк для Elixir, который в свою очередь работает на Erlang VM).

Собираем с нуля изоморфное приложение – пошаговое руководство по настройке сборки приложения на React с server-side рендерингом [RU]:

Создаём клон Реддита [EN] с помощью React и Firebase

Создаём клон Твиттера [EN] на React с использованием appbase в качестве бэкенда.

Создаём медиа-библиотеку с помощью React, Redux и Redux-saga [EN]:

Тестирование компонентов в React [EN]: как сделать это правильно и что нужно тестировать в первую очередь.

Видео курс от egghead.io [EN] про тестирование React приложения с Jest.

Webpack + React [RU] – как уменьшить бандл в 15 раз: подборка плагинов для экстремального сжатия.

Webpack 4 для начинающих [EN] – подробное введение в использование четвертой версии сборщика.

Видео курс [EN] по второй версии Webpack. Расскажут, как написать базовый конфиг, работать с лоадерами и плагинами, автоматически генерировать HTML, работать с React и Babel, стилями и другими файлами + подробно про настройку Webpack dev server для удобной горячей перезагрузки.

Собираем React приложение с помощью Webpack 2 и Babel [EN] – руководство по настройке самых необходимых инструментов.

Code Splitting [EN] в React приложении – разделение большого бандла на меньшие части для более быстрой загрузки приложения.

Горячая перезагрузка всего! [EN] Как использовать Hot Module Replacement в Webpack для перезагрузки фронтенда и бэкенда в изоморфном приложении.

Руководство по настройке редактора кода Atom [EN] для наиболее продуктивной работы с React приложениями.

Подборка интересных open source проектов [EN] сделанных на React. На их примере можно посмотреть, как правильно организовать код в своих проектах и подглядеть пару интересных инструментов для сборки.

Awesome React Talks [EN] – подборка лучший докладов с конференций, посвященных React, всё разделено по годам.

React за 30 минут [EN] – создайте свой клон библиотеки и посмотрите, как всё устроено изнутри.

Основы работы с recompose [EN] – библиотекой для расширения возможностей функциональных компонентов и их оптимизации.

Что нужно иметь и знать в фреймворке React джуну?

Хороший кандидат на должность Junior React Developer, по моему мнению, должен соответствовать следующему перечню требований:
1. Хорошее знание JavaScript. В React разработке используется ES6 и большинство экспериментальных фич еще не вошедших в стандарт.
2. Хорошее знание HTML и CSS. Кроссбраузерная верстка. Так же, хорошо иметь представление о том, что такое css-in-js.
3. Web APIs. Умение работать с объектной моделью документа(DOM) и все эти XMLHttpRequest, localstorage, cookie, history и прочее.
4. Хорошее знание API React. Вы должны хорошо знать React, знать его возможности, понимать основные концепции и уметь ответить на большинство типовых вопросов. Для этого достаточно хорошо изучить документацию, разобрать пару типовых проектов на github и попрактиковаться. Много полезной информации, приёмов и идей можно подчерпнуть из тематических статей и докладов. Так же, на просторах интернета можно найти подборки типовых вопросов, часто задаваемых на собеседованиях. В англоязычном сегменте их больше.
5. Redux. Уверенное знание API. API библиотеки до боли пост. Знать, что такое промежуточное ПО и зачем оно. Понимать базовые концепции архитектуры Flux. Все это есть в документации и многочисленных курсах.
6. Умение работать с менеджером пакетов npm на базовом уровне.
7. Node.js. Хотя бы уметь написать простейший express/koa сервер, который будет отдавать ваше приложение и статику.
8. Webpack. Базовые знания.
9. Умение работать с git. Хотя бы знать и уметь примерять команды: init, clone, add, commit, push, pull, merge, checkout.
10. Иммутабельность. Четкое понимание зачем это надо. Знание приемов иммутабельного изменения структур данных. Это есть в официальном туториале React.
11. Статическая типизация TypeScrpt/Flow. Для начала хватит самых основ и способности понимать чужой код.
12. Функциональное программирование. Хватит знаний полученных в процессе изучения JavaScript, а так же не помешает знать, что такое каррирование, чистые функции и рекурсия.
13. Базовые концепции ООП. Хватит знаний полученных в рамках изучения JavaScript.
14. Асинхронный код. Понимать как его правильно организовывать. Promise, async/await.
15. Сетевые протоколы передачи данных. Вполне хватит базовых знаний о http/https, о том, что такое заголовки и какие они бывают. Хорошо знать о том, что такое websocket.
16. За плечами должен быть хотя бы один учебный проект на React. Хватит типового тестового задания.
Примеры таких заданий: 1, 2, 3(сайт может быть не доступен на территории РФ, советую отрыть через VPN и посмотреть), 4, 5. Если подобного проекта у вас нет, то будьте готовы, что потенциальный работодатель предложит вам выполнить тестовое задание и только по его результату вас, может быть, пригласят на техническое интервью. Если напишите хорошо, вас скорей всего пригласят.
17. Желателен опыт создания типовых UI элементов. Например, чтобы не вызывало трудностей написать простой кастомный чекбокс. Куча примеров реализаций типовых элементов есть на codepen.

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

Курсы React Redux для разработки приложений 2020

Рано или поздно каждый из нас задумывается о том, чтобы пройти курсы и стать программистом. Только вот закрадывается вопрос: какие курсы выбрать, с какого языка стоить начать и сколько это стоит. Что такое JavaScript, React Redux и Node.js?

Если вы зашли на эту статью, то вы должны знать о том, что React – это популярная открытая JavaScript-библиотека для построения пользовательских интерфейсов, совместно разрабатываемая компаниями Facebook и Instagram, а Redux – одна из самых простых библиотек JavaScript, которая очень правильно решает различные вопросы с помощью предсказуемой модели состояний. Серьезный уклон в ней сделан на функциональном программировании и неизменяемых данных. Ее API очень простой в изучении. Это один из самых лучших контейнеров состояния для JavaScript-приложений в духе Flux и Elm.

Зачем вам нужны онлайн-курсы React Redux и в чем их преимущества:
— JavaScript входит в число самых востребованных языков, а React Redux – один из самых удобных инструментов для JavaScript;
— React используется именитыми компаниями: Netflix, Facebook, Instagram, WhatsApp и Yahoo;
— возможность получить доступ к выгодным предложениям от работодателей и участвовать в интересных проектах;
— удобный ритм обучения и возможность вернуться к пройденному материалу;
— онлайн-курсы постоянно пополняются новым контентом;
— это гораздо веселей и неформальней, чем обычные курсы.

Премиум курсы React Redux для разработки лучших приложений 2020

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

Современный React с Redux

Преподаватель: Стивен Грайдер, архитектор программных средств, JavaScript-разработчик
Стоимость: 180$
Количество студентов: 41 177+
Объем программы: 149 лекций; 26,5 часов
Уровень подготовки (требования для курса): наличие ПК или Mac

Чему вы научитесь?
— Создавать отличные одностраничные приложения с ReactJS и Redux
— Понимать возможности построения компонуемых компонентов
— Освоите основные понятия о структурировании Redux-приложений
— Изучите работу с набором инструментальных средств для React, в том числе NPM, Webpack, Babel и синтаксис ES6/ES2015 JavaScript

С выходом в свет Redux и React Native этот курс станет для вас одним из лучших способов реализовать проект, о котором вы давно мечтали, и стать более востребованным разработчиком. Если вы устали постоянно использовать только лишь jQuery, то этот курс именно то, что вам нужно.

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

На протяжении курса вы узнаете, как использовать язык разметки React, язык JSX, а также как чистить собственный JavaScript-код. Также вы научитесь разбивать сложные компоненты на более простые и научитесь создавать комплексные приложения, которые вы сможете масштабировать после освоения Redux.

Курс подходит как для новичков, так и для профессионалов, так что можете смело записываться на курс прямо сейчас.

Полный курс по React Native и Redux

Преподаватель: Стивен Грайдер, JavaScript-разработчик
Стоимость: 95$
Количество студентов: 21 583+
Объем программы: 162 лекции; 17 часов
Уровень подготовки (требования для курса): базовые знания JavaScript

Чему вы научитесь?
— Создавать реальные нативные приложения с помощью React Native
— Выучите терминологию и понятия о Redux
— Разберетесь с принципами и методиками проектирования на React
— Как создавать отличные повторно используемые компоненты
— Создавать прототипы и загружать свои приложения в App Store и Google Play
— Изучите шаблоны проектирования мобильных приложений, используемые опытными разработчиками

Если вы не хотите изучать Swift или разработку под Android, этот курс будет для вас хорошей альтернативой для разработки мобильных приложений под Android и iOS.

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

Не важно, новичок вы или матерый разработчик – пройдя этот курс, вы сможете выполнять рендеринг интерактивных компонентов, создавать уникальные и отзывчивые приложения на Android и iOS, освоите принцип интеграции с Firebase для аутентификации пользователей и изучите навигацию React Native.

React Redux React-Router: от новичка до обеспеченного профессионала

Преподаватель: Леонардо Даниель, Full-Stack-разработчик и тренер
Стоимость: 20$
Количество студентов: 8 316+
Объем программы: 60 лекции; 6 часов
Уровень подготовки (требования для курса): базовые знания HTML и JavaScript

Чему вы научитесь?
— Создавать отличные веб-приложения на ReactJS и Redux
— Освежите свои знания об ES6, продвинутом JavaScript, Redux и React
— Познакомитесь с инструментами, поддерживающими React: NPM, Webpack, Babel и ES6/ES2015

Курс особенный тем, что содержит огромное количество заданий и опросов. Такой практический и интерактивный подход с использованием видеоуроков, цветных анимаций и макетов позволит вам лучше освоить материал и прокачать свои навыки в реальных условиях. Всего за две недели вы сможете уверенно работать со связкой Redux-React.

Среди примеров приложений вы будете создавать приложение для списка дел, API для поиска на YouTube и в сервисе картинок Imgur.

По окончании курса вы будете иметь достаточно опыта и знаний, чтобы претендовать на вакансию Front-End-разработчика с высокой зарплатой.

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

Не теряйте ни минуты и выбирайте тот курс, который вам придется по душе. Пускай вас не пугают сложные термины – если есть желание обучиться, можно добиться любой цели. Начните прямо сегодня!

Подробное руководство по React.js в 2020 году

Эта статья была впервые опубликована в 2015 году, на данный момент она дополнена под версию React 16.3 и ее особенности.

Компоненты (Components) — «строительные блоки» в React. Если исходить из контекста Angular, у компонентов много общего с Directives. Если вы используете другой контекст, то это, по существу, виджеты или модули.

Вы можете думать о компонентах как о коллекции HTML, CSS, JS и некоторых «внутренних данных», специфичных для этого компонента. Мне нравится сравнение компонентов с Kolaches в веб. В них есть все, что нужно, запакованное в восхитительный компонуемый сверток.

Компоненты определяются на «чистом» (pure) JavaScript или они могут быть определены на том, что команда React называет “JSX”. Если вы решите использовать JSX (который, вы, вероятнее всего, будете использовать, и это стандартно — мы также будем его использовать для нашего туториала), вам понадобится какой-то этап компиляции, чтобы преобразовать JSX в JavaScript. Но об этом мы поговорим позже.

Что делает React настолько удобным для создания пользовательских интерфейсов (UI), так это то, что данные могут быть получены либо из родительского компонента, либо содержатся в самом компоненте. Прежде чем перейти к коду, давайте удостоверимся, что у нас есть понимание уровня компонентов на уровне высшего порядка.

Выше представлено изображение моего профиля Twitter. Если мы собираемся воссоздать эту страницу на React, мы разделили бы различные секции на разные компоненты (они выделены). Обратите внимание, что компоненты могут иметь вложенные компоненты внутри себя.

Мы могли бы назвать компонент слева (розовый) UserInfo . Внутри UserInfo компонента у нас есть еще один компонент (оранжевый), который мы могли бы назвать UserImages -компонентом.

Путь, по которому «работают» эти родительско-дочерние отношения — это наш UserInfo -компонент, или родительский компонент, в котором «живет» «состояние» (“state”) данных для него самого (UserInfo), так и для дочернего компонента UserImages .

Если мы хотим использовать какую-то часть данных родительского компонента в дочернем компоненте, то мы передадим эти данные дочернему компоненту в качестве атрибута.

В этом примере мы передаем UserImages-компоненту все изображения, которые есть у пользователя (которые в настоящее время «живут» в UserInfo -компоненте).

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

Эта иерархия parent / child делает управление нашими данными достаточно простым, потому что мы точно знаем, где находятся наши данные и мы не должны манипулировать ими в другом месте.

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

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

На этом этапе вы должны понимать на «очень высоком уровне», как работает React. Теперь давайте перейдем к коду.

Создание первого компонента (JSX, Virtual DOM, render, ReactDOM.render)

Продолжим и напишем наш первый компонент на React.

Чтобы создать компонент на React, будем использовать ES6-класс. Если вы не знакомы с Классами, вы можете продолжить чтение, или узнать о них больше из других источников. (например, здесь — прим.переводчика)

Обратите внимание, что единственный метод в нашем классе — это render . Он является обязательным.

Причина — визуализация (render), описывающая пользовательский интерфейс (UI) нашего компонента. Таким образом, в этом примере текст, который будет отображаться на экране, где «рендерится» этот компонент, — Hello World!

Теперь изучим, что делает ReactDOM.

ReactDOM.render принимает два аргумента. Первый — компонент, который нужно отобразить, а второй — DOM-узел, где необходимо отобразить компонент.

Обратите внимание, мы используем ReactDOM.render , а не React.render . Это изменение в версии React.14, оно произведено, чтобы сделать React более «модульным». Это важно, если вы предполагаете, что React может отображать больше, чем просто DOM-элемент.

В примере выше мы просим React взять наш компонент HelloWorld и выполнить его render в элементе с ID root .

Из-за родительских / дочерних отношений React, о которых мы говорили ранее, обычно использовать ReactDOM.render потребуется только единожды, потому что рендер «самого» родительского компонента уже предполагает отображение всех его вложенных дочерних компонентов.

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

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

«HTML», который вы пишете в методе render, на самом деле не HTML, это то, что в React называется «JSX». JSX просто позволяет нам писать HTML-подобный синтаксис, который в конечном итоге преобразуется в легковесные объекты JavaScript. После чего уже React может принимать эти объекты JavaScript и от них формировать «виртуальный DOM» или представление JavaScript реального DOM («виртуальный DOM» — «легковесная копия реального DOM» — прим. переводчика). Это создает ситуацию с выигрышем, когда вы получаете доступность шаблонов с мощью JavaScript.


В примере ниже то, во что в итоге будет скомпилирован ваш JSX.

Теперь вы можете отказаться от фазы преобразования JSX -> JS и написать свои компоненты на React, например, как в коде выше. Но, как вы можете себе представить, это было бы довольно сложно. Я не знаю никого, кто не использует JSX. Для получения дополнительной информации о компиляции JSX посмотрите статьи на тему React Elements vs React Components.

До этого момента мы не выделяли особо важность этой новой виртуальной парадигмы DOM, в которую мы «запрыгиваем».

Причина, по которой команда React пошла этим путем, в том, что так как виртуальный DOM — это представление реального DOM, React может отслеживать разницу между актуальной виртуальной копией DOM, (вычисленной после изменений данных), и предыдущей, (вычисляется перед изменениями данных). Затем React изолирует изменения между старым и новым виртуальным DOM, после чего обновляет реальный DOM с необходимыми изменениями.

В более «дилетантских» выражениях, поскольку манипулирование реальным DOM происходит медленно («является более дорогостоящей операцией» — прим. переводчика), React способен минимизировать манипуляции с реальным DOM, отслеживая виртуальную копию DOM и обновляя реальный DOM только при необходимости и только с нужными изменениями.

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

Процесс выглядит примерно так:

Некоторое пользовательское событие, которое изменяет состояние вашего приложения → ре-рендер виртуального DOM → Различие копий предыдущего виртуального DOM с новым → Обновление только реального DOM и только с необходимыми изменениями.

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

Во второй части я расскажу о Webpack и Babel для этого преобразования.

Давайте посмотрим на наш чек-лист «Самых важных частей React» и разберемся, где мы сейчас:

Мы идем в хорошем темпе. Все, что выделено «галочкой» — это то, что мы уже прошли, и вы сможете, по крайней мере, объяснить, как конкретно эти компоненты вписываются в экосистему React.

Добавление состояния к компоненту (state)

Далее по списку state . Ранее мы говорили о том, как сложно управлять UI, потому что они обычно имеют множество разных состояний. Это случай, когда React действительно начинает «светиться».

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

Возвращаясь к примеру Twitter, UserInfo -компонент, (выделенный розовым цветом), отвечает за управление состоянием (или данными) информации пользователя.

Если другому компоненту тоже нужно это состояние / данные, но это состояние не было прямым дочерним UserInfo , тогда вы создали бы другой компонент, который был бы прямым родителем UserInfo и другого компонента (или обоих компонентов, которым требуется это состояние). Затем вы «прокинете» состояние вниз в качестве props в дочерние компоненты. Другими словами, у вас есть мульти-компонентная иерархия, где общий родительский компонент должен управлять состоянием и передавать его дочерним компонентам через props.

Рассмотрим примерный компонент, который использует свой state:

В этом примере мы использовали новый синтаксис. Первое, что вы заметите, — это метод конструктора. Из определения выше, метод конструктора — «способ установки состояния компонента» (начального состояния — прим.переводчика). Другими словами, любые данные, которые вы помещаете в this.state внутри конструктора, будут частью состояния этого компонента.

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

Последнее о чем можно поговорить про state в том, что нашему компоненту нужна возможность изменять собственное внутреннее состояние. Мы делаем это с помощью метода, который называется setState. Помните ранее, когда мы говорили о ре-рендеринге виртуального DOM при каждом изменении данных?

Сигнал об уведомлении нашего приложения о том, что некоторые данные изменились → Ре-рендер виртуального DOM → Разница (diff) между предыдущей виртуальной копией DOM с актуальной → Обновление только реального DOM с необходимыми изменениями.

Этот «сигнал об уведомлении нашего приложения о том, что некоторые данные изменились» на самом деле просто setState. Всякий раз, когда вызывается setState, виртуальный DOM повторно ре-рендерится, выполняется алгоритм «разницы», а реальный DOM обновляется с необходимыми изменениями.

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

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

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

Когда вызывается handleChange , он будет вызывать setState , чтобы изменить наш username на значение, которое было введено в поле ввода (e.target.value) (предпочтительнее использовать e.currentTarget.value — прим.переводчика).

Помните, всякий раз, когда вызывается setState , React создает новый виртуальный DOM, выполняет «diff», а затем обновляет реальный DOM.

Теперь давайте посмотрим на наш render-метод. Мы добавили новую строку, содержащую поле ввода. Тип поля ввода, очевидно, будет text . Значение будет значением нашего username (имя пользователя), которое изначально было определено в конструкторе и будет обновлено в методе handleChange .

Обратите внимание, что есть новый атрибут, с которым вы, возможно, разньше не сталкивались — это onChange .

Атрибут onChange является «вещью из React», и он будет вызывать любой метод, который вы указываете, каждый раз, когда изменяется значение в поле ввода — в этом случае указанным нами методом был handleChange . (по аналогии с onchange в нативном javascript — прим.переводчика)

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

Пользователь вводит информацию в поле ввода (текст инпут) → вызывается handleChange → состояние нашего компонента меняется на новое значение → React повторно отображается виртуальную DOM → React считывает изменения → реальный DOM обновляется.

Позже, когда мы рассмотрим props, мы увидим несколько более сложных вариантов использования состояния.

А пока, мы идем дальше! Если вы не можете объяснить то, что выделено «галочкой», прочитайте этот раздел еще раз.

Один совет по ДЕЙСТВИТЕЛЬНОМУ изучению React: не позволяйте себе пассивно читать, давая себе ложное чувство понимания материала (почему только React? Это работает везде — прим.переводчика).

Перейдите в песочницу CodeSandbox и попробуйте воссоздать примеры выше (или сделайте свои компоненты), не подглядывая в туториал. Это единственный способ начать обучение React. Это касается и этого урока, и следующего.

Получение state от родительского компонента (props, propTypes, getDefaultProps)

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

Это позволяет архитектуре React оставаться довольно простой. Управляйте state в высшем родительском компоненте, который нуждается в использовании специфических данных и, если у него есть потомок, которому также необходимы эти данные, «прокиньте» данные в качестве props-аргументов.

Вот очень простой пример использования props.

Обратите внимание, что в строке 9 мы имеем параметр name со значением «Tyler». Теперь в нашем компоненте мы можем использовать , чтобы получить «Tyler».

Давайте рассмотрим более продвинутый пример. Теперь у нас будет два компонента. Один — родитель, другой — потомок. Родитель должен отслеживать состояние и передавать часть этого состояния дальше до ребенка в качестве props.

Разберем родительский компонент.

В этом компоненте не так много нового. У нас есть изначальное состояние (initial state, задано в конструкторе) и мы передаем его часть другому компоненту.

Большая часть нового кода содержится в дочернем компоненте, поэтому давайте остановимся на нем более подробно.

Помните, что код, который возвращает метод render — это представление того, как должен выглядеть реальный DOM. Если вы не знакомы с Array.prototype.map, этот код может показаться вам немного странным. Все, что делает метод .map — создает новый массив, вызывает коллбек для каждого элемента массива и заполняет новый массив результатом вызова функции-коллбека для каждого элемента.

Обратите внимание, что мы сделали новый массив и добавили теги элемента списка к каждому элементу из оригинального массива.

Что примечательно касательно .map, этот метод отлично вписывается в React (и идет «из коробки» в JavaScript). Таким образом, в нашем дочернем компоненте выше мы просто обернули имена в тэг
и сохраняем результат в переменной listItems.

Затем метод render возвращает неупорядоченный список ( ) со всеми нашими друзьями.

Рассмотрим еще пример, прежде чем закончим с props. Важно понимать, что везде, где есть данные, ими можно там же манипулировать. Это упрощает рассуждение о данных. Все методы getter / setter для определенной части данных всегда будут в том же компоненте, где были определены эти данные. Если вам нужно манипулировать какой-то частью данных вне того, где «живут» данные, вы передадите метод getter / setter в этот компонент в качестве props. Давайте посмотрим на такой пример.

Обратите внимание, что в нашем методе addFriend мы добавили новый способ вызова setState. Вместо того, чтобы передавать объект, мы передаем ему функцию, которая затем передается state. Всякий раз, когда вы устанавливаете новое состояние своего компонента на основе предыдущего, (как мы это делаем с нашим массивом друзей), вы хотите передать setState функцию, которая принимает текущее состояние и возвращает данные для слияния с новым состоянием.

Вы заметите, что приведенный выше код в основном такой же, как в предыдущем примере, за исключением того, что теперь у нас есть возможность добавить имя в список наших друзей. Обратите внимание, как создан новый компонент AddFriend, который управляет «новым другом», которого мы собираемся добавить.

Причина в том, что родительский компонент (FriendContainer) не знает (и не заботится) о новом знакомом, которого вы добавляете, он заботится обо всех ваших друзьях в целом (о массиве друзей).

Однако, поскольку мы придерживаемся правила манипулировать данными только из компонента, «которому не все равно», мы передали метод addFriend в наш компонент AddFriend в качестве props и мы вызываем его с new friend после вызова handleAddNew.

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

Прежде чем мы пойдем дальше, хочу рассказать об еще двух возможностях React в отношении props. Это propTypes и defaultProps. Здесь я не буду вдаваться в подробности, потому что они довольно просты.

prop-types позволяют контролировать наличие или типы определенных props, переданных дочернему компоненту. С помощью propTypes вы можете указать, что требуются определенные props или что props являются определенным типом.

Начиная с React.15, PropTypes больше не включается в пакет React. Вам нужно будет установить их отдельно, запустив npm install prop-types .

defaultProps позволяют указать значение по умолчанию (или бэкап) для определенных props только в том случае, если эти props никогда не передаются в компонент.

Я изменил наши компоненты и теперь, используя propTypes, мы ожидаем что свойство addFriend будет функцией и что оно (свойство) будет передано в компонент AddFriend. Также, используя defaultProps, мы указали, что если массив друзей не передается компоненту ShowList, он будет пустым по умолчанию.

Итак, мы на последнем участке первой части.

Давайте посмотрим, что у нас осталось по плану.

Мы близки к финалу!

Жизненный цикл компонента (Component LifeCycle)

У каждого компонента, который вы создаете, будут свои события жизненного цикла, которые могут быть полезны для разных манипуляций. Например, если мы хотим сделать запрос AJAX для первого рендера и получить (fetch) данные, в каком lifecycle-методе это лучше сделать? Или, если бы мы захотели запустить какую-то логику, когда props изменились, как мы это сделаем?

Различные события жизненного цикла — ответы на оба вопроса.

Рассмотрим их ниже.

componentDidMount — вызывается один раз после первого рендера. К этому моменту компонент уже есть в DOM. Если вам нужно обратиться к виртуальному DOM — к вашим услугам this.getDOMNode(). Так же это лучший метод жизненного цикла компонента для работы с запросами на сервер.

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

getDerivedStateFromProps — иногда вам нужно обновить состояние вашего компонента на основе «пришедших» props. Это метод жизненного цикла, в котором это можно сделать. Он будет принимать props и state, а возвращаемый объект будет объединен с текущим состоянием.

Если вы дошли до этого момента, это отличная работа! Я надеюсь, что это руководство было полезно для вас и теперь вы лучше понимаете React.

Для получения более подробной информации обратитесь к курсу Tyler McGinis React Fundamentals.

Скринкаст по React.js

React.js — одна из самых популярных библиотек для создания сложных Frontend-приложений.

Однако, успешная разработка на нём требует хорошего понимания концепций, на которых он построен.

В этом скринкасте мы:

  • Познакомимся с основными понятиями и внутренним устройством React.js.
  • Разберёмся с тем, как создавать компоненты на React.js.
  • Разберём ряд подводных камней, на которые часто наступают начинающие React-разработчики.

Одна из главных особенностей React.js — свобода действий, существует огромное количество подходов к построению приложений с его помощью (redux, mobx и другие).

Они не являются частью собственно React.js, а представляют собой архитектурные надстройки и также постоянно развиваются. Мы осваиваем их на Основном и Продвинутом онлайн-курсах по React.JS.

Автор этого скринкаста – Роман Якобчук, с небольшой помощью в плане организации материала от Ильи Кантора.

Вы также можете скачать все скринкасты в виде архива с видео-файлами.

Разработка на React. Установка

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

React-зависимости

React – является обычной js-библиотекой, которую возможно подключить через тег

Заменить <версия react>на нужную (либо новейшую) версию React. Нужно учесть, что библиотека была разбита на два файла после выхода 14 версии.

Почему стоит использовать React JS при разработке приложений

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

Библиотека React была впервые выпущена компанией Facebook в 2013 году. Для того, чтобы понять, насколько популярной эта технология стала за прошедшее время, давайте обратимся к опросу разработчиков, проведенному сайтом StackOverflow в этом году. Более 50 000 разработчиков поделились информацией о своей работе и профессиональных предпочтениях. Помимо более или менее предсказуемых результатов, которые обрисовывают состоянии IT-индустрии на сегодняшний день, есть также и кое-что любопытное относительно непосредственно React. Эта библиотека стала одной из самых любимых и востребованных технологий, а также самой трендовой технологией на StackOverflow:

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

Что такое React JS. Краткий обзор

React это библиотека для создания пользовательских интерфейсов. Одной из ее отличительных особенностей является возможность использовать JSX, язык программирования с близким к HTML синтаксисом, который компилируется в JavaScript. Разработчики могут добиваться высокой производительности приложений с помощью Virtual DOM. C React вы можете создавать изоморфные приложения, которые помогут вам избавиться от неприятной ситуации, когда пользователь с нетерпением ожидает, когда же наконец завершится загрузка данных и на экране его компьютера наконец появится что-то помимо анимации загрузки. Созданные компоненты могут быть с легкостью изменены и использованы заново в новых проектах. Высокий процент переиспользования кода повышает покрываемость тестами, что, в свою очередь, приводит к более высокому уровню контроля качества. Используя React Native мобильные приложения для Android и iOS, используя опыт JavaScript и React разработки.

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

Какую пользу из React может извлечь заказчик?
Итак, давайте разбираться:

  • Virtual DOM может повысить производительность высоконагруженных приложений, что может снизить вероятность возникновения возможных неудобств и улучшает пользовательский опыт;
  • Использование изоморфного подхода помогает производить рендеринг страниц быстрее, тем самым позволяя пользователям чувствовать себя более комфортно во время работы с вашим приложением. Поисковые системы индексируют такие страницы лучше. Поскольку один и тот же код может быть использован как в клиентской, так и в серверной части приложения, нет необходимости в дублировании одного и того же функционала. В результате время разработки и затраты снижаются;
  • Благодаря переиспользованию кода стало гораздо проще создавать мобильные приложения. Код, который был написан во время создания сайта, может быть снова использован для создания мобильного приложения. Если вы планируете использовать не только сайт, но и мобильное приложение, нет необходимости нанимать две большие команды разработчиков.

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

  1. Улучшения пользовательского опыта ваших сайтов и приложений
  2. Увеличения скорости разработки
  3. Использования наиболее трендовых технологий разработки

Изоморфные приложения. Поймать двух зайцев

Когда мы говорим об изоморфных приложениях или об изоморфном JavaScript, мы имеем в виду, что мы можем использовать один и тот же код как в серверной, так и в клиентской части приложения. Когда пользователь открывает сайт в своем браузере, содержимое страницы должно быть загружено с сервера. В случае с SPA-приложениями (Single Page Application), это может занять некоторое время. Во время загрузки пользователи видят либо пустую страницу, либо анимацию загрузки. Учитывая, что по современным стандартам ожидание в течение более чем двух секунд может быть весьма заметным неудобством для пользователя, сокращение времени загрузки может оказаться крайне важным. А вот еще одна весомая проблема: поисковые машины не индексируют такие страницы так хорошо, как нам хотелось бы. Исполнение JavaScript кода на стороне сервера помогает исправить подобные проблемы. Если вы создаете изоморфные приложения, вы можете извлечь заметную выгоду, производя рендеринг на стороне сервера. После загрузки страницы вы все еще можете продолжать рендеринг компонентов. Такая возможность рендеринга страниц как на сервере, так и на клиенте приводит к заметным преимуществам, таким как возможность лучшего индексирования страниц поисковыми машинами и улучшение пользовательского опыта. Более того, такой подход позволяет снизить время, затрачиваемое на разработку. При использовании некоторых современных фреймворков, вы должны создавать компоненты, которые должны рендериться на стороне сервера, а также шаблоны для клиентской стороны приложения. React разработчики могут создавать компоненты, которые работают на обеих сторонах.

Virtual DOM. Просто потому, что так быстрее

Document Object Model, или DOM, — это способ представления и взаимодействия с объектами в HTML, XHTML и XML документах. Согласно этой модели, каждый такой документ представляет собой иерархическое дерево элементов, называемое DOM-деревом. Используя специальные методы, мы можем получит доступ к определенным элементам нашего документа и изменять их так, как мы хотим. Когда мы создаем динамичную интерактивную веб-страницу, мы хотим, чтобы DOM обновлялся так быстро, как это возможно после изменения состояния определенного элемента. Для данной задачи некоторые фреймворки используют прием, который называется «dirty checking» и заключается в регулярном опросе состояния документа и проверке изменений в структуре данных. Как вы можете догадаться, подобная задача может стать самой настоящей головной болью в случае высоконагруженных приложений. Virtual DOM, в свою очередь, хранится в памяти. Именно поэтому в момент, когда «настоящий» DOM меняется, React может изменять Virtual DOM в мгновение ока. React «собирает» такие изменения сравнивает их с состоянием DOM, а затем перерисовывает изменившиеся компоненты.

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

Как переиспользование кода помогает разрабатывать и тестировать приложения более эффективно

Мобильные приложения имеют некоторые преимущества по сравнению с сайтами. Их можно использовать без соединения с Интернетом. Они имеют доступ к таким возможностям устройства, как всплывающие уведомления. Также они позволяют быть в контакте с вашими пользователями в режиме 24/7. React Native — это фреймворк, который позволяет вам создавать мобильные приложения, используя React. Логика приложения пишется на JavaScript, таким образом, программисту не нужно отказываться от привычных приемов веб-разработчика. Все что нужно — научиться писать специфичный для устройства код, который адаптирует компоненты, ранее созданные для веб-сайта к новой среде обитания.

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

  • В случае с нативными приложениями вы можете надеяться на довольно высокую производительность, но стоимость разработки будет довольно высокой;
  • Если вы предпочтете фреймворки, которые позволяют использовать HTML5, CSS3 и JavaScript, например PhoneGap, вы можете снизить стоимость. Но в этом случае уровень производиетльности будет гораздо ниже;
  • В случае React вы можете достигнуть уровня производительности, сравнимого с нативными приложениями. При этом стоимость разработки сравнима с предыдущим примером.

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

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

Заключение

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

Топ-пост этого месяца:  Что такое Яндекс Директ, для чего он нужен и как работает
Добавить комментарий