reactstrap

реагировать

Компоненты реагирования без состояния для начальной загрузки 5.

Если вы используете Bootstrap 4, вам нужно использовать Reactstrap V8

Начиная

Следуйте инструкциям Create-React-App, чтобы начать, а затем следуйте версии Acctstrap Add Bootstrap.

TL; DR

 npx create-react-app my-app
cd my-app/
npm start

или, если npx (node> = 6 и npm> = 5.2) недоступен

 npm install -g create-react-app

create-react-app my-app
cd my-app/
npm start

Затем откройте http: // localhost: 3000/чтобы увидеть ваше приложение. Первоначальная структура вашего приложения настроена. Далее, давайте добавим Reactstrap и Bootstrap.

Добавление начальной загрузки

Установите Reactstrap и начальную загрузку от NPM. ReactStrap не включает в себя начальную загрузку CSS, поэтому его также необходимо установить:

 npm i bootstrap
npm i reactstrap react react-dom

Импорт Bootstrap CSS в файле src/index.js :

 import 'bootstrap/dist/css/bootstrap.css' ;

Импорт необходимых компонентов ReactStrap в файле src/App.js или ваших пользовательских компонентных файлов:

 import { Button } from 'reactstrap' ;

Теперь вы готовы использовать импортируемые компоненты Reactstrap в рамках вашей компонентной иерархии, определенной в методе рендеринга. Вот пример App.js , переделанный с использованием Reactstrap.

Зависимости

Требуемые зависимости от сверстников

Эти библиотеки не связаны с Reactstrap и требуются во время выполнения:

• реагировать
• реагировать

О проекте

Эта библиотека содержит компоненты Bootstrap React, которые благоприятствуют композиции и управлению. Библиотека не зависит от JQUERY или Bootstrap JavaScript. Тем не менее, попперс.

Есть несколько основных концепций, чтобы понять, чтобы максимально использовать эту библиотеку.

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

    // Content passed in via props
   const Example = ( props ) => {
     return (
       < p > This is a tooltip < TooltipTrigger tooltip = { TooltipContent } > example </ TooltipTrigger > ! </ p >
     ) ;
   }
   
   // Content passed in as children (Preferred)
   const PreferredExample = ( props ) => {
     return (
       < p >
         This is a < a href = "#" id = "TooltipExample" > tooltip </ a > example.
         < Tooltip target = "TooltipExample" >
           < TooltipContent />
         </ Tooltip >
       </ p >
     ) ;
   }

2. Атрибуты в этой библиотеке используются для прохождения в состоянии, удобно применять классы модификаторов, обеспечить расширенные функциональные возможности (например, Tether) или автоматически включать в себя неконтентные элементы.

   Примеры:

   • isOpen - текущее состояние для таких предметов, как раскрывающийся список, Popover, Tooltip
   • toggle - обратный вызов для переключения isOpen в контролирующем компоненте
   • color - применяет классы цвета, пример: <Button color="danger"/>
   • size - для управления классами размера. Пример: <Button size="sm"/>
   • tag - Настройка вывода компонента, передавая имя элемента или компонент
   • Логические реквизиты (атрибуты), когда это возможно, для альтернативных классов стиля или visually-hidden контента

Документация

https://reactstrap.github.io

Поиск документации оснащен DocSearch Algolia.

Примеры Codesandbox

Вот несколько примеров готовых к ходу для CodeSandbox, с которыми вы можете экспериментировать.

https://github.com/reactstrap/code-sandbox-examples

Внося

Разработка

Установить зависимости:

yarn install

Запустите примеры на http: // localhost: 8080/с Webpack Dev Server:

yarn start

Запустите тесты и отчет о покрытии:

yarn cover

СМОТРЕТЬ Тесты:

yarn test 

Выпуск

Выпуск филиалов/версий/примечаний будет автоматически создан и поддерживается действием GitHub выпуска. Когда вы будете готовы опубликовать релиз, просто объедините филиал релиза. Выпуск будет создан, будет опубликован новый пакет, а обновленные документы будут развернуты на https://reactstrap.github.io/.

В дикой природе

Организации и проекты с использованием reactstrap

• REACT -REACT - DEMO - По самолете предоставляет все компоненты, необходимые разработчику для создания веб -приложений с интенсивными данными с помощью React.
• компонент-тип
• видеореакция
• Coreui-Free-Bootstrap-Admin-Template-Demo
• Пример администраторов примеров пример прибора администраторов, построенный с Reactstrap - Demo
• Devextreme React Grid - это сетка данных без сохранения, созданная на вершине reactstrap с помощью пейджинга, сортировки, фильтрации, группировки, выбора, редактирования и виртуальных функций прокрутки.
• Devextreme React Hypt - диаграмма, построенная на вершине reactstrap , которая визуализирует данные, используя различные типы серий, включая бар, линию, область, рассеяние, пирог и многое другое.
• Reactstrap -Scrollspy - Демо
• FormStrap - Demo - Пусть ваш входной компонент reactstrap плавно интегрируется с помощью Formik
• Jimu UI - демонстрация - Библиотека пользовательского интерфейса для платформы картирования ArcGIS Experience Builder.

Отправьте пиар, чтобы добавить в этот список!

Хотите построить, документировать и публиковать многоразовые компоненты, построенные на вершине reactstrap ? Подумайте о том, чтобы поднять https://github.com/reactstrap/component-template, чтобы начать ваш проект!