Средний
3 урока
Курс
Экосистема React.js
Данный видеокурс научит вас строить react-приложения с нуля с использованием последних технологий в экосистеме React.js

#3 — React-элементы и классы, умные и глупые react-компоненты

Всем привет! На третьем видеоуроке нашего курса мы поговорим про react-элементы и классы, а также про умные и глупые react-компоненты, на занятии мы сделаем их сами. А напоследок немного захватим композицию.

Что представляют из себя React-элементы

React-элемент – это react-объект, который описывает react-компонент. Он содержит информацию о типе react-компонента (например, Button) и его свойствах (например, цвет). По сути, элемент является методом, который сообщает React, что мы хотим видеть на экране.

Из-за того, что элемент имеет только два поля: тип (строка или компонент) и props, его нельзя вызвать как метод. В случае, когда в типе указана строка, он представляет собой DOM-объект.

React-элементы могут быть вложены друг в друга. Для этого используется пропуск под названием children. Преимущество этого подхода в том, что это react-объект, его не надо парсить и он легче, чем DOM-элементы. Кроме того, теперь мы можем использовать локальные методы из state-компонента, а также lifecycle методы.

На видеоуроке будет подробно рассказано про дерево DOM-объектов и его обновление в React.

Единственное, о чем еще не было сказано – instance, которые не так важны в React, нежели в других фреймворках. Только react-компоненты, описанные с помощью классов, имеют instance. Мы их не создаем напрямую, этим занимается React. Таким образом, у нас есть два способа создания react-элемента – это React create элемент и JSX.

Умные и глупые react-компоненты

В своих проектах автор видеоурока поддерживает smart-компоненты [умные компоненты]. Умные react-компоненты должны подготавливать все данные, вычислять их и запрашивать с сервера.

На видеоуроке мы будем создавать приложение, которое должно отображать список пользователей с GitHub API, используя умные и глупые react-компоненты. В качестве react-компонента мы будем использовать user-list. На занятии показано создание необходимой структуры проекта. В папке Users создается три объекта: умный react-компонент UsersList.js, глупый react-компонент UsersListContainer.js и index.js (экспортируем в него эти два файла). Ниже приведен код этих трех файлов:

index.js

UserListContainer.js

Сайт, с которого автор берет данные пользователей, GitHub: https://developer.github.com/v3/users/

UserList.js

Композиция в React.js

Как и обещали, напоследок затронем тему композиции. В нашем случае лист содержит несколько пользователей. Будет логично вынести пользователя в отдельный react-компонент, причем компонент пользователя мы можем использовать где-то еще. Это позволит в лист пользователей добавлять не только пользователей, но и другие объекты.

Создадим папку UserListItem с тремя файлами. Код файлов аналогичен примеру выше. Останется только в UsersList видоизменить функцию map:

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

Приятного всем просмотра! Учитесь с удовольствием! Всегда ваш LoftBlog.

Материалы к уроку:
Делись:

Оставь комментарий!

2 thoughts on “#3 — React-элементы и классы, умные и глупые react-компоненты

  1. amolchanov:

    Спасибо за уроки
    С нетерпением жду продолжения
    Может есть какой-нибудь очень простой проект на react+reduce чтобы можно было разобраться?
    Спасибо

  2. therebro:

    Добрыйф день, а когда будет продолжение?

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

Рекомендуемые курсы