Во Flatiron School все проекты Mod 5 вызывают восторг, и предыдущие ученики подняли планку очень, очень, очень высоко. На этой неделе мы запустили Mod 4 и начали углубляться в React (который мне пока очень нравится). Думая о проектах Mod 4 и, в конечном итоге, о сольном проекте, который мы должны построить в Mod 5, я начал исследовать компоненты и библиотеки, которые мы потенциально можем использовать для сброса планки на еще более высоком уровне, чем наши предшественники.

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

1 – Сборник рассказов

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

Storybook работает за пределами вашего приложения. Таким образом, вы можете разрабатывать компоненты пользовательского интерфейса изолированно, не беспокоясь о конкретных зависимостях и требованиях приложения.

Сборник рассказов очень прост в использовании. Вы можете использовать его с любым проектом React, Vue или Angular. Вы можете выполнить следующие шаги, чтобы начать работу с Storybook:

cd my-project-directory
npm i -g @storybook/cli
getstorybook

2- Фотогалерея React

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

3- Анимированный слайдер React

RAS — это компонент Slider/Carousel для React, поддерживающий пользовательские CSS-анимации. Некоторые из интересных функций React Animated Slider:

  • Навигация смахиванием на сенсорных устройствах
  • Горизонтальная или вертикальная навигация
  • Бесконечный слайдер
  • Поддерживает автоигру
  • Поддерживает любой элемент как дочерний

4- ReactPlayer

Rp — это компонент React для воспроизведения различных URL-адресов, включая пути к файлам, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia и DailyMotion. Он анализирует URL-адрес и загружает соответствующую разметку и внешние SDK для воспроизведения видео. React Player имеет встроенные свойства, которые можно использовать для управления громкостью, шириной и высотой плеера и многим другим.

5- React Kawaii

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

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

  • Браузер — симпатичный браузер
  • CreditCard — симпатичная кредитная карта
  • Призрак — милый призрак
  • IceCream — милое мороженое
  • Кружка — Милая кружка
  • Планета — милая планета
  • SpeechBubble — милый речевой пузырь

Ресурсы
1- https://storybook.js.org/examples/
2- http://neptunian.github.io/react-photo-gallery/
3 - https://eb1.it/react-animated-slider/
4- https://github.com/CookPete/react-player
5- https://github .com/miukimiu/react-kawaii
6- react.parts