Все для создания и продвижения сайтов

Верстка, программирование, SEO

Задания по React для прокачки

1272
Задания по React для прокачки

Дока по реакту - официальныя ru.reactjs.org

Быстрое создание приложения create-react-app

Заметки по реакту - мои

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

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

  1. Создать приложение реакта через либу create react app, для этого на пк надо установить nodejs. Для запуска проекта npm start
  2. Создать компоненты:
    * header - шапка, принимает логотип (ссылка на любую картинку в инете) и название сайта
    * nav - пункты меню (штук 5 передай в виде массива [{title: 'Новости', link: '/news'}, {...}])
    * footer - копирайты и динимически вычисляемый год: @copyright все права защищены {текущий год} год.
  3. Создать компонент content - и в нем вывести следующие компоненты: ну только попроще с версткой:
    * https://bootstrap-4.ru/docs/4.3.1/components/alerts/
    принимает текст и разные цветовые стили
    * https://bootstrap-4.ru/docs/4.3.1/components/buttons/
    принимает стиль и текст кнопки, type (submit, button или ссылка), если ссылка, то тег а и ещё атрибут href
    * https://bootstrap-4.ru/docs/4.3.1/components/card/
    принимает ссылку на картинку и текст вместе с html-кодом
    * https://bootstrap-4.ru/docs/4.3.1/components/breadcrumb/
    принимает массив такого же типа как и nav компонент
  4. * Написать компонент для создания заголовков Title, где мы передаем текст заголовка, размер и цвет (черный по дефолту, красный или синий)
    * Написать компонент для простых Input, который принимает type (text, password...), placeholder, value. (Оформи как и Bootstrap инпуты)
  5. http://prntscr.com/q7m7vd Написать компонент по рейтингу, он принимает два пропса, 1 - максимальное количество звезд, 2 - сколько выбрано звезд. На скрине максмум 4 звезды, а выбрано 3
  6. http://prntscr.com/q7m028 Сделать компонент для тегов, теги мы отправляем в таком формате:

    tags = [
        { title: 'Тег №1', href: 'http://link1.ru'},
        { title: 'Тег №2', href: 'http://link2.ru'},
        { title: 'Тег №3', href: 'http://link3.ru'},
    ]
  7. https://bootstrap-4.ru/docs/4.3.1/components/breadcrumb/. Передаем массив объектов с ссылками (штук 5 передай в виде массива [{title: 'Новости', link: '/news'}, {...}])
  8. * https://bootstrap-4.ru/docs/4.3.1/components/pagination/ Принимает два пропса, 1 - countArticles(Число (якобы материалов)), 2 - limit (Сколько Выводить на страницу). Например если мы передали countArticles=49, limits=10, то у нас будут кнопки = Previous 1 2 3 4 5 Next (То есть якобы на каждую страницу по 10 материалов, поэтому страниц 5 всего, так как мы указали, что выводить по 10 на страницу)

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

  1. * Создать любой компонент и выполнить в нем код по этой ссылке (3.12.3 Хук состояния), надо примерно понять как это работает.

    * Можно же в этом же компонент создать новые состояния, например:

    const [countSecond, setCountSecond] = useState(0);

    * Также добавь кнопку, которая будет увеличивать countSecond на 1, но ниже выводите ещё текст в параграфе:
    "Count меньше 10" или "count больше 10" (для этого нужно использовать тернарный оператор, примеры тут

    * Создать новое состояние countThird, и две кнопки, одна прибавляет значение на 1, а другая уменьшает на 1, примерно так, только можно попроще.

    * Создать новое состояние countFourth, и три кнопки, одна увеличивает на 1, другая на 5, третья на 10, четверная умножается сама на себя

  2. Добавить кнопку и параграф с текстом, по умолчанию на кнопке текст "Скрыть" и блок с текстом виден. Когда мы нажимаем на кнопку, текст меняется на "Показать" и текст ниже пропадает.
  3. Написать компонент слайдера, который принимает массив ссылок на картинки. Имеет две кнопки назад и вперед.
  4. Вывести два квадрата, синий и зеленый, при клике на зеленый - зеленый пропадает, красный появляется. При клике на красный - красный пропадает, зеленый появляется.
  5. Написать компонент InputText - которому можно передать параметры max и min. Если пользователь вбивает 2 символа, а min стоит 3 - то выводить "Вам нужно ввести минимум 3 символа" (или то, которое мы передали в min). Тоже самое и с max - если указал больше чем передали выводить (Нельзя ввести больше чем "число из параметра max").
  6. Создать компонет, которому передаем текст (3-4 абзаца с точкой). Компонент выводит только первое предложение. И есть кнопка "Показать подробнее" - при клике на неё выводиться вместо одного предложения весь текст. (состояние с тру или фолс)
  7. Сделать кнопку с выподающем меню через состояниями. Компонент принимает текст кнопки и массив подпунктов http://prntscr.com/qjm5z0
  8. Подгрузка карточек по кнопке (Компонт Card), передаем массив карточек, выводим только 2. При клике на кнопку "Показать ещё" при клике на которую показываются ещё 2 шт. Если все карточки подгрузились, то кнопка "Показать ещё" пропадает.
  9. Создать компонент, который принимает массив текстов. Выводим каждый текст в отдельном блоке, но текст по умолчанию скрыт, но в блоке есть кнопка показать текст. При нажатии на кнопку, конкретный текст появляется, а если были открыты другие текста, то они скрываются. Пример: http://prntscr.com/qjm585 и https://bootstrap-4.ru/docs/4.4/components/collapse/#accordion-example
  10. Сделать компонент для скрол бара. http://prntscr.com/qjm6n6 Компонент принимает цифру от 0 до 100 (если 100 - то весь закрашен). Также в компоненте есть две кнопки - прибавить 10% и убавить 10%. Потом добавить поле инпут - указать свое значение. И если пользователь напишет 50 - то и будет заполнен скролбар на 50%. Если он укажет больше 100 - то будет 100 (т.е. можно только указать от 0 до 100, чтобы пользователь не мог применить любую хуйню).
  11. Доработать компонент меню. При клике на пункт меню, он подчеркивается (class active), другой пункт если есть становиться не активным
  12. Доработать компонент по пагинации - при клике выделять нужную кнопку (кроме назад и вперед). Если выбрана 1 страница, то кнопки назад нет. Если пункт меню последний, то нет кнопки вперед.
  13. Доработать комопнент с рейтингом, если тыкнули на 3 звезду, то 3 и закрашиваются, если на 5 - то 5.

Полноценное приложение

Релизовать TODO-лист. Пример работы тут

Описание: Создаем пустое поле и кнопку для добавления в TODO лист. При нажатии на кнопку добавлем новый элемент задания в общий массив дел. Все задания выводится списком, каждое задание можно перечеркнуть как выполненое или полностью удалить (можно две кнопки вывести)

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

Далее добавить кнопку "Выбрать все", при клике на нее мы проставлем на все элементы, что они выбраны

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

Слайдер

пример слайдера

Реализовать полноценный слайдер. Слайдер создается следующим кодом:

const slides = [
    {
        img: 'https://www.w3schools.com/howto/img_nature_wide.jpg',
        text: 'Caption Text 1'
    },
    {
        img: 'https://www.w3schools.com/howto/img_snow_wide.jpg',
        text: 'Caption Text 2'
    },
    {
        img: 'https://www.w3schools.com/howto/img_mountains_wide.jpg',
        text: 'Caption Text 3'
    },
];

return(
    <Slider
        slides={slides}
        loop={true}
        navs={true}
        pags={true} 
        auto={true} 
        stopMouseHover={true}
        delay={3} 
    />
)

Функционал:

  • кнопки далее и назад
  • подпись текста к каждому слайду
  • вывод номера и максимального количества (1/3,2/3,/3/3)
  • пагинация (при клике - переключается на нужный слайд)

Дополнительные параметры:

  • loop - возможность листать слайдер по кругу (например когда на 3 слайде нажимаем далее - переходим на 1). true или false
  • navs - Вывод стрелочек или их отключение. true или false
  • pags - вывод пагинации или отключение. true или false
  • auto - слайдер сам переключается, если delay не указан, раз в 5 сек. А
  • stopMouseHover - если навести мышкой на слайд, он не переключается, как только мышку убрали, снова пошло. Работает только когда auto равен true. true или false
  • delay - время в секундах на показ слайда, если auto true

Задание на React + Redux + запросы

Для разработки нам потребуются следующее:

  • Redux - пакеты redux и react-redux
  • HashRouter - для меню и отдельных страниц из пакета react-router-dom
  • Bootstrap - для визуализации, пакет react-bootstrap и bootstrap
  • axios - для запросов на сервер, пакет axios

Визуальное представление:

Описание страниц

Компонент будет содержать 3 страница (реализуем через HashRouter):

  • Articles - страница с постами (она же и на скрине выше)
  • Users - страница с пользователями
  • Photos - страница с картинками

Функционал страницы с постами

Получаем данные отсюда: https://jsonplaceholder.typicode.com/posts через axios.get() и записываем в стор при загрузки этой страницы

Выводим 3 записи по умолчанию, внизу кнопка "Show more" - при клике на которую из стора получаем ещё 3 записи, итого их 6, кнопку можно кликать до тех пор, пока все записи не будут получены, когда они кончаться, кнопка скрывается.

Вверху есть кнопка, которая переключает отображения по 3 или по 2 карточки на строку "Make big cards" или "Make small cards". Скрин ниже

У каждой записи есть три кнопки "View" - при клике открывается модалка с детальной информацией записи, "Change color" - меняет цвет карточки (любые 3 цвета придумайте) - скрин ниже, "Edit" - модалка с возможность изменить запись (об этом ещё ниже читайте)

Скрин: страница с изменным видом по 2 на строку и примером смены цвета у карточке:

Скрин: пример детального просмотра при клике на кнопку "View"

Также есть кнопка вверху "Add Article" - она открывает модалку с формой, где выводятся поля "title" и "body" и кнопка "Create", при клике на которую в стор добавляется новая запись и она добавляется последний в общий список (Ещё нужно записи дать id)

У каждой записи выводиться кнопка "Edit" при клике на которую открывается такая же модалка, только с заполненными данными данной записи и кнопка "Update", которая меняет в сторе нашу запись

У каждой записи выводиться кнопка "Delete" при клике на которую появляется модалка "Do you really want to delete this card?" и две кнопки "Yes" и "No". При клике на "Yes" - запись удаляется из стора, модалка закрывается, на "No" - просто закрываем модалку

Страница с пользователями

Получаем данные отсюда: https://jsonplaceholder.typicode.com/users через axios.get() и записываем в стор при загрузки этой страницы.

Аналогичный функционал с постами, только выводим данные другие. В карточке - name, email, phone, а в модалках на создание и изменение все оставшиеся поля, кроме address и company.

Страница с фото

Получаем данные отсюда: https://jsonplaceholder.typicode.com/photos через axios.get() и записываем в стор при загрузки этой страницы.

Аналогичный функционал с постами, только выводим данные другие. В карточке - title и отображаем само фото (<img url={item.url} />).

В модалке на создание и редактирование только два поля title и image url (Ссылка на картинку).

Задание на джуна

Необходимо разработать React-приложение для отображения таблицы с данными.

Функционал

  • Сортировка по столбцам: при нажатии на название столбца строки таблицы сортируются по возрастанию, при повторном клике — по убыванию. Графическим элементом или текстовым сообщением указывается направление сортировки.
  • Клиентская пагинация: данные необходимо отображать постранично, максимум 50 элементов на страницу. Необходимо предоставить пользовательскую навигацию для перехода по страницам.
  • Фильтрация: компонент предоставляет текстовое поле, в которое пользователь может ввести текст и строки таблицы, данные которых не содержат подстроку, введённую пользователем, скрываются. Перефильтрация осуществляется по нажатию на кнопку "Найти".
  • По клике на строку таблицы значения полей выводятся в дополнительном блоке под таблицей.
  • Данные в таблицу загружаются с сервера. Способ загрузки с сервера на ваш выбор.
  • Над таблицей присутсвует кнопка добавить, по нажатии на которую выпадает форма добавления ряда +------+------------+-----------------+-----------------+---------------+ | id | firstName | lastName | email | phone | +------+------------+-----------------+-----------------+---------------+ |input | input | input | input | input | +------+------------+-----------------+-----------------+---------------+
  • После заполнения всех инпутов активируется кнопка Добавить в таблицу которая вставляет заполненный ряд в начало таблицы

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

Формат данных от сервера

Сервер возвращает JSON-массив данных. Пример данных:

[
 {
    id: 101,
    firstName: 'Sue',
    lastName: 'Corson',
    email: 'DWhalley@in.gov',
    phone: '(612)211-6296',
    address: {
    	streetAddress: '9792 Mattis Ct',
    	city: 'Waukesha',
    	state: 'WI',
    	zip: '22178'
    },
    description: 'et lacus magna dolor...',
 }
]

Маленький объем данных берется по ссылке http://www.filltext.com/?rows=32&id={number|1000}&firstName={firstName}&lastName={lastName}&email={email}&phone={phone|(xxx)xxx-xx-xx}&address={addressObject}&description={lorem|32}

Большой объем данных берется по ссылке http://www.filltext.com/?rows=1000&id={number|1000}&firstName={firstName}&delay=3&lastName={lastName}&email={email}&phone={phone|(xxx)xxx-xx-xx}&address={addressObject}&description={lorem|32}

Замечания

  • Особое внимание следует уделить скорости работы. Зависание интерфейса при выполнении операций загрузки данных, фильтрации, сортировки недопустимо.
  • Во время загрузки данных стоит показать какой-то индикатор
  • Использование сторонних библиотек будет плюсом только в случае если это оправданно и вы сможете объяснить причину выбора. Показав свои знания в грамотном применении сторонних готовых решений, вы имеете шанс повысить свою профессиональную привлекательность для нас.
  • Пишите код так, как бы вы его писали в работе — внутренности задания будут оцениваться даже тщательней, чем внешнее соответствие заданию. Код должен быть организован так, чтобы его можно было заново использовать.
  • Помните про обработку ошибок!
  • Верстка может быть самая простая. Визуализацию и украшение делайте на ваш вкус. Мы не против использования Bootstrap или похожего UI фреймворк, но только для UI представления (нельзя использовать JS код для решения задачи, но можно использовать для оформительских эффектов (анимации и тому подобное))!

Схема визуального представления данных

+------+------------+-----------------+-----------------+---------------+
| id ▲ | firstName ▼| lastName      ▼ | email          ▼| phone        ▼|
+------+------------+-----------------+-----------------+---------------+
| 101  | Sue        | Corson          | DWhalley@in.gov | (612)211-6296 |
+------+------------+-----------------+-----------------+---------------+
| 102  | Lor        | Ipsumd          | dwhalley@in.gov | (612)211-6296 |
+------+------------+-----------------+-----------------+---------------+
| 103  | Ips        | Umdolo          | dwhalley@in.gov | (612)211-6296 |
+------+------------+-----------------+-----------------+---------------+

Если выделен пользователем с id = 101, то под таблицей выводим следующую информацию:

Выбран пользователь <b>Sue Corson</b>
Описание:
<textarea>
et lacus magna dolor...
</textarea>
Адрес проживания: <b>9792 Mattis Ct</b>
Город: <b>Waukesha</b>
Провинция/штат: <b>WI</b>
Индекс: <b>22178</b>
Выделите опечатку и нажмите Ctrl + Enter, чтобы отправить сообщение об ошибке.