[Книга] Fullstack React Native - Полное руководство по React Native - Видеоуроки. React книги


[Книга] Fullstack React - Полное руководство по ReactJS

Обновленное, подробное руководство по React. Станьте экспертом ReactJS уже сегодня. Прекратите тратить свое время на запутаные и неполные уроки и книги. Есть так много неправильных, запутанных и устаревших статей и книг... В одном учебнике говорится одно, в другом нечто совершенно иное. Слишком много вариантов. Существует пятьдесят различных паттернов и дюжина различных реализаций Flux. Какой из них лучше? Гугл только доводит вас до страха ... Не так много хороших обучающих программ, которые показывают, как все работает вместе. React и все его сумасшедшие библиотеки так часто обновляются... Как можно быть увереным, что они будут идти в ногу со временем?С таким активным сообществом существует так много обновлений, что кажется невозможным узнать о том, что лучше, и что просто шум.

Как все это сочетается?React - это модульная экосистема, но документы API часто фокусируются на одной библиотеке.

У реакта очень много всего:

  • Props. props - это «аргументы» для ваших компонентов.
  • Обработчики событий - onClick указывает функцию, которую мы можем вызывать при нажатии элемента.
  • Вложенные компоненты. Компоненты могут использоваться другими компонентами. Приложение React - это дерево вложенных компонентов.
  • Динамические атрибуты. Смешивая код и разметку, мы можем легко изменить представление, основанное на состоянии.
  • React - это экосистема. Правильный ответ - это только слой с видом, но есть чему поучиться, чтобы заставить его работать вместе.
  • GraphQL.  GraphQL - это мощная альтернатива REST, которая позволяет клиентским приложениям определять свои собственные типизированные представления.
  • Relay. Relay - это новый способ структурирования клиентских приложений, который совмещает требования сбора данных и компонентов React.
  • Routing. React не имеет встроенной поддержки маршрутизации, но есть популярная библиотека, которая хорошо играет с другими.

Готовы усвоить React ?

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

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

Тонны исходников кода

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

15 главКаждая глава посвящена другой части экосистемы, но в контексте приложения. Итак, вы увидите, как все сочетается.

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

Что вы узнаете?

  • Базовое и передовое понимание компонентов React
  • Передовые, глубокие знания о том, как работает React
  • Как взаимодействовать с серверами с использованием API
  • Полное понимание использования Redux
  • Как создавать, проверять и заполнять интерактивные формы
  • Как использовать встроенные стили для идеальных компонентов
  • Как протестировать компоненты React
  • Как построить и использовать изоморфные компоненты
  • Как получить контроль над процессом сборки
  • Глубокое понимание моделирования данных с помощью props и state
  • Глубокое понимание FLUX
  • Как использовать маршрутизацию на стороне клиента для страниц в ваших приложениях
  • Как писать передовые компоненты, такие как автозаполненный поиск, перетаскивание «n drop» и бесконечная прокрутка
  • Как взаимодействовать с REST, GraphQL и Relay
  • Вводные знания React Native
  • И многое, многое другое

21.07.2018 - BOOK UPDATED

coursehunters.net

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

И Redux для увеличения кругозора.

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

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

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

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

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

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

Hacking with React

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

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

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

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

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

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

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

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

React и Redux с Cabin

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

The React Convention

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

geekbrains.ru

Основы React (текстовый учебник, 2-е издание) / Хабр

Прошло 2.5 года после публикации первой версии подробного туториала по основам React. За это время gitbook насчитал 250 000+ уникальных посетителей.

Под катом подробнее об учебнике и список изменений.

Во-первых, это текст. С legacy.gitbook все еще можно скачивать в формате PDF/epub/mobi. В новой версии я эту опцию не нашел и, к сожалению, новая версия gitbook плохо работает без VPN.

Во-вторых — это такой же скупой на "воду" учебник. Текст, картинки, исходный код.

В процессе обучения описывается простой сценарий: лента новостей (из json-файла) + возможность добавить новость. Никаких заигрываний с бэкэндом. Большая часть разработки идет прямо в index.html, и только под конец мы знакомимся с create-react-app.

Цель данного учебника: познакомить с React'ом тех, кто уже знаком с html/css и имеет представление об основах js. Библиотека добавляется как обычный script. Это было удобно в пору jQuery и я не стал переделывать формулу обучения.

Где?

Скачать для оффлайна или читать в онлайне — legacy.gitbook

Так как у gitbook могут быть проблемы с доступностью, версия 2.0.0 выложена на Yandex.Disk (PDF/ePub/mobi)

Чему вы научитесь в процессе обучения?

  • Создавать компоненты, учитывая propTypes
  • Грамотно использовать props и state компонента
  • Работать с формой
  • Работать с react dev tools

Что было обновлено:

  • React 16.4
  • Исходный код (полностью)
  • Текст (частично + новые разделы)
  • Скриншоты (полностью)

Бесплатно, значит так себе...

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

Как сделать книгу лучше?

Это же open-source, друзья. У гитбука удобный интерфейс отправки ошибки. Выделили текст, отправили исправление/пожелание/замечание.

Успехов в обучении. Туториал по Redux в процессе обновления.

habr.com

[Книга] [Dave Ceddia] - Чистый React

Пошаговое руководство по освоению React. «Я застрял в учебниках!» Даже после просеивания бесчисленных обучающих программ и видеоуроков вы все еще не можете создать свое приложение? Это безумие. Одну минуту вы киваете головой и уверены что все понимаете, а через две минуты перед вами мигающий курсор и вы не знаете что делать дальше. Знания похожи на мираж - в теории все получается, до того времени пока не наступает практика.

И дело не только в том, что знания сами по себе скользкие. Существует также бесконечный список библиотек и инструментов для изучения: Webpack, Babel, React Router, Redux, Sagas, Thunks, AJAX, Jest,... Новые библиотеки появляются еженедельно, транслируются в информационных бюллетенях и в Twitter. «Черт возьми, мне нужно сейчас изучать стилизованные компоненты? Что случилось с CSS?» Вы начинаете тихо спрашивать себя - а возможно NPM исчезнет за ночь. Возможно, у них нет резервных копий. Возможно люди забудут. Люди действительно используют все это? Создать реальные приложения? Иногда это кажется большой шуткой. Но никто не смеется, и никто, кажется, не сдаётся.

Большинство советов не стоит той цены, которую вы за них заплатили... Существует много советов. Многие начинаются с «А давайте клонируем этот шаблон - у него есть все что вам нужно!» И заканчивается «React это так просто, посмотри только, насколько это легко. В то время вы уже швыряете стульями по комнате, но ввесь интернет говорит о том, насколько велик Реакт, и если вы просто сделаете еще одно приложение TODO, вы наконец научитесь работать с ним.

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

Я создал упрощенный клон Slack: у него есть каналы и пользователи, вы можете отправлять сообщения в частном порядке или по отдельным каналам. И он полностью сделан на React! Он использует обычный CSS. Мне не нужно было создавать конфигурацию Webpack. Я не возился с React Router и Redux. Я даже не подключил его к реальному серверу. Сообщения и пользователи являются fake data.

«Подождите, что?» Что хорошего в приложении с поддельными данными?

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

Вспомните: когда вы учились кататься на велосипеде, вы ездили на велосипеде по оживленной дороге прям в первый день? Нет, вы вероятно всего катались по пустым уличкам. Кто-нибудь давал вам несколько шаров и сказал: «Сейчас научишься жонглировать одновременно всеми ими.» Нет, вы просто сосредоточены на том, чтобы не упасть с велосипеда. И у вас скорей всего былы еще два страховочных колеса.

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

Создавайте небольшие приложения с этой книгой и учитесь делать правильные приложения. Вы получите хорошую практику, создав серию небольших компонентов и микро приложений - здесь нет большого монолитного приложения. Упражнения заставят писать свой собственный код с самого начала - это не учебник по копипасту. Научитесь превращать макеты и эскизы непосредственно в код и учиться «думать о компонентах». И я обещаю, что не заставлю вас написать еще одно приложение TODO. У нас их было достаточно. Вот несколько приложений, которые вы будете создавать самостоятельно:

  • Slack
  • Reddit
  • Pinterest
  • Hacker News

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

Что охватывает книга?

  • Легкая настройка проекта с помощью Create React App (вы будете запускать код в течение нескольких минут)
  • Стратегии отладок на тот случай, когда все идет не так как надо
  • Освоение синтаксиса JSX, включая «if», «Loops» и «Динамические чайлд компоненты»
  • Использование props для создания повторно используемых компонентов и для связи между ними
  • Как PropTypes может сэкономить вам время отладки и помочь «будущему себе» помнить, как использовать компоненты, которые вы написали
  • Использование «children» prop для рендеринга динамического контента
  • Как написать React в современном ES6 Javascript, с нежным введением в синтаксис ES6
  • Как работают элементы управления в React (контролируемые и неконтролируемые)
  • Где и как правильно использовать состояние компонента в приложении React
  • Компоненты Stateful vs Stateless
  • Жизненный цикл компонента, и как его использовать в ваших интересах

В книге есть по крайней мере 11 пошаговых примеров, а также 25 упражнений для укрепления ваших знаний. Вы начнете с простых компонентов (твиты, диалоговые окна, электронные письма) и перейдете к более сложным мини-приложениям (упрощенные версии Trello, Hacker News, Pinterest, Reddit и Slack).

В этой версии книги:

  • 158 страниц
  • PDF, EPUB, and MOBI
  • 11 примеров и 25 упражений

Updated 01.06.2018

Я просмотрел книгу и обновил все для Реакт 16.4. Поскольку вы уже купили книгу, вы получаете обновление бесплатно! Вот некоторые из изменений: Добавлены разделы о фрагментах и Ref. Добавлено другое упражнение JSX. Заменены упражнения на основе обратной связи. Добавлено обсуждение новых методов жизненного цикла в React 16.3 и немного о границах ошибок и componentDidCatch. Плюс куча улучшений в формулировке повсюду. Наслаждайтесь!

coursehunters.net

[Книга] Fullstack React Native - Полное руководство по React Native

Обновленное, углубленное, полное руководство по React Native. Создавайте красивые мобильные приложения с JavaScript и React. Предоставляйте высококачественные мобильные приложения со скоростью света. Создание такого же приложения как для Swift, так и для Java занимает много времени. С помощью React Native вы можете выпустить собственное приложение на iOS и Android с помощью одного JavaScript. Вы или ваша команда уже знаете JavaScript? Используйте имеющиеся знания для создания мобильных приложений мирового класса. Reac Native экосистема развивается очень быстро. Начните уже сегодня. С таким активным сообществом и множеством обновлений, вы не можете понять, что лучше, а что просто шум. Мы освещаем новейшую версию React Native и лучшие практики, чтобы вы могли развиваться с уверенностью.

Что вы построите?

Когда вы покупаете Fullstack React Native, вы не покупаете только книгу, а десятки примеров кода. Каждая глава книги поставляется с полным проектом, который использует концепции в главе и обеспечивает поддержку как iOS (включая экраны iPhone X), так и Android.

  • A Weather App. Поднимитесь еще выше с помощью React Native, создав приложение погоды, которое позволяет пользователю вводить свое местоположение и получать данные о погоде от стороннего API.
  • A Time Tracker. Извлеките свои знания React и создайте приложение для отслеживания времени.
  • A Messaging App. Поймите как использовать основные API-интерфейсы React, такие как Geolocation, CameraRoll, Keyboard, NetInfo и многое другое, создавая приложение для обмена сообщениями.
  • Build an Instagram Clone. Узнайте, как стилизовать свое приложение, управлять вводом пользователя, добавлять комментарии и отображать фотографии с Unsplash

Много исполняемого кодаКогда вы получаете доступ к Fullstack React Native, вы получаете не только книгу, но и доступ к живым примерам кода. Каждая глава книги поставляется с полным проектом, который основывается на концепциях главы.

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

Всегда актуальнаяПо мере созревания структуры React Native, мы будем обновлять наш код и главы книги.

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

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

Скринкаст (еще не доступен)

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

coursehunters.net

функциональная веб-разработка» / Блог компании Издательский дом «Питер» / Хабр

Привет, Хаброжители! В декабре мы издали книгу Алекса Бэнкса и Евы Порселло, цель которой — научить писать эффективные пользовательские интерфейсы при помощи React и систематизация новых технологий, позволяющая сразу же приступить к работе с React. Чтение книги не предполагает никаких предварительных знаний React. Все основы библиотеки будут представлены с самого начала. Сейчас мы рассмотрим раздел «Управление состоянием React»

До сих пор свойства использовались только для обработки данных в компонентах React. Свойства имеют неизменяемый характер. После отображения свойства компонента не изменяются. Чтобы изменить пользовательский интерфейс, понадобится другой механизм, способный заново отобразить дерево компонента с новыми свойствами. Состояние React является его неотъемлемой частью, предназначенной для управления данными, которые будут изменяться внутри компонента. Когда состояние приложения меняется, пользовательский интерфейс отображается заново, чтобы отразить эти нововведения. Пользователи взаимодействуют с приложениями. Они перемещаются по данным, ищут их, фильтруют, выбирают, добавляют, обновляют и удаляют. Когда пользователь работает с приложением, состояние программы изменяется, и эти перемены отображаются для пользователя в UI. Появляются и исчезают экраны и панели меню. Меняется видимое содержимое. Включаются и выключаются индикаторы. В React пользовательский интерфейс отражает состояние приложения.

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

Посмотрим, как можно встроить состояние в наши компоненты React.

Внедрение состояния компонента

Состояние представляет данные, которые при желании можно изменить внутри компонента. Чтобы показать это, рассмотрим компонент StarRating (рис. 6.7). Этот компонент требует два важных фрагмента данных: общее количество звезд для отображения и рейтинг, или количество выделенных звезд.

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

const Star = ({ selected=false, onClick=f=>f }) => <div className={(selected) ? "star selected" : "star"} onClick={onClick}> </div> Star.propTypes = { selected: PropTypes.bool, onClick: PropTypes.func } Каждый элемент звезды Star будет состоять из контейнера div, включающего атрибут class со значением 'star'. Если звезда выбрана, то к ней дополнительно будет добавлен атрибут class со значением 'selected'. У этого компонента также имеется дополнительное свойство onClick. Когда пользователь щелкает кнопкой мыши на контейнере div какой-нибудь звезды, вызывается данное свойство. Притом родительский компонент, StarRating, будет оповещен о щелчке на компоненте Star.

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

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

Сначала рассмотрим способ внедрения состояния в компонент, определенный с помощью метода createClass:

const StarRating = createClass({ displayName: 'StarRating', propTypes: { totalStars: PropTypes.number }, getDefaultProps() { return { totalStars: 5 } }, getInitialState() { return { starsSelected: 0 } }, change(starsSelected) { this.setState({starsSelected}) }, render() { const {totalStars} = this.props const {starsSelected} = this.state return ( <div className="star-rating"> {[...Array(totalStars)].map((n, i) => <Star key={i} selected={i<starsSelected} onClick={() => this.change(i+1)} /> )} <p>{starsSelected} of {totalStars} stars</p> </div> ) } }) Используя метод createClass, состояние можно инициализировать, добавив к конфигурации компонента метод getInitialState и возвратив объект JavaScript, который изначально устанавливает для переменной состояния starsSelected значение 0.

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

Когда компонент отображается на экране, переменная состояния starsSelected деструктурируется из элемента this.state. Он используется для отображения рейтинга в виде текста в элементе абзаца, а также для подсчета количества выбранных звезд, выводимых на экран. Каждый элемент Star получает свое свойство selected путем сравнения своего индекса с количеством выбранных звезд. Если выбрано три звезды, то первые три элемента Star установят для своего свойства selected значение true, а все остальные звезды будут иметь для него значение false.

И наконец, когда пользователь щелкает кнопкой мыши на отдельно взятой звезде, индекс конкретно этого элемента Star увеличивается на единицу и отправляется функции change. Данное значение увеличивается на единицу, поскольку предполагается наличие у первой звезды рейтинга 1, даже притом, что индекс у нее равен нулю.

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

class StarRating extends Component { constructor(props) { super(props) this.state = { starsSelected: 0 } this.change = this.change.bind(this) } change(starsSelected) { this.setState({starsSelected}) } render() { const {totalStars} = this.props const {starsSelected} = this.state return ( <div className="star-rating"> {[...Array(totalStars)].map((n, i) => <Star key={i} selected={i<starsSelected} onClick={() => this.change(i+1)} /> )} <p>{starsSelected} of {totalStars} stars</p> </div> ) } } StarRating.propTypes = { totalStars: PropTypes.number } StarRating.defaultProps = { totalStars: 5 } При установке компонента ES6 вызывается его конструктор со свойствами, внедренными в качестве первого аргумента. В свою очередь, эти свойства отправляются родительскому классу путем вызова метода super. В данном случае родительским является класс React.Component. Вызов super инициализирует экземпляр компонента, а React.Component придает этому экземпляру функциональную отделку, включающую управление состоянием. После вызова super можно инициализировать переменные состояния нашего компонента.

После инициализации состояние функционирует точно так же, как и в компонентах, созданных с помощью метода createClass. Оно может быть изменено только путем вызова метода this.setState, который обновляет указанные части объекта состояния. После каждого вызова setState вызывается функция отображения render, обновляющая пользовательский интерфейс в соответствии с новым состоянием.

Инициализация состояния из свойств

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

При использовании метода createClass весьма приемлемым способом инициализации переменных состояния на основе поступающих свойств будет добавление метода componentWillMount. Он вызывается один раз при установке компонента, и из этого метода можно вызвать метод this.setState(). В нем также имеется доступ к this.props; следовательно, чтобы помочь процессу инициализации состояния, можно воспользоваться значениями из this.props:

const StarRating = createClass({ displayName: 'StarRating', propTypes: { totalStars: PropTypes.number }, getDefaultProps() { return { totalStars: 5 } }, getInitialState() { return { starsSelected: 0 } }, componentWillMount() { const { starsSelected } = this.props if (starsSelected) { this.setState({starsSelected}) } }, change(starsSelected) { this.setState({starsSelected}) }, render() { const {totalStars} = this.props const {starsSelected} = this.state return ( <div className="star-rating"> {[...Array(totalStars)].map((n, i) => <Star key={i} selected={i<starsSelected} onClick={() => this.change(i+1)} /> )} <p>{starsSelected} of {totalStars} stars</p> </div> ) } }) render( <StarRating totalStars={7} starsSelected={3} />, document.getElementById('react-container') ) Метод componentWillMount является частью жизненного цикла компонента. Он может использоваться для инициализации состояния на основе значений свойств в компонентах, созданных с помощью метода createClass, или в компонентах класса ES6. Более подробно жизненный цикл компонента будет рассмотрен в следующей главе.

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

constructor(props) { super(props) this.state = { starsSelected: props.starsSelected || 0 } this.change = this.change.bind(this) } В большинстве случаев нужно избегать установки переменных состояния из свойств. Подобными схемами стоит пользоваться только в самых крайних случаях. Добиться этого не трудно, поскольку при работе с компонентами React ваша задача заключается в ограничении количества компонентов, имеющих состояние.

Состояние внутри дерева компонента

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

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

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

Новый взгляд на приложение органайзера цветов

Органайзер образцов цвета позволяет пользователям добавлять, называть, оценивать и удалять цвета в видоизменяемых ими списках. Все состояние органайзера может быть представлено с помощью одного массива:{ colors: [ { "id": "0175d1f0-a8c6-41bf-8d02-df5734d829a4", "title": "ocean at dusk", "color": "#00c4e2", "rating": 5 }, { "id": "83c7ba2f-7392-4d7d-9e23-35adbe186046", "title": "lawn", "color": "#26ac56", "rating": 3 }, { "id": "a11e3995-b0bd-4d58-8c48-5e49ae7f7f23", "title": "bright red", "color": "#ff0000", "rating": 0 } ] } Из этого массива следует, что нам нужно отобразить три цвета: океана в сумерки (ocean at dusk), зеленого газона (lawn) и ярко-красного оттенка (bright red) (рис. 6.8). Массив предоставляет шестнадцатеричные значения, соответствующие тому или иному цвету, и текущий рейтинг для каждого из них, выводимый на экран. Он также дает возможность уникальной идентификации каждого цвета. Эти данные состояния будут управлять приложением. Они станут использоваться для создания пользовательского интерфейса при каждом изменении этого объекта. Когда пользователи добавляют или удаляют цвета, эти образцы добавляются в массив или удаляются из него. Когда пользователи дают оценку цветам, рейтинги последних изменяются в массиве.

Передача свойств вниз по дереву компонентов

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

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

const StarRating = ({starsSelected=0, totalStars=5, onRate=f=>f}) => <div className="star-rating"> {[...Array(totalStars)].map((n, i) => <Star key={i} selected={i<starsSelected} onClick={() => onRate(i+1)}/> )} <p>{starsSelected} of {totalStars} stars</p> </div> Во-первых, starsSelected больше не является переменной состояния, теперь это свойство. Во-вторых, к данному компоненту добавлено свойство в onRate, представляющее собой функцию обратного вызова. Вместо того чтобы при изменении пользователем оценки вызвать setState, теперь starsSelected вызывает onRate и отправляет оценку в качестве аргумента.

Ограничение, накладываемое на состояние, — размещение его только в одном месте, в корневом компоненте, — означает, что все данные должны передаваться вниз дочерним компонентам в качестве свойств (рис. 6.9).

В органайзере состояние складывается из массива образцов цвета, объявленного в компоненте App. Эти цвета передаются вниз компоненту ColorList в качестве свойства:

class App extends Component { constructor(props) { super(props) this.state = { colors: [] } } render() { const { colors } = this.state return ( <div className="app"> <AddColorForm /> <ColorList colors={colors} /> </div> ) } } Изначально массив цветов пуст, поэтому компонент ColorList вместо каждого цвета будет отображать сообщение. Когда в массиве имеются цвета, данные для каждого отдельно взятого образца передаются компоненту Color в качестве свойств:const ColorList = ({ colors=[] }) => <div className="color-list"> {(colors.length === 0) ? <p>No Colors Listed. (Add a Color)</p> : colors.map(color => <Color key={color.id} {...color} /> ) } </div> Теперь компонент Color может отобразить название и шестнадцатеричное значение цвета и передать его оценку вниз компоненту StarRating в качестве свойства:const Color = ({ title, color, rating=0 }) => <section className="color"> <h2>{title}</h2> <div className="color" style={{ backgroundColor: color }}> </div> <div> <StarRating starsSelected={rating} /> </div> </section> Количество выбранных звезд, starsSelected, в звездном рейтинге поступает из оценки каждого цвета. Все данные состояния для каждого цвета переданы вниз по дереву дочерним компонентам в качестве свойств. Когда в корневом компоненте происходят изменения в данных, React, чтобы отразить новое состояние, вносит изменения в пользовательский интерфейс наиболее рациональным образом.

Передача данных вверх по дереву компонентов

Состояние в органайзере цветов может быть обновлено только путем вызова метода setState из компонента App. Если пользователи инициируют какие-либо изменения из пользовательского интерфейса, то для обновления состояния введенные ими данные нужно будет передать вверх по дереву компонентов компоненту App (рис. 6.10). Эта задача может быть выполнена с помощью свойств в виде функций обратного вызова.

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

npm install uuid --save Все новые цвета будут добавляться в органайзер из компонента AddColorForm, который был создан ранее в разделе «Ссылки». У этого компонента имеется дополнительное свойство в виде функции обратного вызова onNewColor. Когда пользователь добавляет новый цвет и отправляет данные формы, вызывается функция обратного вызова onNewColor с новым названием и шестнадцатеричным значением, полученными от пользователя:import { Component } from 'react' import { v4 } from 'uuid' import AddColorForm from './AddColorForm' import ColorList from './ColorList' export class App extends Component { constructor(props) { super(props) this.state = { colors: [] } this.addColor = this.addColor.bind(this) } addColor(title, color) { const colors = [ ...this.state.colors, { id: v4(), title, color, rating: 0 } ] this.setState({colors}) } render() { const { addColor } = this const { colors } = this.state return ( <div className="app"> <AddColorForm onNewColor={addColor} /> <ColorList colors={colors} /> </div> ) } } Все новые цвета могут быть добавлены из метода addColor в компонент App. Эта функция привязана к компоненту в конструкторе, следовательно, у нее есть доступ к this.state и к this.setState.

Новые цвета добавляются путем объединения текущего массива цветов с новым объектом цвета. Идентификатор для последнего устанавливается функцией v4, принадлежащей библиотеке uuid. Таким образом создается уникальный идентификатор для каждого цвета. Название и цвета передаются методу addColor из компонента AddColorForm. И наконец, исходным значением для оценки каждого цвета будет ноль.

Когда пользователь добавляет цвет с помощью компонента AddColorForm, метод addColor обновляет состояние, используя новый список цветов. Как только состояние будет обновлено, компонент App заново отобразит дерево компонентов, применяя новый список. После каждого вызова установки состояния setState вызывается метод отображения render. Новые данные передаются вниз по дереву в качестве свойств и служат для построения пользовательского интерфейса.

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

const Color = ({title,color,rating=0,onRemove=f=>f,onRate=f=>f}) => <section className="color"> <h2>{title}</h2> <button onClick={onRemove}>X</button> <div className="color" style={{ backgroundColor: color }}> </div> <div> <StarRating starsSelected={rating} onRate={onRate} /> </div> </section> Информация, которая будет изменяться в данном приложении, сохраняется в списке цветов. Поэтому к каждому цвету следует добавить свойства в виде функций обратного вызова onRemove и onRate, чтобы данные соответствующих событий удаления и оценки передавались вверх по дереву. Свойства в виде функций обратного вызова onRemove и onRate также будут иметься у компонента Color. Когда цвета оцениваются или удаляются, компонент ColorList должен оповестить свой родительский компонент App о том, что этот цвет нужно оценить или удалить:const ColorList = ({ colors=[], onRate=f=>f, onRemove=f=>f }) => <div className="color-list"> {(colors.length === 0) ? <p>No Colors Listed. (Add a Color)</p> : colors.map(color => <Color key={color.id} {...color} onRate={(rating) => onRate(color.id, rating)} onRemove={() => onRemove(color.id)} /> ) } </div> Компонент ColorList вызовет onRate, если какие-либо цвета оценены, или же onRemove при удалении каких-либо цветов. Этот компонент управляет коллекцией цветов, отображая их на отдельно взятые компоненты Color. Когда отдельно взятые цвета оцениваются или удаляются, ColorList идентифицирует цвет, который подвергся воздействию, и передает эту информацию своему родительскому компоненту через свойство в виде функции обратного вызова.

Родительским для ColorList является компонент App. В нем методы rateColor и removeColor могут быть добавлены и привязаны к экземпляру компонента в конструкторе. Как только понадобится оценить или удалить цвет, эти методы обновят состояние. Они добавлены к компоненту ColorList в качестве свойств в виде функций обратного вызова:

class App extends Component { constructor(props) { super(props) this.state = { colors: [] } this.addColor = this.addColor.bind(this) this.rateColor = this.rateColor.bind(this) this.removeColor = this.removeColor.bind(this) } addColor(title, color) { const colors = [ ...this.state.colors, { id: v4(), title, color, rating: 0 } ] this.setState({colors}) } rateColor(id, rating) { const colors = this.state.colors.map(color => (color.id !== id) ? color : { ...color, rating } ) this.setState({colors}) } removeColor(id) { const colors = this.state.colors.filter( color => color.id !== id ) this.setState({colors}) } render() { const { addColor, rateColor, removeColor } = this const { colors } = this.state return ( <div className="app"> <AddColorForm onNewColor={addColor} /> <ColorList colors={colors} onRate={rateColor} onRemove={removeColor} /> </div> ) } } Оба метода: и rateColor, и removeColor — ожидают получения идентификатора того цвета, который оценивается или удаляется. ID записывается в компоненте ColorList и передается в качестве аргумента методам rateColor или removeColor. Метод rateColor находит оцениваемый цвет и изменяет его рейтинг в состоянии. Для создания нового массива состояния без удаленного цвета метод removeColor использует метод Array.filter.

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

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

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

Чтобы управлять состоянием и сократить объем шаблонного кода в подобных ситуациях, можно применять шаблон проектирования Flux и Flux-библиотеки, подобные Redux.

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

» Более подробно с книгой можно ознакомиться на сайте издательства » Оглавление » Отрывок

Для Хаброжителей скидка 20% по купону — React

habr.com

[Алекс Бэнкс] React и Redux Функциональная веб-разработка

[Alex Banks, Eve Porcello] Functional Web Development with React and Redux

Duration 00:00:00

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

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

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

Твоя оценка

Следи за последними обновлениями и новостями в нашем coursehunters.club, или вступай в наш канал telegram.

Комментарии

Похожие курсы

21-07-2018en fullstack.io Fullstack React Book - The Complete Guide to ReactJS and Friends

Обновленное, подробное руководство по React. Станьте экспертом ReactJS уже сегодня. Прекратите тратить свое время на запутаные и неполные уроки и книги. Есть так много неправильных, запутанных и устаревших статей и книг... В одном учебнике говорится одно, в другом нечто совершенно иное. Слишком много вариантов. Существует пятьдесят различных паттернов и дюжина различных реализаций Flux. Какой из них лучше? Гугл только доводит вас до страха ......

Duration

08-11-2017en

Пошаговое руководство по освоению React. «Я застрял в учебниках!» Даже после просеивания бесчисленных обучающих программ и видеоуроков вы все еще не можете создать свое приложение? Это безумие. Одну минуту вы киваете головой и уверены что все понимаете, а через две минуты перед вами мигающий курсор и вы не знаете что делать дальше. Знания похожи на мираж - в теории все получается, до того времени пока не наступает практика.

Duration

02-06-201810-05-2018 en 129 уроков udemy ReactJs, the complete guide with real world projects

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

Duration 13:36:42

27-06-2018en 65 уроков

Нет лучшей стратегии для изучения новой технологии, кроме создания собственной версии. В этом курсе мы доведем это до крайности. Сначала вы начнете с создания своего собственного Redux. Затем, как только вы поймете ins и outs Redux, вы посмотрите, как подключить этот интерфейс к пользовательскому интерфейсу JavaScript. Затем вы увидите, как React и Redux работают вместе, заменяя свой интерфейс с помощью React. После этого мы рассмотрим проблемы...

Duration 06:56:47

24-07-201821-07-2018 en 72 урока udemy React Front To Back

Изучите React c Context API + Redux  и постройте реальный проект с Firebase/Firestore.  В этом курсе вы научитесь овладевать концепциями React 16.3+, включая новый Context API, а также Redux. Мы будем ориентироваться на определенные концепции при постепенном построении реальных приложений. Если вы никогда не касались React или не работали с ним какое-то время, и хотите узнать больше и создавать класные вещи, этот курс для вас. Конечным...

Duration 11:24:21

27-09-201827-09-2018 ru 115 уроков

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

Duration 14:41:16

coursehunters.net