React ES6 полезная информация для разработчиков, новые функции, ключевые слова


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

Рефакторинг react из ES5 в ES6

Давайте посмотрим на некоторые из этих новых возможностей:

  • Классы
  • Расширения объектых литералов
  • Block-scoped binding constructs (let + const)
  • Property Initializers
  • Стрелочные функции
  • Template Strings
  • Desconstructing и Spread аттрибуты
  • Генераторы
  • Data Structures (Map, Set, WeakMap, WeakSet)
  • . и многое другое

Транспайлеры

Мы будем мспользовать ES6 с транспайлерами для конвертирования нашего кода в ES5-стандарт, поскольку код, написанный на ES6, современным браузерам «не по зубам». Вот несколько популярных транспайлеров: Traceur, Babel.

Babel

Babel был создан Себастьяном МакКензи at the fall of 2014. Babel поддерживает JSX, ES6 и ES7. It is widely used including Facebook.

Компании, использующие Babel в своих проектах

Классы

ES6 classes provide you with a consize way of writing React components:

Instead of using the React.createClass method to define a component, we can define a bonafide ES6 class that extends React.Component

Property Initializers

In ES6 property types and defaults are static properties of its class.

Начальное состояние компонента может быть определено с помощью ES6.

Стрелочные функции

Метод React.createClass used to perform some extra binding work on your component’s instance methods to make sure that, inside them, the this keyword would refer to the instance of the component in question.

Объединив две фичи ES6 — стрелочные функции и property initializers – opt-in binding to the component instance becomes a easier:

Dynamic property names & template strings

One of the enhancements to object literals includes the ability to assign to a derived property name. We might have originally done something like this to set a piece of state:

Now, we have the ability to construct objects whose property names are determined by a JavaScript expression at runtime. Here, we use a template string to determine which property to set on state:

Destructuring & spread attributes

Often when composing components, we might want to pass down most of a parent component’s props to a child component, but not all of them. In combining ES6+ destructuring with JSX spread attributes, this becomes easier:

React Native — это возможность быть быстрым

Разработчик мобильного приложения GeekBrains Даниил Скрипник провел в офисе Mail.Ru Group открытый воркшоп по работе с фреймворком React Native. Участники за пару часов самостоятельно написали мессенджер и увидели, как технология позволяет сэкономить время и усилия программиста.

Мы попросили Даниила рассказать, как он начал работать на React Native и почему он хочет научить этой технологии коллег.

Сначала я ушел из логистики и за полгода переучился на frontend-разработчика

Программированием я занялся три года назад. До этого я жил в Сербии и работал совсем в другой сфере. У меня было два образования – экономическое и транспортный менеджмент. После вуза работал в логистической компании операционным менеджером по морским и авиаперевозкам. Но в какой-то момент вспомнил свои детские увлечения и решил сменить профессиональную сферу на IT.

Записался на онлайн-курсы в Школу-партнер Micrоsoft, занимался почти сутками и за 6 месяцев освоил тот минимум, с которым можно было найти работу или стажировку front-end разработчика: HTML&CSS, HTML5&CSS3, JavaScript, Bootstrap, JQuery, Angular.JS. Прошел стажировку в нескольких компаниях, получил от каждой из них предложения по работе. Но они работали с устаревшим стеком технологий и мне это было неинтересно.

Попробовал React Native и начал писать приложения

В результате я устроился на работу в Alpha Design. Компания занимается разработкой и дизайном для Apple, Rakuten, Amazon. Сначала я занимался только frontend-разработкой. Но в какой-то момент у нас появился заказчик – владелец глянцевого журнала, который хотел создать приложение для поиска и покупки одежды. По сути, это была соцсеть, похожая на Instagram, где ты листаешь фотографии с одеждой и можешь купить то, что тебе понравилось. В Alpha Design не было мобильных разработчиков и мы решили делать кроссплатформенное приложение на React Native.

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

Мне понравилось, как быстро с помощью React Native можно сделать что-то осмысленное, продукт, который сразу начинает работать. Front-end в сравнении c мобильной разработкой показался мне более долгим и ограниченным. Меня впечатлила скорость, с которой я мог писать приложения на несколько платформ с нуля.

Написал три приложения за год

Я начал искать работу в этом направлении. Написал в чат проекта Hexlet, что умею, и спросил, где можно поработать с такими навыками. Мне ответил владелец компании Evrone, которая занимается Ruby-разработкой, и предложил присоединиться к их международной команде, которая работает удаленно. Сначала я работал на них из Сербии, а позже переехал в Москву.

За год я поработал над тремя приложениями, которые с нуля создавались на React Native: «Дневник еды», Pinpil (приложение по поиску аптек) и Криптокошелёк для стартапа Humaniq.

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

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

Криптокошелек для стартапа Humaniq частично разрабатывался на Android, частично на React Native. Эта компания собрала на ICO 15 млн долларов и придумала приложение для людей, которые не умеют писать и читать (было нацелено на использование в африканских странах). Все управляется с помощь face id, иконок, голосовых сообщений. Было интересно работать над его прототипом.

Написал приложение для Mail.Ru Group и попробовал преподавать

Пока я работал в Evrone, я получил предложение от рекрутеров Mail.Ru Group. Они искали мобильного разработчика на React Native, чтобы написать кроссплатформенное приложение для сайта GeekBrains. Я успешно прошел собеседование и с удовольствием начал работать над этим интересным проектом. Версия под iOS и Android уже доступна для скачивания, но мы продолжаем разработку.

Став мобильным разработчиком в Mail.Ru Group, я также смог попробовать себя в качестве преподавателя. Я провел воркшоп по React Native для сотрудников Mail.Ru Group, а позже, когда получил положительные отзывы от коллег, мы провели открытый воркшоп для слушателей из других компаний. Это был интересный опыт. Я понял, что задача преподавателя – не отвечать на все вопросы подряд, тем более, что они часто одни и те же. Главное – научить студентов самостоятельно находить ответы и решения для своих задач.

Придумал свой формат для воркшопа React Native

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

На первую встречу пришли мои коллеги — мобильные разработчики и frontend-разработчики из Mail.Ru Group. На втором воркшопе, который также прошел у нас в офисе 20 апреля, были представители Яндекса, Альфа-Банка, СберТеха, МФТИ, студенты и преподаватели GeekBrains, ВШЭ, Тинькофф, HeadHunter. Также было несколько владельцев веб-студий.

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

Я понимаю, что у технологии React Native есть свои критики. Они есть и среди тех, с кем я работаю бок о бок. Но я вижу, как много времени и усилий я сейчас экономлю на мобильной разработке, как много ресурсов Facebook и другие IT-гиганты сейчас вкладывают в ее развитие. Я искренне считаю React Native очень полезным и для front-end разработчиков, и для мобильных программистов.

Почему React Native – это круто?

React Native – это фреймворк для создания кроссплатформенных приложений на языке JavaScript. Он позволяет писать приложения для IOS, Android, Windows Phone и даже VR (на React VR можно создавать приложения для шлемов и очков виртуальной реальности»).

React Native – это отличная возможность быть быстрым и пользоваться любимыми инструментами «прямо из коробки» (их не нужно настраивать, они работают здесь и сейчас): CSS, ES6, ES7, NPM, Yarn и т.д.

Создатель React Native – Facebook, лидер во front-end, компания, которая вкладывает огромные ресурсы в развитие своих технологий. Facebook активно развивает React и React Native, создает вокруг них целую инфраструктуру и мощное IT-сообщество.

Еще одно преимущество технологии – быстрорастущее комьюнити из компаний, которые используют технологию, инвестируют в нее и поддерживают ее развитие: GeekBrains, Yandex, Airbnb, Wix, Tesla, Soundcloud, Walmart.

На этом фреймворке написаны UberEats, FacebookGroups и частично Instagram и Facebook.

Разработчик мобильного приложения GeekBrains Даниил Скрипник провел в офисе Mail.Ru Group открытый воркшоп по работе с фреймворком React Native. Участники за пару часов самостоятельно написали мессенджер и увидели, как технология позволяет сэкономить время и усилия программиста.

Мы попросили Даниила рассказать, как он начал работать на React Native и почему он хочет научить этой технологии коллег.

Сначала я ушел из логистики и за полгода переучился на frontend-разработчика

Программированием я занялся три года назад. До этого я жил в Сербии и работал совсем в другой сфере. У меня было два образования – экономическое и транспортный менеджмент. После вуза работал в логистической компании операционным менеджером по морским и авиаперевозкам. Но в какой-то момент вспомнил свои детские увлечения и решил сменить профессиональную сферу на IT.

Записался на онлайн-курсы в Школу-партнер Micrоsoft, занимался почти сутками и за 6 месяцев освоил тот минимум, с которым можно было найти работу или стажировку front-end разработчика: HTML&CSS, HTML5&CSS3, JavaScript, Bootstrap, JQuery, Angular.JS. Прошел стажировку в нескольких компаниях, получил от каждой из них предложения по работе. Но они работали с устаревшим стеком технологий и мне это было неинтересно.

Попробовал React Native и начал писать приложения

В результате я устроился на работу в Alpha Design. Компания занимается разработкой и дизайном для Apple, Rakuten, Amazon. Сначала я занимался только frontend-разработкой. Но в какой-то момент у нас появился заказчик – владелец глянцевого журнала, который хотел создать приложение для поиска и покупки одежды. По сути, это была соцсеть, похожая на Instagram, где ты листаешь фотографии с одеждой и можешь купить то, что тебе понравилось. В Alpha Design не было мобильных разработчиков и мы решили делать кроссплатформенное приложение на React Native.

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

Мне понравилось, как быстро с помощью React Native можно сделать что-то осмысленное, продукт, который сразу начинает работать. Front-end в сравнении c мобильной разработкой показался мне более долгим и ограниченным. Меня впечатлила скорость, с которой я мог писать приложения на несколько платформ с нуля.

Написал три приложения за год

Я начал искать работу в этом направлении. Написал в чат проекта Hexlet, что умею, и спросил, где можно поработать с такими навыками. Мне ответил владелец компании Evrone, которая занимается Ruby-разработкой, и предложил присоединиться к их международной команде, которая работает удаленно. Сначала я работал на них из Сербии, а позже переехал в Москву.

За год я поработал над тремя приложениями, которые с нуля создавались на React Native: «Дневник еды», Pinpil (приложение по поиску аптек) и Криптокошелёк для стартапа Humaniq.

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

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

Криптокошелек для стартапа Humaniq частично разрабатывался на Android, частично на React Native. Эта компания собрала на ICO 15 млн долларов и придумала приложение для людей, которые не умеют писать и читать (было нацелено на использование в африканских странах). Все управляется с помощь face id, иконок, голосовых сообщений. Было интересно работать над его прототипом.

Написал приложение для Mail.Ru Group и попробовал преподавать

Пока я работал в Evrone, я получил предложение от рекрутеров Mail.Ru Group. Они искали мобильного разработчика на React Native, чтобы написать кроссплатформенное приложение для сайта GeekBrains. Я успешно прошел собеседование и с удовольствием начал работать над этим интересным проектом. Версия под iOS и Android уже доступна для скачивания, но мы продолжаем разработку.

Став мобильным разработчиком в Mail.Ru Group, я также смог попробовать себя в качестве преподавателя. Я провел воркшоп по React Native для сотрудников Mail.Ru Group, а позже, когда получил положительные отзывы от коллег, мы провели открытый воркшоп для слушателей из других компаний. Это был интересный опыт. Я понял, что задача преподавателя – не отвечать на все вопросы подряд, тем более, что они часто одни и те же. Главное – научить студентов самостоятельно находить ответы и решения для своих задач.

Придумал свой формат для воркшопа React Native

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

На первую встречу пришли мои коллеги — мобильные разработчики и frontend-разработчики из Mail.Ru Group. На втором воркшопе, который также прошел у нас в офисе 20 апреля, были представители Яндекса, Альфа-Банка, СберТеха, МФТИ, студенты и преподаватели GeekBrains, ВШЭ, Тинькофф, HeadHunter. Также было несколько владельцев веб-студий.

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

Я понимаю, что у технологии React Native есть свои критики. Они есть и среди тех, с кем я работаю бок о бок. Но я вижу, как много времени и усилий я сейчас экономлю на мобильной разработке, как много ресурсов Facebook и другие IT-гиганты сейчас вкладывают в ее развитие. Я искренне считаю React Native очень полезным и для front-end разработчиков, и для мобильных программистов.

Почему React Native – это круто?

React Native – это фреймворк для создания кроссплатформенных приложений на языке JavaScript. Он позволяет писать приложения для IOS, Android, Windows Phone и даже VR (на React VR можно создавать приложения для шлемов и очков виртуальной реальности»).

React Native – это отличная возможность быть быстрым и пользоваться любимыми инструментами «прямо из коробки» (их не нужно настраивать, они работают здесь и сейчас): CSS, ES6, ES7, NPM, Yarn и т.д.

Создатель React Native – Facebook, лидер во front-end, компания, которая вкладывает огромные ресурсы в развитие своих технологий. Facebook активно развивает React и React Native, создает вокруг них целую инфраструктуру и мощное IT-сообщество.

Еще одно преимущество технологии – быстрорастущее комьюнити из компаний, которые используют технологию, инвестируют в нее и поддерживают ее развитие: GeekBrains, Yandex, Airbnb, Wix, Tesla, Soundcloud, Walmart.

На этом фреймворке написаны UberEats, FacebookGroups и частично Instagram и Facebook.

Учебник: введение в React

Данный учебник не предполагает каких-либо знаний React.

Перед тем как начнём

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

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

Учебник состоит из нескольких разделов:

Установка. Даст вам отправную точку, чтобы следовать учебнику.

Обзор. Познакомит вас с основами React: компонентами, свойствами и состоянием.

Завершение игры. Научит вас наиболее распространенным методам разработки в React.

Добавление Time Travel. Даст вам более глубокое понимание уникальных преимуществ React.

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

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

Что мы разрабатываем?

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

Вы можете увидеть, что именно мы будем разрабатывать здесь: Окончательный результат. Если код для вас непонятен, или если вы не знакомы с синтаксисом, не беспокойтесь! Цель учебника — помочь вам понять React и его синтаксис.

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

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

Предварительные требования

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

Если вам нужно повторить JavaScript, можно использовать данное руководство (хотя лично я предпочитаю это руководство). Обратите внимание, что в данном учебнике мы используем некоторые функции ES6 — недавней версии JavaScript: функции-стрелки, классы, операторы let и const. Вы можете использовать Babel REPL, чтобы проверить, во что компилируется код ES6.

Установка

Освоить данное руководство можно двумя способами: вы можете либо писать код в своем браузере, либо настроить локальную среду разработки на своем компьютере.

1-й вариант установки

Это самый быстрый способ начать работу!

Сначала откройте этот стартовый код в новой вкладке. Новая вкладка должна отображать пустую игровую доску в крестики-нолики и код React. В этом учебнике мы будем редактировать код React.

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

2-й вариант: локальная среда разработки

Это исключительно по желанию и совершенно не обязательно для данного учебника!


Необязательно: инструкции для разработки локально с помощью предпочитаемого вами текстового редактора.

Данная установка потребует больше времени и сил, но позволяет вам освоить учебник, используя предпочитаемый вами редактор (например WebStorm). Выполните следующие шаги:

Убедитесь, что у вас установлена последняя версия Node.js.

Удалите все файлы в папке src/ нового проекта.

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

Добавьте файл с именем index.css в папку src/ с этим кодом CSS.

Добавьте файл с именем index.js в папку src/ с этим кодом JS.

Добавьте следующие три строки в начало файла index.js в папке src/ :

Теперь, если вы запустите npm start в папке проекта и откроете http://localhost:3000 в браузере, вы должны увидеть пустое поле крестики-нолики.

Также мы рекомендуем следовать данным инструкциям, чтобы настроить подсветку синтаксиса в вашем редакторе.

Помогите, я застрял!

Если вы застряли, посетите ресурсы сообщества поддержки. В частности, Reactiflux Chat — отличный способ быстро получить помощь. Если же вы не получили ответа или зашли в тупик, пожалуйста, сообщите нам в Git о проблеме, и мы вам поможем.

Обзор

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

Что такое React?

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

В React есть несколько разных типов компонентов, но мы начнем с подклассов React.Component :

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

Здесь ShoppingList — это класс компонента React или тип компонента React. Компонент принимает параметры, называемые props (сокращение от properties — свойства), и возвращает иерархию представлений, отображаемых с помощью метода render .

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

Топ-пост этого месяца:  Расширения и темы для Оперы — какие плагины и дополнения позволят вам добавить новые возможности в

Если вам интересно, createElement() более подробно описан в справочнике по API, но мы не будем пользоваться им в этом учебнике. Вместо него мы будем продолжать использовать JSX.

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

Компонент ShoppingList выше отрисовывает только нативные компоненты DOM, такие как

Проверка стартового кода

Если вы собираетесь работать с учебником в своем браузере, откройте этот код в новой вкладке: стартовый код. Если вы собираетесь работать над учебником в локальной среде, откройте src/index.js в папке вашего проекта (вы уже коснулись этого файла во время установки).

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

Изучив код, вы заметите, что у нас есть три компонента React:

Компонент Square отображает одиночную кнопку , а Board отображает 9 квадратов. Компонент Game отображает Board со значениями чисел-заполнителей, которые мы изменим позже. В настоящее время интерактивные компоненты отсутствуют.

Передача данных с помощью props

Для эксперимента, давайте попробуем передать некоторые данные из нашего компонента Board в компонент Square .

В методе renderSquare компонента Board измените код, чтобы передать свойство с именем value в компонент Square :

Измените метод render компонента Square , чтобы он отображал это значение, поменяв на :

После: вы должны увидеть число в каждом квадрате в отрисованном выводе.

Поздравляем! Вы только что «передали свойство» из родительского компонента Board в дочерний компонент Square . Передача свойств — это то, как информация передается от родителей к потомкам в приложениях React.

Создание интерактивного компонента

Давайте заполнять компонент Square значением « X », когда мы щелкаем по нему. Сначала измените тег кнопки, который возвращается из функции render() компонента Square , следующим образом:

Если мы сейчас нажмем на Square, то должны получить предупреждение в нашем браузере.

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

Обратите внимание, что с помощью onClick = <() =>alert (‘click’)> мы передаем функцию в качестве свойства onClick . Она срабатывает только после щелчка. Пропуск () => и запись onClick = — является распространенной ошибкой, которая генерирует предупреждение каждый раз, когда компонент перерисовывается.

Следующим шагом мы хотим, чтобы компонент Square «запомнил», что на него щелкнули, и заполнил себя знаком « X ». Чтобы «запоминать» вещи, компоненты используют состояние.

Компоненты React могут иметь состояние, инициализируя this.state в своих конструкторах. Состояние this.state следует рассматривать как приватное для компонента React, в котором оно определено. Давайте сохраним текущее значение Square в this.state и изменим его при нажатии Square .

Сначала мы добавим конструктор в класс для инициализации состояния:

В классах JavaScript вам всегда нужно вызывать super при определении конструктора подкласса. Все классы компонентов React, имеющие конструктор, должны начинат его с вызова super(props) .

Теперь мы изменим метод render компонента Square для отображения значения текущего состояния при нажатии:

Замените this.props.value на this.state.value внутри тега .

Замените обработчик события () => alert() на () => this.setState() .

Поместите атрибуты className и onClick в отдельные строки для лучшей читаемости.

После этих изменений тег , возвращаемый методом render компонента Square , выглядит следующим образом:

Вызывая this.setState из обработчика onClick в методе render компонента Square , мы говорим React повторно отрисовывать этот Square при каждом нажатии на его кнопку . После обновления свойство this.state.value компонента Square будет иметь значение « X », поэтому мы увидим X на игровом поле. Если вы нажмете на любой квадрат, в нём должен появиться X .

Когда вы вызываете setState в компоненте, React автоматически обновляет и дочерние компоненты внутри него.

Инструменты разработчика

Расширение React Devtools для Chrome и Firefox позволяет вам просматривать дерево компонентов React с помощью инструментов разработчика в вашем браузере.

React DevTools позволяет вам проверять свойства и состояние ваших компонентов React.

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

Однако обратите внимание, что необходимо сделать несколько дополнительных шагов, чтобы заставить его работать с CodePen:

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

Нажмите кнопку «Fork».

Нажмите «Change View», а затем выберите «Debug mode».

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

Завершение игры

Теперь у нас есть основные строительные блоки для нашей игры в крестики-нолики. Чтобы завершить игру, нам необходимо чередовать размещение « X » и « O » на доске, а также нам нужен способ определить победителя.

Поднятие состояния вверх

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

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

Чтобы собрать данные из нескольких дочерних элементов или обеспечить взаимодействие двумя дочерними компонентами, вам нужно объявить общее состояние в их родительском компоненте. Родительский компонент может передать состояние обратно дочерним компонентам, используя свойства props ; это синхронизирует дочерние компоненты между собой и с родительским компонентом.

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

Когда мы позже заполним Board , игровая доска будет выглядеть примерно так:

В настоящее время метод renderSquare в Board выглядит следующим образом:

В начале мы передали свойство value вниз по иерархии компоненту Square из Board , чтобы показывать числа от 0 до 8 в каждом Square . В другом предыдущем шаге мы заменили числа знаком « X », определяемым собственным состоянием Square. Вот почему Square в настоящее время игнорирует свойство value , переданное ему компонентом Board .

Теперь мы снова будем использовать механизм передачи свойств. Мы изменим Board , чтобы проинструктировать каждый отдельный Square о его текущем значении (« X », « O » или null ). У нас уже определен массив squares в конструкторе Board . Давайте изменим метод renderSquare в Board , чтобы читать значения из массива:

Каждый Square теперь получит свойство value , которое будет либо « X »/« O », либо null для пустых квадратов.

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

Чтобы сохранить состояние Board приватным, мы передадим функцию из компонента Board компоненту Square . Эта функция будет вызываться при нажатии на квадрат. Мы изменим метод renderSquare в Board на:

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

Теперь мы передаем потомкам два свойства из Board в Square : value и onClick . Свойство onClick — это функция, которую Square может вызывать при нажатии. Внесем следующие изменения в Square :

Заменим this.state.value на this.props.value в методе render компонента Square

Заменим this.setState() на this.props.onClick() в методе render компонента Square

Удалим конструктор из Square , потому что он больше не отслеживает состояние игры

После этих изменений компонент Square выглядит следующим образом:

При нажатии на квадрат вызывается функция onClick() , предоставляемая Board . Вот как это достигается:

Свойство onClick() в нативном DOM-компоненте указывает React установить слушатель событий щелчка.

При нажатии на кнопку React вызывает обработчик события onClick() , определенный в методе render() компонента Square .

Этот обработчик событий вызывает this.props.onClick() . Свойство onClick компонента Square было определено компонентом Board .

Так как Board передал onClick = <() =>this.handleClick(i)> в Square , Square при нажатии вызывает this.handleClick(i) .

Мы пока не определили метод handleClick() , поэтому наш код выдает крэш.

Атрибут onClick DOM-элемента имеет особое значение для React, поскольку он является нативным компонентом. Для пользовательских компонентов, таких как Square , наименование зависит от вас. Мы могли бы как угодно назвать метод onClick компонента Square или метод handleClick компонента Board . Однако в React принято использовать имена on[Event] для свойств, которые представляют события, и handle[Event] для методов, которые обрабатывают события.

Когда мы попытаемся кликнуть по квадрату, мы должны получить ошибку, потому что мы еще не определили handleClick . Теперь мы добавим handleClick в класс Board:

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

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

Обратите внимание, что в handleClick мы вызываем .slice() , чтобы создать копию массива квадратов для его изменения вместо изменения существующего массива. Мы объясним, почему мы создаем копию массива квадратов в следующей главе.

Почему важна неизменяемость

В предыдущем примере кода мы предложили использовать оператор .slice() , чтобы создать копию массива квадратов для изменения вместо изменения существующего массива. Теперь мы обсудим неизменяемость и то, почему важно её изучить.

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

Изменение данных с помощью мутации

Изменение данных без мутации

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

Сложные функции становятся простыми

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

Отслеживание изменений

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

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

Определение момента, когда необходима перерисовка в React

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

Вы можете узнать больше о shouldComponentUpdate() и о том, как создавать чистые компоненты, прочитав раздел «Оптимизация производительности».

Компоненты-функции

Теперь мы изменим Square на компонент-функцию.

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

Заменим класс Square такой функцией:

Мы изменили this.props на props в обоих местах, где он встречается.


Когда мы выразили Square как компонент-функцию, мы также изменили onClick= <() =>this.props.onClick()> на более короткий onClick= (обратите внимание на отсутствие скобок с обеих сторон). В классе мы использовали стрелочную функцию для доступа к правильному значению this , но в компоненте функции нам не нужно об этом беспокоиться.

По очереди

Теперь нам нужно исправить очевидный дефект в нашей игре в крестики-нолики: буквы «O» не могут быть отмечены на доске.

Мы установим первый ход в «X» по умолчанию. Мы можем установить это значение по умолчанию, изменив начальное состояние в нашем конструкторе Board :

Каждый раз, когда игрок делает ход, xIsNext (логическое значение) будет инвертирован, чтобы определить, какой игрок пойдет дальше, и состояние игры будет сохранено. Мы обновим функцию handleClick в Board , чтобы инвертировать значение xIsNext :

С этим изменением «Х» и «О» могут сменяться. Давайте также изменим текст переменной status в методе render компонента Board , чтобы он отображал, какой игрок должен ходить следующим:

После применения этих изменений у вас должен получиться такой компонент Board:

Объявление победителя

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

Мы будем вызывать calculateWinner(squares) в методе render компонента Board , чтобы проверить, выиграл ли игрок. Если игрок выиграл, мы можем отобразить текст, такой как «Победитель: X» или «Победитель: O». Заменим объявление переменной status в методе render компонента Board следующим кодом:

Теперь мы можем изменить функцию handleClick в Board , чтобы выполнять return раньше, игнорируя клик, если кто-то выиграл игру или Square уже заполнен:

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

Добавление путешествия во времени

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

Хранение истории ходов

Если бы мы мутировали массив squares , реализация путешествия во времени была бы очень сложной.

Однако мы использовали slice() для создания новой копии массива squares после каждого перемещения и рассматривали его как неизменяемый. Теперь это позволит нам сохранять каждую прошлую версию массива squares и перемещаться между ходами, которые уже произошли.

Мы будем хранить прошлые массивы squares в другом массиве, называемом history . Массив history представляет все состояния Board , от первого до последнего хода, и имеет следующую форму:

Теперь нам нужно решить, какой компонент должен владеть состоянием history .

Очередное поднятие состояния

Мы хотим, чтобы компонент Game верхнего уровня отображал список прошлых ходов. Для этого ему понадобится доступ к history , поэтому мы поместим состояние history в компонент Game верхнего уровня.

Помещение состояния history в компонент Game позволяет нам удалить состояние squares из его дочернего компонента Board . Подобно тому, как мы «подняли состояние» из компонента Square в компонент Board , теперь мы поднимаем его из Board в компонент Game верхнего уровня. Это дает компоненту Game полный контроль над данными Board и позволяет ему инструктировать Board отрисовывать предыдущие ходы из history .

Во-первых, мы установим начальное состояние для компонента Game в его конструкторе:

Далее у нас будет компонент Board , получающий свойства squares и onClick из компонента Game . Так как теперь у нас есть единый обработчик кликов в Board для всех Square , нам нужно будет передавать местоположение каждого Square в обработчик onClick , чтобы указать, на какой квадрат кликнули. Вот необходимые шаги для преобразования компонента Board :

Удалить конструктор в Board.

Заменить this.state.squares[i] на this.props.squares[i] в методе renderSquare компонента Board .

Заменить this.handleClick(i) на this.props.onClick(i) в методе renderSquare компонента Board .

Компонент Board теперь выглядит так:

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

Поскольку компонент Game теперь отображает статус игры, мы можем удалить соответствующий код из метода render компонента Board . После рефакторинга функция render в Board выглядит так:

Наконец, нам нужно переместить метод handleClick из компонента Board в компонент Game . Нам также нужно изменить handleClick , поскольку состояние компонента Game структурировано по-другому. В методе handleClick компонента Game мы объединяем новые записи истории в history .

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

На данный момент компонент Board нуждается только в методах renderSquare и render . Состояние игры и метод handleClick должны находиться в компоненте Game .

Показ предыдущих ходов

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

Ранее мы узнали, что элементы React являются первоклассными объектами JavaScript; мы можем передавать их в наших приложениях. Чтобы отрисовывать несколько элементов в React, мы можем использовать массив React элементов.

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

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

Давайте сопоставим историю в методе render компонента Game :

Для каждого хода в истории игры в крестики-нолики мы создаем элемент списка
, который содержит кнопку . Эта кнопка имеет обработчик onClick , который вызывает метод this.jumpTo() . Мы еще не реализовали метод jumpTo() . Пока что мы должны увидеть список ходов, которые произошли в игре, и предупреждение в консоли инструментов разработчика, которое гласит:

Each child in an array or iterator should have a unique “key” prop. Check the render method of “Game”.

Каждый дочерний элемент в массиве или итераторе должен иметь уникальное свойство » key «. Проверьте метод render компонента Game .

Давайте обсудим, что означает приведенное выше предупреждение.

Выбор ключа

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

Представьте себе переход от

В дополнение к обновленным счетчикам, человек, читающий это, вероятно, сказал бы, что мы поменяли местами Петю и Васю и вставили между ними Лёню. Однако React — это компьютерная программа, которая не знает наших намерений. Поскольку это так, нам необходимо указать свойство key для каждого элемента списка, чтобы отличать его соседних элементов в этом списке. Один из вариантов — использовать строки vasia , petia , lyonia . Если бы мы отображали данные из базы данных, в качестве ключей могли бы использоваться идентификаторы (поле id) базы данных для Васи, Пети и Лёни.

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

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

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

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

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

Реализация путешествия во времени

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

В методе render компонента Game мы можем добавить ключ как
, и предупреждение React о ключах должно исчезнуть:

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

Сначала добавим stepNumber: 0 в начальное состояние в конструкторе Game :

Далее мы определим метод jumpTo в Game , чтобы обновлять stepNumber . Мы также устанавливаем xIsNext в true , если число, на которое мы меняем stepNumber , является четным:

Теперь мы внесем несколько изменений в метод handleClick комопнента Game , который срабатывает при нажатии на квадрат.

Добавленное нами состояние stepNumber отражает текущий ход, отображаемый для пользователя. После того, как мы сделаем новый шаг, нам нужно обновить stepNumber , добавив stepNumber: history.length в качестве аргумента this.setState . Это гарантирует, что мы не застрянем, показывая тот же самый ход после того, как был сделан новый.

Мы также заменим чтение this.state.history на this.state.history.slice(0, this.state.stepNumber + 1) . Это гарантирует, что если мы «вернемся назад во времени», а затем сделаем новый шаг с этой точки, мы затрем всю «будущую» историю, которая теперь стала бы неверной.

Наконец, мы изменим метод render компонента Game , на данный момент всегда отрисовывающий последний ход, чтобы он отрисовывал текущий выбранный ход в соответствии со stepNumber :

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

Подведение итогов

Поздравляем! Вы создали игру в крестики-нолики, которая:

позволяет вам играть в крестики-нолики,

показывает, когда игрок выиграл,

хранит историю игры,

позволяет игрокам просматривать как историю игры, так и предыдущие версии игрового поля.

Отличная работа! Мы надеемся, что теперь вы почувствовали, что хорошо понимаете, как работает React.

Проверьте окончательный результат здесь: Окончательный результат

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

Отображение местоположения для каждого хода в формате (столбец, строка) в списке истории ходов.

Выделите текущий выбранный элемент в списке ходов.

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

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

Когда кто-то выигрывает, выделите три квадрата, которые привели к победе.

Когда никто не выигрывает, выведите сообщение о ничье.

9 принципов, которые должен знать новичок в React.js

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

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

Топ-пост этого месяца:  Вывод дочерних таксономий

Я предполагаю, что вы уже знаете самые основы. Но если слова component , props , или state вам не знакомы, то вам лучше бы сначала прочитать официальные Hello World или Руководство. Также, я буду использовать JSX, потому что он предоставляет гораздо более краткий и выразительный синтаксис для написания компонентов.

1. Это просто библиотека отображения

Давайте сначала разберемся с основами. React это не очередной MVC-фреймворк или какой-либо другой фреймворк. Это всего лишь библиотека для рендеринга ваших отображений (views). Если вы пришли из мира MVC, то вам нужно осознать, что React это буква ‘V’ в этой аббревиатуре, и вы должны поискать где-нибудь в другом месте, когда дело доходит до ‘M’ и ‘C’, иначе в результате вы получите кучу дурно пахнущего React-кода. Подробнее об этом далее.

2. Делайте небольшие компоненты

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

Компонент представляет собой с двумя

для каждого элемента массива. Эта последняя часть, выдающая

как отдельный компонент — очень важна. Я считаю, что это и есть подходящий размер для компонента.

3. Пишите функциональные компоненты

Ранее было два способа объявления React-компонента, первым был — React.createClass() :

Затем появился способ, использующий классы ES6:

React 0.14 представил новый синтаксис — объявление компонентов как функций от props:

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

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

Большая часть кода не изменилась, только теперь у нас голые функции вместо методов класса. Тем не менее, для меня это большая разница. Когда компонент разбит на функции, мне субъективно проще поймать тот момент, когда этот компонент уже пора разбить на более мелкие компоненты. Таким образом, “функциональный” синтаксис помогает мне следовать пункту №2.

В будущем, также, планируются оптимизации в React, которые сделают функциональные компоненты более эффективными, чем классовые. ( Update: оказалось что изменения в производительности функциональных компонентов сложнее, чем я думал. Я все еще рекомендую использовать функциональные компоненты, но если вас сильно тревожит производительность, то вам следует прочитать и понять это и это, и решить что работает лучше в вашем случае.)

Важно отметить, что функциональные компоненты имеют несколько “ограничений”, которые я бы, скорее, назвал их сильными сторонами. Во-первых, функциональному компоненту нельзя присвоить атрибут ref (подробнее о нем здесь). Хотя он и является удобным способом для взаимодействия с дочерними компонентами из родительского, но, по моим ощущениям, это Неправильный Способ Разработки на React. ref -атрибуты поощряют очень императивный и почти jquery-подобный подход к написанию компонентов, уводя нас в сторону от философии функциональности и однонаправленности потока данных, ради которой мы и выбираем React.

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

4. Создавайте компоненты, не имеющие состояние (stateless)

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

Наличие состояния затрудняет тестирование компонентов

Нет ничего проще для тестирования, чем чистые функции. Так зачем же нам лишать себя возможности делать компоненты в виде чистых функций, добавляя к ним состояние? Во время тестирования компонентов с состоянием, нам приходится приводить компоненты к определенному состоянию, чтобы затем протестировать их поведение. Нам, также, приходится возиться со всем разнообразием комбинаций состояния (которое компонент может изменить в любой момент) и входных атрибутов ( props , которые компонент вообще не контролирует), и выяснять которые из них тестировать и как. А когда компоненты выполнены в виде простых функций от входных данных — тестировать намного легче. (Подробнее о тестировании ниже).

Наличие состояния затрудняет понимание работы компонента

Когда читаешь код компонента со сложным и развесистым состоянием, то приходится сильнее напрягать голову, чтобы уследить за всем что происходит. Постоянно возникают вопросы из разряда: “Это состояние уже инициализировано?”, “Что будет, если я поменяю состояние в этом месте?”, “Возникает ли здесь race condition?”. Просмотр компонентов, имеющих состояние, с целью понять их поведение, становится очень болезненным.

Наличие состояния слишком легко позволяет вставить в компонент бизнес-логику

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

Наличие состояния затрудняет обмен информацией с другими частями приложения


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

Конечно, иногда имеет смысл оставлять определенную часть состояния приложения “на совести” конкретного компонента. В таком случае, вполне можно использовать this.setState . Это допустимая и легальная возможность API React-компонентов, и я не хочу чтобы сложилось впечатление, что это нужно запретить. Например, когда пользователь вводит текст в поле, то, скорее всего, всему приложению не нужно знать о каждом нажатии клавиши. Во время этого, компонент input может менять свое промежуточное состояние до тех пор, пока не потеряет фокус, после чего итоговый текст отправится наружу и станет частью состояния, хранящегося где-нибудь в другом месте. Этот сценарий недавно упомянул мой коллега, и я считаю, что это хороший пример.

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

5. Используйте Redux.js

В первом пункте я сказал, что React это только отображение. Тогда возникает очевидный вопрос “Где должны храниться состояние и логика?”. Я рад, что вы спросили!

Возможно вы уже слышали о Flux, который представляет собой стиль/шаблон/архитектуру для создания web-приложений, в основном использующих для рендеринга React. Существует несколько фреймворков, воплощающих идеи Flux, но я без сомнения могу порекомендовать Redux.js *.

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

  1. Компоненты получают функции обратного вызова, как props , которые они вызывают, когда возникают события UI
  2. Эти функции обратного вызова создают и возвращают действия, основываясь на информации о событии
  3. Редьюсеры обрабатывают действия, вычисляя новое состояние
  4. Новое состояние всего приложения отправляется в единое хранилище
  5. Компоненты получают новое состояние через props и перерисовывают себя там, где это необходимо

Большая часть перечисленных концепций не является уникальной для Redux, но Redux реализует их просто и без излишеств, с помощью минимального API. Перенося приличного размера проект с Alt.js на Redux, я обнаружил несколько преимуществ последнего. Вот самые значительные из них:

  • Редьюсеры это чистые функции, все что они делают это oldState + action = newState . Каждый редьюсер вычисляет отдельный кусок состояния. Все эти куски, впоследствии, объединяются вместе, формируя целое приложение. Это значительно упрощает тестирование бизнес-логики и логики изменения состояния.
  • API меньше, проще и лучше документирован. Я обнаружил, что его концепции гораздо проще и легче изучать, и, следовательно, намного легче разобраться в потоках действий и информации в приложении.
  • Если его использовать так, как рекомендовано, то лишь незначительное число компонентов будет напрямую зависеть от Redux. Все остальные компоненты просто получают состояние и функции обратного вызова через props . Таким образом, компоненты остаются очень простыми и уменьшается завязанность на конкретном фреймворке.

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

  • Immutable.js — немутабельные структуры данных для JavaScript! Используйте их для хранения состояния, чтобы быть уверенным, что оно не меняется там, где не должно, а также чтобы сохранить функциональную чистоту редьюсеров
  • redux-thunk — используется когда нужно, чтобы действия (actions) имели какой-либо побочный эффект в дополнение к обновлению состояния приложения. Например, вызов REST API, или установка маршрутов (routes), или даже вызов других действий.
  • reselect — используется для создания составных, лениво исполняемых отображений. Например для конкретного компонента вам может потребоваться:
  • 1. вставить только определенную часть глобального состояния, а не полностью
  • 2. вставить дополнительные производные данные, например итого или результаты валидации данных, не сохраняя все это в состоянии

Не обязательно использовать все это с первого дня. Я советую применить Redux и Immutable.js как только у вас появится какое-нибудь состояние, reselect — когда у вас появятся производные данные, и redux-thunk — когда у вас появится маршрутизация или асинхронные действия. Лучше начать их использовать раньше, чем позже — это избавит вас от лишней работы для внедрения их в дальнейшем.

*В зависимости от того, кого вы спросите, Redux может быть или не быть “настоящей” реализацией Flux. Лично я считаю, что он достаточно хорошо соответствует ключевым идеям, чтобы называться Flux-фреймворком, но, как бы то ни было, это все вопрос терминологии.

6. Всегда используйте propTypes

propTypes предлагают нам действительно легкий способ добавить немного типобезопасности нашим компонентам. Вот как они выглядят:

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

  • это может отловить ошибку на ранней стадии, предотвращая глупые ошибки
  • если вы воспользуетесь isRequired , то вам не придется так часто делать проверку на undefined или null
  • это также выполняет роль документации, освобождая читателя от необходимости поиска по всему компоненту, с целью понять какие props ему нужны

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

Еще один совет — сделайте так, чтобы тесты падали при любых ошибках, связанных с propTypes . Вот грубоватое, но рабочее решение:

7. Используйте поверхностный рендеринг

Тестирование React-компонентов все еще коварная тема. Не потому что это сложно, а потому что это все еще развивающаяся область, и ни один отдельный подход еще не признан однозначно лучшим. На данный момент, моя палочка-выручалочка это использование поверхностного рендеринга (shallow rendering) и проверка props .

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

Когда я тестирую компоненты, чаще всего я пишу следующие виды юнит-тестов:

Логика рендеринга

Представим компонент, который должен отображать изображение или иконку, в зависимости от условий:

Мы можем протестировать его следующим образом:

Проще простого! Стоит обратить внимание, что API для поверхностного рендеринга немного сложнее, чем показано в этом примере. Функция shallowRender это наша самописная вспомогательная обертка вокруг реального API, облегчающая его использование.

Возвращаясь к нашему компоненту ListOfNumbers , вот так мы можем протестировать, что обход массива происходит корректно:

Преобразование свойств

В последнем примере, мы нырнули в дочерние элементы тестируемого компонента, чтобы убедиться, что они корректно рендерятся. Мы можем расширить его, добавив проверку не только наличия дочерних элементов, но и корректности передаваемых им свойств (props). Это особенно полезно, когда компонент делает некие преобразования свойств, перед тем как передать их дочерним элементам. Например, следующий компонент принимает имена CSS-классов в виде массива строк, и передает их дальше в виде одной строки, разделенной пробелами:

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

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

Взаимодействие с пользователем

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

Вот мой любимый способ тестирования взаимодействий:

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

Интеграционное тестирование

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

  1. Рендерите все дерево компонентов (вместо поверхностного рендеринга)
  2. Работайте непосредственно с DOM (используя React TestUtils или jQuery), чтобы определить элементы, которые вас непосредственно интересуют, и затем:
  3. Проверяйте их HTML атрибуты, содержимое или…
  4. Эмулируйте события DOM и затем проверяйте побочные эффекты (изменения в DOM или в маршрутах, вызовы AJAX и т.п.)

По поводу TDD

Вообще, я не использую TDD при написании React-компонентов. Во время работы над компонентом, я часто “перетряхиваю” его структуру, пытаясь написать как можно более простые HTML и CSS, которые выглядят правильно в любом из поддерживаемых мной браузеров. А поскольку мой подход к модульному тестированию компонентов, как правило, завязан на их структуру, то мне придется постоянно чинить тесты, что будет пустой тратой времени.

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

В этом разделе я говорил только о тестировании компонентов, поскольку для тестирования остальной части Redux-приложений не требуется какая-либо специфическая информация. Как у фреймворка, у Redux совсем немного “магии”, скрытой под капотом. И я считаю, это сокращает потребность в каком-либо чрезмерном подготовительном процессе к тестированию. Все что есть, это всего лишь давно знакомые, простые функции (много из них чистые), что является настоящим глотком свежего воздуха, когда дело доходит до тестирования.

8. Используйте JSX, ES6, Babel, Webpack и NPM (или Yarn)

Специфичная для React вещь здесь только одна — JSX. Для меня это просто более наглядная и понятная замена вызову React.createElement . Единственный недостаток здесь это небольшое усложнение в процессе сборки, что легко решается с помощью Babel.

Раз уж мы добавили Babel, то почему бы теперь не использовать все великолепие возможностей ES6, таких как константы, стрелочные функции, дефолтные аргументы, деструктурирование массивов и объектов, оператор расширения и оператор остальных аргументов, шаблонные строки, итераторы и генераторы, приличная система модулей и т.д. Реально ощущается, что в последнее время JavaScript растет как язык, конечно если вы готовы потратить немного времени на настройку соответствующих инструментов.

В довершение ко всему, мы используем Webpack для сборки нашего кода, и NPM для управления зависимостями. И теперь мы полностью соответствуем новомодным трендам в JavaScript 🙂

(Прим. пер.: сейчас рекомендуется использовать yarn вместо NPM, по ряду причин )

9. Используйте dev tools для React и Redux

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

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

10. Бонус от переводчика. Используйте React Create App

react-create-app это утилита командной строки, которая дает возможность создать пустое приложение с базовой структурой директорий, встроенным и настроенным Webpack, Babel и Eslint, со всеми зависимостями. Вам остается только запустить его командой yarn start и сфокусироваться на коде и бизнес-логике вашего приложения, не погружаясь в дебри настройки окружения. Если же вдруг потребуется изменить стандартную конфигурацию, то и такая возможность есть (команда eject ).

Заключение

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

JavaScript и React для разработчиков: освойте основные функции

JavaScript and React for Developers: Master the Essentials

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

Если у вас есть некоторый опыт программирования, но вы хотите перенести свои навыки развития на следующий уровень, этот курс для вас. Это всеобъемлющее введение в более глубокие основы JavaScript и современный, все более популярный фреймворк, React.

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

В этом курсе вы узнаете:

  • Основные фундаментальные концепции JavaScript, такие как DOM, события и обратные вызовы, и AJAX
  • Узанете о API реального мира и проанализируйте данные в своих собственных веб-проектах
  • Работа с новыми функциями языка JavaScript благодаря ES6
  • Используете популярные веб-инструменты, включая npm, Yarn, Grunt, Gulp и webpack
  • Изучите входы и выходы жизненных циклов компонентов, состояний, свойств и других концепций Core React
  • Создадите современный веб-проект с помощью React
  • Развернете свое веб-приложения в Интернете

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

Передача функций в компоненты

Как передать обработчик события (например, onClick) компоненту?

Передавайте обработчики событий и другие функции через пропсы дочерним компонентам:

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

Как привязать функцию к экземпляру компонента?

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

Привязка в конструкторе (ES2015)

Привязка в свойствах класса (предложение-кандидат)

Привязка в методе render()

Использование Function.prototype.bind в render() создаёт новую функцию при каждом рендере компонента, что может повлиять на производительность (см. ниже).

Стрелочная функция в render()

Использование стрелочной функции в render() создаёт новую функцию при каждой отрисовке компонента, что может нарушать оптимизации, использующие строгое сравнение для определения идентичности.

Можно ли использовать стрелочные функции в методе render()?

В целом, да. Зачастую это самый простой способ передать параметры через колбэки.

Если же у вас возникли проблемы с производительностью — оптимизируйте!

Зачем вообще нужна привязка?

В JavaScript эти два фрагмента кода не равнозначны:

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

В React, как правило, привязывать нужно только те методы, которые вы хотите передать другим компонентам. Например, передаёт this.handleClick , поэтому его нужно привязать. Впрочем, метод render и методы жизненного цикла привязывать не обязательно, так как мы не передаём их в другие компоненты.

Ознакомьтесь со статьёй Йехуды Катц, в которой более подробно объяснено, что такое привязка, и как работают функции в JavaScript.

Почему моя функция вызывается каждый раз при отрисовке компонента?

Убедитесь, что вы не вызываете функцию, когда передаёте её компоненту:

Вместо этого передайте саму функцию (без скобок):

Как передать параметры обработчику событий или колбэку?

Чтобы передать параметры обработчику событий, оберните его в стрелочную функцию:

Это действие равносильно использованию .bind :

Пример: Передача параметров с использованием стрелочных функций

Пример: Передача параметров с использованием атрибутов данных

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

Как предотвратить слишком быстрый или слишком частый вызов функции?

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

  • троттлинг: выборочные изменения, зависимые от частоты, основанной на времени (напр. _.throttle )
  • дебаунсинг: изменения, задействованные после некого периода бездействия (напр. _.debounce )
  • троттлинг с помощью requestAnimationFrame : выборочные изменения, основанные на requestAnimationFrame (напр. raf-schd )

Взгляните на визуализацию, которая сравнивает функции throttle и debounce .

_.debounce , _.throttle и raf-schd предусматривают метод cancel для отмены отложенных колбэков. Вы должны либо вызвать этот метод из componentWillUnmount, либо удостовериться, что компонент всё ещё встроен в пределах отложенной функции.

Троттлинг предотвращает повторный вызов функции в заданный период времени. Этот метод был задействован в примере ниже, чтобы не допустить вызов обработчика «click» чаще чем раз в секунду.

Дебаунсинг гарантирует, что функция не будет выполняться до тех пор, пока не пройдёт определённое количество времени с момента её последнего вызова. Этот метод пригодится, если вам нужно провести ресурсоёмкий расчёт в ответ на событие, которое может быстро повториться (например, прокрутка страницы или нажатие клавиш). В примере ниже для ввода текста используется задержка в 250 мс.

requestAnimationFrame — это способ организации очереди функции, которая будет выполнена в браузере за оптимальное время для производительности отрисовки. Функция, поставленная в очередь с помощью requestAnimationFrame , запустится в следующем кадре. Браузер приложит все усилия, чтобы обеспечить 60 кадров в секунду (60 fps — frames per second). Однако, если браузер не в состоянии справиться с этой задачей, он естественным образом ограничит количество кадров в секунду. Например, если ваше устройство поддерживает только 30 fps, то и получите вы только 30 кадров. Использование requestAnimationFrame для троттлинга является очень полезным методом, так как помогает предотвратить выполнение более 60 обновлений в секунду. Если вы выполняете 100 обновлений в секунду, это создаёт лишнюю работу для браузера, которую пользователь всё равно не заметит.

Использование этой техники захватит только последнее опубликованное значение в кадре. Пример работы данной оптимизации вы можете увидеть на MDN

Топ-пост этого месяца:  Проверка скорости загрузки сайта — как ее измерить онлайн и увеличить с помощью Page Speed Insights


Тестирование ограничения скорости

Когда вы тестируете, что ваш код ограничения скорости работает правильно, полезно иметь возможность прокрутить время. Если вы используете jest , вам может пригодиться mock timers . Если вы используете requestAnimationFrame , то raf-stub может оказаться полезным инструментом для управления смены кадров анимации.

Angular JS или React JS: выберите лучший для себя фреймворк

Одним из самых популярных фреймворков для разработки веб-приложений является JavaScript. Он предлагает множество вариантов на выбор, чтобы помочь разработчикам создавать одни из лучших приложений на основе их бизнес-требований. Некоторые из наиболее часто используемых фреймворков JavaScript — это Angular JS, React JS, Vue JS и так далее. Все фреймворки исключительно хороши и предлагают широкий спектр функций, что, в свою очередь, затрудняет для разработчиков выбор одного конкретного.

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

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

Angular JS – это шаблон проектирования архитектуры приложения JavaScript (MVVM), запущенный в 2009 году. Главной целью было создание веб-приложений, которые обеспечивают супер уровень интерактивности.

Давайте посмотрим на основные преимущества Angular JS.

Преимущества или плюсы Angular JS

  • Он поставляется с рядом новых функций, в том числе расширенные RXJS, последний HTTP-клиент и улучшенная компиляция (которая происходит менее чем за три секунды).
  • Минимизация рисков — да, вы правильно прочитали! Функция двусторонней привязки данных обеспечивает исключительное поведение приложения, сводя к минимуму риски, что означает меньшее количество ошибок. Таким образом, всякий раз, когда происходит незначительное изменение данных, действие распространяется, что означает автоматическую синхронизацию новых обновлений через модель данных и представление модели.
  • Существует возможность введения зависимости функций, связанных с компонентами с модулями и модульностью, в общих чертах. Это встроенная функция зависимости системы, которая является лучшим из преимуществ, поставляющихся с Angular JS.
  • Модель MVVM позволяет разработчикам работать отдельно в одних и тех же разделах приложения, реализуя один и тот же набор функций данных. Где еще вы можете это найти?
  • Любой желающий может присоединиться к процессу разработки приложения в любое время, поскольку новым участникам предоставляется достаточно времени, чтобы все узнать и понять, благодаря доступу к подробной документации, предлагающей важную информацию для отдельных разработчиков – независимо от того, покидает ли разработчик команду или новый человек присоединяется.
  • Фреймворк может работать в любом браузере или платформе, что означает, что он поддерживает кросс-совместимость, независимо от устройства, ОС, браузера или платформы. Поскольку он поставляется с встроенными инструментами и функциональными возможностями, существует согласованность, а компоненты гибкие, прочные и надежные по сравнению с другими платформами.
  • Он построен на основе компонентной архитектуры, которая встраивает глубокую привязку в компоненты. Каждый из этих компонентов содержит элементы с соответствующими функциональными возможностями. Кроме того, вы обнаружите, что элементы в этих компонентах хорошо инкапсулированы и слабо связаны. Эта характеристика помогает сделать компоненты многоразовыми, а также помогает повысить их тестируемость и поддерживать обслуживание.
  • Глобальная поддержка сообщества, доступная для Angular JS, является одним из факторов, которые делают его идеальной платформой JavaScript. Вы увидите, что разработчики и дизайнеры постоянно сотрудничают и вносят свой вклад в сообщество, повышая надежность и доверие к этому фреймворку.
  • С помощью TypeScript вы можете наслаждаться такими функциями, как статическая проверка шрифтов, высокопроизводительная типизация и объектно-ориентированные шаблоны, что снова делает его одним из лучших фреймворков JavaScript.
  • Одной из лучших частей использования Angular JS является простота разработки и настройки объектной модели документа (DOM).
  • Вы можете легко создавать мощные шаблонные решения, используя библиотеки Аngular, которые предназначены для этой конкретной функции.
  • Когда вы пытаетесь провести модульный тест в Angular JS, вам необходимо ввести фиктивные данные в контроллер, и к этому результату можно получить доступ с его поведением в представлении. Разрабатывайте каждую из этих страниц по отдельности, которые в дальнейшем могут быть объединены с компонентами для просмотра результата.
  • Привлекательный пользовательский интерфейс с привязкой данных сочетается с одной маршрутизацией, что является еще одним важным преимуществом.
  • Требуется, чтобы разработчики обязательно синхронизировали данные между моделью, представлением и компонентом.
  • Фреймворк предоставляет возможность создавать повторно используемые компоненты с помощью директив, так как имеет расширение для синтаксиса HTML.

Недостатки или минусы Angular JS

Теперь давайте рассмотрим основные недостатки использования Angular JS.

  • Первая версия Angular имеет сложный синтаксис, что делает ее неудобной для работы. (Но если вы решите использовать TypeScript 2.4, вы избавитесь от всех этих сложностей, что упростит обучение и работу.)
  • Есть проблемы миграции, с которыми люди утверждают, что столкнулись при переходе от одной из старых версий к последним.
  • Как мы уже говорили, разработчики могут легко разработать индивидуальный DOM, но нет никакой гарантии, насколько хорошо эти элементы DOM будут работать.
  • Сторонняя интеграция — непростая задача для разработчиков при работе с Angular JS.
  • Параметры маршрутизации могут быть меньше, и даже доступные ресурсы не имеют ничего хорошего, когда дело доходит до маршрутизации.
  • Может быть непросто отлаживать фреймворк в любое время.
  • Поскольку он содержит интерактивные элементы встроенных страниц, страницы могут быть медленными, что снова является недостатком.
  • Для изучения и понимания Angular JS, особенно для новичков, может потребоваться довольно много времени.

Некоторые из компаний, которые успешно используют Angular JS — Udemy, PayPal, Google, AWS, Crunchbase, YouTube, Freelancer, Nike и другие.

Преимущества или плюсы React JS

Ниже приведены основные плюсы React JS. Посмотрим на основные моменты.

  • Одна из лучших частей использования React JS заключается в том, что фреймворк легко изучить и понять. Синтаксис React JS легче понять по сравнению с другими фреймворками JavaScript. Если у вас есть четкое представление и понимание навыков написания HTML, то вам не нужно беспокоиться — просто примите решение. Вам не нужно беспокоиться о серьезных сложностях, как в TypeScript JS в Angular.
  • Вы можете использовать виртуальный DOM, который, как известно, умеет организовывать документы в форматах XML, HTML или XHTML по мере необходимости в виде дерева. Это наиболее предпочтительный формат веб-браузерами при анализе различных компонентов любого веб-приложения.
  • Нет никакого нарушения родительских данных, вызванного дочерними данными, из-за нисходящей привязки данных, что, как правило, оказывает влияние на фреймворки.
  • Он использует 100% -ную библиотеку JavaScript с открытым исходным кодом, которая обновляется ежедневно.
  • Высокий уровень гибкости.
  • Вы можете наслаждаться максимальной отзывчивостью.
  • В сочетании с ES6 / 7 он может принимать любое количество нагрузки.
  • Вы можете легко перейти с одной версии на другую без каких-либо осложнений.
  • Поскольку его архитектура полностью основана на компонентах, каждый из этих компонентов можно легко импортировать.
  • Можно повторно использовать коды, некогда уже написанные в React JS.
  • Процесс отладки намного проще и легче по сравнению с другими платформами.
  • Пользовательский интерфейс довольно прост.
  • Обновления не занимают слишком много времени и упрощаются благодаря поддержке со стороны интерфейса и сервера.
  • С помощью React JS можно разрабатывать изоморфные или универсальные веб-приложения, обеспечивающие рендеринг на стороне сервера.
  • Фреймворк совместим с платформами iOS и Andro >Теперь рассмотрим основные недостатки React JS.

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

Вы можете сравнить все функции и недостатки, которые мы перечислили в этой статье, чтобы вам было легче понять, какой из двух фреймворков, Angular JS vs React JS, лучше подходит для вашего бизнеса или потребностей проекта. Подумайте, что нужно вашему проекту. Какие функции ему подходят. И после этого на основании ваших требований, сделайте правильный выбор, наблюдая в итоге, как разворачивается магия и как она помогает вам завоевывать клиентов.

Всем успешной работы и творчества!

ReactJS/React Native-разработчик

Сегодня уже необязательно иметь 3 команды разработчиков, чтобы поддерживать несколько разных проектов, например:
— веб-сайт на ReactJS и JS,
— iOS-приложение на Swift,
— Android-приложение на Java или Kotlin.

React JS вместе с React Native позволят одному специалисту создать многофункциональный сайт и на его базе разработать мобильные приложения для Android и iOS.

React Native был разработан компанией Facebook. На нём написаны мобильные приложения Facebook, Instagram, Skype, Uber Eats, Pinterest и многие другие.

Для кого этот курс

JavaScript-разработчики с навыками HTML/CSS.

Выпускной проект для портфолио

Вы разработаете веб-приложение, похожее на twitter на ReactJS и Redux. Затем перенесёте на мобильные устройства с использованием React Native и Redux.

Разработчик JavaScript в международной финансовой корпорации ING, главный офис которой находится в Амстердаме. Занимается проектированием и поддержкой процессов web-разработки.

8 лет опыта разработки в основном в области Front End. Большую часть карьеры программировал на JavaScript, начиная c 2010 года — в компании «Альпари». После этого работал в стартапе Comindware, в «Тинькофф Банк» (Москва), в голландской IT-компании Backbase.

Получил степень специалиста в университете по специальности «Прикладная математика и кибернетика».

Опытный разработчик мобильных приложений (Android, React Native) с сильными навыками руководства командой. Технический руководитель, менеджер проектов, специалист по облачным сервисам и архитектор решений с сертификатом Google Certified Cloud Architect.

Руководил несколькими проектами c нуля до публикации в качестве архитектора решений, менеджера проектов, Tech Lead’а. Интересуется современными мобильными платформами (iOS, cross platform). В коммерческой разработке с 2010 года.

Окончил факультет технической кибернетики в Санкт-Петербургском политехническом университете Петра Великого. Работал в Kaspersky Lab, EPAM Systems, Reksoft, Fonum Inc., Syncplicity.

Образование: МГТУ им. Баумана, факультет информатики и управления, кафедра «Компьютерные системы, вычислительные комплексы и сети».

Опыт работы: 4 года. Ключевые навыки: CSS3, ES6, Sass, React-Native, JavaScript, React, HTML5, Redux, Bootstrap.

Работал над мобильным приложением для My AYR и Card Share на React Native. На текущий момент работает ведущим мобильным разработчиком в Рокетбанке.

Тренер в Luxoft Training Center, ведущий разработчик, кандидат физико-математических наук.
Программирует с начальных классов.

Разрабатывает на разных платформах: большие и маленькие проекты, высоконагруженные и очень красивые, многим известные и совсем специфические.

Влюблён в элегантность и оригинальность JavaScript как классического, так и современного во всех его проявлениях.

Сейчас разрабатывает web-приложения c UI на React и Angular.

Окончил Волгоградский государственный технический университет по специальности «Автоматизированные системы обработки информации и управления». Увлёкся программированием ещё в студенческие годы (в 2010 году) и остановиться так и не смог. В коммерческой разработке с 2012 года.
Работал с проектами разного масштаба, прошёл путь от Junior до Senior. С 2020 года — старший инженер-программист в EPAM Systems, с 2020 по май 2020 — технический руководитель по разработке софта в Skywind Group.
Участвовал в международном проекте компании Ericsson, занимался web-программированием и собственными проектами.
Является специалистом по архитектуре веб-приложений, хорошо знает JS/NodeJS, Mongo, MySQL, фреймворки Express, Koa2, React, AngularJS. Уверен, что в программировании всё приходит с практикой.

Рефакторинг react из ES5 в ES6

Давайте посмотрим на некоторые из этих новых возможностей:

  • Классы
  • Расширения объектых литералов
  • Block-scoped binding constructs (let + const)
  • Property Initializers
  • Стрелочные функции
  • Template Strings
  • Desconstructing и Spread аттрибуты
  • Генераторы
  • Data Structures (Map, Set, WeakMap, WeakSet)
  • . и многое другое

Транспайлеры

Мы будем мспользовать ES6 с транспайлерами для конвертирования нашего кода в ES5-стандарт, поскольку код, написанный на ES6, современным браузерам «не по зубам». Вот несколько популярных транспайлеров: Traceur, Babel.

Babel

Babel был создан Себастьяном МакКензи at the fall of 2014. Babel поддерживает JSX, ES6 и ES7. It is widely used including Facebook.

Компании, использующие Babel в своих проектах

Классы

ES6 classes provide you with a consize way of writing React components:

Instead of using the React.createClass method to define a component, we can define a bonafide ES6 class that extends React.Component

Property Initializers

In ES6 property types and defaults are static properties of its class.

Начальное состояние компонента может быть определено с помощью ES6.

Стрелочные функции

Метод React.createClass used to perform some extra binding work on your component’s instance methods to make sure that, inside them, the this keyword would refer to the instance of the component in question.

Объединив две фичи ES6 — стрелочные функции и property initializers – opt-in binding to the component instance becomes a easier:

Dynamic property names & template strings

One of the enhancements to object literals includes the ability to assign to a derived property name. We might have originally done something like this to set a piece of state:

Now, we have the ability to construct objects whose property names are determined by a JavaScript expression at runtime. Here, we use a template string to determine which property to set on state:

Destructuring & spread attributes

Often when composing components, we might want to pass down most of a parent component’s props to a child component, but not all of them. In combining ES6+ destructuring with JSX spread attributes, this becomes easier:

13 разных и функциональных инструментов для React

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

React используется многими веб-разработчиками и обладает немалой славой в мире. И тому существует множество подтверждений. Легкая и простая библиотека Javascript, созданная Facebook, постоянно развивается, обладает большим сообществом и еще большим количеством дополнительных инструментов. Что и позволяет создавать красивые и функциональные интерфейсы для веб-приложений и сайтов с использованием многоразовых строительных блоков, называемых компонентами.

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

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

Reactide

Reactide – специализированная интегрированная среда разработки (IDE). Представляет собой кросс-платформенный инструмент, который позволяет визуализировать компоненты React без какой-либо сборки или конфигурации сервера. Кроме того, Reactide способен запустить встроенный сервер узлов и пользовательский симулятор браузера. Это также делает возможным потоковую визуализацию.

React Studio

React Studio в большей степени необходим дизайнерам, которые хотят самостоятельно и быстро создать небольшое приложение на React, но не имеют навыков и знаний (что особенно важно) работы с кодом. Визуальный инструмент проектирования как раз и позволяет создавать компоненты React и потоковые приложения. React Studio также имеет встроенные инструменты рисования, мобильный просмотр получившегося (как будет выглядеть на мобильном устройстве) и даже позволяет импортировать файлы из Sketch, Illustrator, Photoshop. Таким образом, вся суть инструмента в том, что вы рисуете и создаете сам проект, но код создается за вас автоматически, и дизайнер к нему практически не «прикасается». И еще одно «но». Приложение поддерживает только систему MacOS 10.9 или выше.

React Styleguidist

React Styleguidist – еще одна интерактивная среда для работы с отдельными компонентами React. В результате разработчик получает возможность сосредоточиться на работе над одним каким-то компонентом и также посмотреть на примеры использования иных различных компонентов React. Но благодаря наличию dev-сервера можно в любой момент видеть все свои компоненты в одном месте и переключаться между ними при необходимости. Кроме того инструмент поддерживает ES6, Flow и TypeScript, что делает его функциональность более обширной.

Расширение для браузеров Chrome и Firefox

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

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

На примере сайтов Почта России, deviantart, gw2armory. Полный список всех сайтов и приложений на React представлен на Github Facebook и среди них есть много знакомых нам и известных сайтов (eBay, Uber, BBC, Feedly, DropBox, Disqus, даже Яндекс Диск и иные).

Несмотря же на то, что расширение создано только для двух браузеров, оно прекрасно себя показывает в работе и в Opera при установленном расширении Install Chrome Extensions.

React Sight

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

Все на тех же примерах…

Инструмент имеет поддержку React Router и Redux, поэтому воспользоваться им может еще большее количество разработчиков.

React Boilerplate

Иногда изучение новых сред разработки становится утомительным и сложным. Многие начинающие веб-верстальщики и разработчики стараются найти что-то простое и быстрое, способное делать большую работу в фоновом режиме и только постепенно переходить к изучению кода. Если необходим стартовый комплект (starter kit), позволяющий быстро создать новый проект в React, то Boilerplate может стать отличным решением. Высокая производительность, масштабируемость, автономность работы, JavaScript следующего поколения для возможности использования последних и новейших функций, такие как строки шаблонов и функции стрелок.

Особенность инструмента в том, что, по сути, это набор модулей, признанных стандартом и проверенных в работе многочисленных проектов, в который также были добавлены технологии по отладке кода. Из присутствующих модулей выделим: Redux Saga, ImmutableJS, React Router, Styled Components, Jest, React Loadable и прочие.

React Guide Generator Style

Для проектов React нужны и руководства по стилю, а значит, создавать их все равно приходится. Удобнее делать это в React Guide Generator Style. Все, что требуется – создать отдельный файл и добавить потом некоторую документацию в JavaScript, используя некоторые предопределенные правила. Генератор стилей имеет подробную и обширную документацию и поддерживает синтаксис ES6. На GitHub подробно расписано, как установить инструмент и приступить к описанию стиля.

React Extension Pack

Мы уже говорили о расширениях для веб-браузеров, теперь посмотрим на среды разработки, в частности Visual Studio Code. Для нее тоже была выпущена отдельная надстройка, именуемая React Extension Pack. В комплекте находится не одна надстройка, а целых семь, среди которых Reactjs code snippets, JavaScript (ES6) snippets, NPM IntelliSense, npm, функция поиска для node_modules и другие. Если добавить эту сборку к среде разработки, то можно реально почувствовать удобство в работе и множество возможностей.

React-Bootstrap

И для Bootstrap тоже есть соответствующее расширение. Bootstrap в настоящее время является самым популярным фреймворком и спорить здесь сложно, хотя, наверняка, некоторые и найдут возможности и интересные моменты для этого. Разработанная Twitter, библиотека состоит из набора CSS и HTML шаблонов для создания разных элементов веб-страниц: навигации, кнопки, формы и прочее. Иными словами, все из чего создается пользовательский интерфейс.

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

React Toolbox

React Toolbox, в первую очередь, понадобится тем, кто использует принципы, спецификации и основы Google Material Design. В основе библиотеки находятся такие технологии веб-интерфейсов, как SASS, ES6, WebPack. Таким образом, можно легко добавить компоненты React Toolbox в свой рабочий процесс Webpack, но можно также использовать и любой другой модуль bundler. React Toolbox также имеет сайт, что-то наподобие «песочницы», где можно посмотреть и поэкспериментировать над разными компонентами и увидеть их в действии.

React Belle

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

React Grommet

React Grommet, в первую очередь, позиционировался создателями, как фреймворк для разработки enterprise-приложений – «продвинутый UX-фреймворк для корпоративных приложений». Например, имеется некоторое количество данных и их надо визуализировать, или некоторые данные поступают регулярно с датчиков или от действий пользователей и их нужно обработать в режиме реального времени. Вот для таких сложных задач и предназначается Grommet.

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

React Cosmos

Инструментарий для работы с многоразовыми компонентами React. Изначально React Cosmos сканирует ваш проект, разделяя на компоненты. Затем их можно рендерить в любой комбинации state, context, props. Удобно это только в том случае, если проект уже функционирует, но внезапно потребовались новые функции и возможности для уже имеющихся компонентов. И, разумеется, удобство инструментария заключается также в возможности работы в режиме реального времени, благодаря использованию ресурсов из хранилища localstorage или API-ответов (responses).

Завершение

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

Аналогично тому, в каком количестве существуют надстройки и расширения для Photoshop (мы рассказывали в нашем блоге), у React также очень и очень много разных инструментов. Некоторые весьма популярны и известны, некоторые – нет, но имеют весьма удобный функционал, а часть библиотек еще только-только появилась и набирает звездочки на Github. Мы отобрали только малую часть тех, что могут пригодиться в разных ситуациях frontend-разработки.

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

Добавить комментарий