Курс React и Redux. 16. React.lazy(). Запросы через Promise.all(). Список фильмов

[@benchik100]

для того что бы четко видеть loader, в хроме в инструментах разработчика в разделе network можно выбрать Slow 3G

[@ИгорьНово]

Спасибо, идем дальше!!+)

[@МаксимНырков-у6г]

Отдельное спасибо за Promise.all() - я когда-то недавно хотел вывести данные по фильмам этого сервака. И вот не знал, как по нажатию можно было перейти на отдельную страницу с описанием по каждому эпизоду... В общем, теперь знаю)))
Еще вопрос: почему мы не везде не подключали Suspens() с прелоадером? Ну, вот пока не загрузилась страница, обрабатывается запрос - видим компонент прелоадера

[@TheArestus]

Как всегда отлично!

[@МаксимНырков-у6г]

Если не сложно, напомните, почему используют Storybook? только для просмотра какие есть компоненты и всё? Или есть еще что-то? И как часто используется?

[@LetsCodeDev]

Концепция Сторибука (или любого подобного решения) следующая
1. Есть большой проект (н-р: крупная банковская система: Сбер, Тиньков)
2. В рамках этого большого проекта работает очень много команд: кто-то делает сервисы по кредитам, кто-то занимается брокерскими счетами. Среди всего множества команд, есть одна (или больше), которая занимается разработкой UI-компонентов, которые будут использоваться всеми остальными командами.
3. Все переиспользуемые UI-компоненты помещаются в библиотеку (NPM-пакет), которую можно подключить к своему проекту через npm install name_ui_lib.
4. После подключения к проекту библиотеки UI-компонентов нужно понимать, что там вообще есть. Можно конечно залезть в исходники, собрать проект и запустить его - но это долго.
5. Поэтому, разработчики UI-библиотеки дополнительно загоняют все свои компоненты в Сторибук, чтобы остальные команды могли перейти по ссылке и увидит все компоненты с описанием пропсов, которые они принимают и демонстрацией функцонала
В заключении: Сторибук (его еще называют Ui-Kit) применяется всегда на более-менее крупных проектах. Основная задача: сделать демонстрацию существующих переиспользуемых UI-компонентов и их функционала

[@МаксимНырков-у6г]

@@LetsCodeDev Шикарно, спасибо за столь развернутый ответ

[@LetsCodeDev]

@@МаксимНырков-у6г Кстати, случайно наткнулся на Сторибук Airbnb
airbnb.io/react-dates/?path=/story/drp-calendar-props--default

[@МаксимНырков-у6г]

@@LetsCodeDev прикольно. в открытом доступе...режим чтения... Но всё же.. В ОТКРЫТОМ ДОСТУПЕ

[@LetsCodeDev]

@@МаксимНырков-у6г многие компании выкладывают свой UiKit в Open Source для того, чтобы в него контрибьютили другие разработчики

[@Legion_73]

Сделал UiLoader без использования useEffect и useState, в одном стиле с UiButton:
// UiLoading.js:
import React from 'react';
import { ReactComponent as Loader } from './img/loader.svg';
import PropTypes from 'prop-types';
import cn from 'classnames';
import styles from './UiLoading.module.scss';
function UiLoading({ theme = 'white', classes }) {
return (



);
}
UiLoading.propTypes = {
theme: PropTypes.string,
classes: PropTypes.string,
};
export default UiLoading;
// UiLoading.module.scss:
@import '../index.scss';
.loader {
width: 120px;
height: 120px;
}
.white {
circle {
stroke: $color-white;
}
}
.black {
circle {
stroke: $color-black;
}
}
.blue {
circle {
stroke: $color-blue;
}
}

[@МаксимНырков-у6г]

@media ... (max-width: ....)
Кстати, значение адаптива px тоже надо бы выносить в константы

[@LetsCodeDev]

css-переменные нельзя использовать в @media

[@МаксимНырков-у6г]

@@LetsCodeDev только в sass и scss ?

[@LetsCodeDev]

@@МаксимНырков-у6г ну да, только в препроцессорах. принцип работа CSS-переменных и переменных в препроцессорах разный. CSS-переменные динамические, они выполняются в рантайме. Их можно переопределять через JavaScript. код препроцессора на этапе сборки компилируется в статичный CSS с фиксированными значениями

[@yaroslavbox1249]

Loader without svg, only HTML/CSS, you can add any color:
import PropTypes from 'prop-types';
import styles from './UiLoading.module.css';
const UiLoading = ({color, shadow}) => {
const theme = {borderColor: color,
filter: `drop-shadow(0 0 2px ${color})`}
if(!shadow) delete theme.filter;
return
}
UiLoading.propTypes = {
color: PropTypes.string,
shadow: PropTypes.bool,
}
UiLoading.defaultProps = {
color: '#fff',
shadow: true,
}
export default UiLoading;
STYLES :
.loader {
width: 70px;
height: 70px;
border-radius: 50%;
border: 5px solid;
border-top-color: transparent !important;
border-bottom-color: transparent !important;
animation: rotate 2s linear infinite;
}
@keyframes rotate {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}

[@RinatWOT]

Привет, почему redux toolkit не используешь, с ним же гораздо проще?

[@LetsCodeDev]

тут же Редакса еще нет

[@МаксимИсаев-ъ5о]

Объяснение по методу sort про двухзначные числа очень плохая, многие могут поверить

[@firemanhood1526]

Чутка погромче плиз, в метро не слышно вообще) спасибо