reactstrap

ReactStrap

Staatelo React -Komponenten für Bootstrap 5.

Wenn Sie Bootstrap 4 verwenden, müssen Sie ReactStrap V8 verwenden

Erste Schritte

Befolgen Sie die Anweisungen für die Recate-React-App, um zu beginnen, und befolgen Sie die ReactStrap-Version des Hinzufügens von Bootstrap.

tl; dr

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

oder, wenn NPX (Knoten> = 6 und NPM> = 5.2) nicht verfügbar ist

 npm install -g create-react-app

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

Öffnen Sie dann http: // localhost: 3000/um Ihre App zu sehen. Die anfängliche Struktur Ihrer App ist eingerichtet. Lassen Sie uns als nächstes ReactStrap und Bootstrap hinzufügen.

Hinzufügen von Bootstrap

Installieren Sie ReactStrap und Bootstrap von NPM. ReactStrap enthält keine Bootstrap -CSS, daher muss auch dies installiert werden:

 npm i bootstrap
npm i reactstrap react react-dom

Bootstrap CSS in der Datei src/index.js importieren:

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

Importieren Sie die erforderlichen ReactStrap -Komponenten in src/App.js -Datei oder in Ihren benutzerdefinierten Komponentendateien:

 import { Button } from 'reactstrap' ;

Jetzt können Sie die importierten ReactStrap -Komponenten in Ihrer Komponentenhierarchie verwenden, die in der Render -Methode definiert sind. Hier ist ein Beispiel App.js mit ReactStrap redone.

Abhängigkeiten

Erforderliche Peer -Abhängigkeiten

Diese Bibliotheken sind nicht mit ReactStrap gebündelt und zur Laufzeit erforderlich:

• reagieren
• React-dom

Über das Projekt

Diese Bibliothek enthält React -Bootstrap -Komponenten, die Zusammensetzung und Kontrolle bevorzugen. Die Bibliothek hängt nicht von JQuery oder Bootstrap JavaScript ab. Poppers.js über React-Popper wird jedoch auf eine fortgeschrittene Positionierung von Inhalten wie Tooltips, Popovers und automatischen Dropdowns angewiesen.

Es gibt einige Kernkonzepte zu verstehen, um das Beste aus dieser Bibliothek herauszuholen.

1. Es wird erwartet, dass Ihr Inhalt über Props.Children komponiert wird, anstatt benannte Requisiten zum Übergeben von Komponenten zu verwenden.

    // 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. Attribute in dieser Bibliothek werden verwendet, um staatlich zu bestehen, Modifikatorklassen bequem anzuwenden, erweiterte Funktionen (wie Tether) zu aktivieren oder automatisch nicht kontentbasierte Elemente einzubeziehen.

   Beispiele:

   • isOpen - Aktueller Zustand für Elemente wie Dropdown, Popover, Tooltip
   • toggle - Rückruf zum Umschalten von isOpen in der Steuerkomponente
   • color - Anwendet Farbklassen, z. <Button color="danger"/>
   • size - Für die Steuerung von Größenklassen. Beispiel: <Button size="sm"/>
   • tag - Passen Sie die Komponentenausgabe an, indem Sie einen Elementnamen oder eine Komponente übergeben
   • Boolesche basierte Requisiten (Attribute), wenn möglich für alternative Stilklassen oder visually-hidden Inhalte

Dokumentation

https://reactstrap.github.io

Die Dokumentationssuche wird durch Algoliens DocSearch angetrieben.

Codesandbox -Beispiele

Hier finden Sie einige Ready-to-Go-Beispiele für Codesandbox, mit denen Sie experimentieren können.

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

Beitragen

Entwicklung

Abhängigkeiten installieren:

yarn install

Ausführen von Beispielen unter http: // localhost: 8080/mit webpack dev server:

yarn start

Tests & Deckungsbericht ausführen:

yarn cover

Beobachten Sie Tests:

yarn test 

Freigeben

Release-Zweige/Versioning/Notizen werden automatisch durch die Release-bitte GitHub-Aktion erstellt und verwaltet. Wenn Sie bereit sind, die Veröffentlichung zu veröffentlichen, fusionieren Sie einfach die Release -Zweigstelle. Die Veröffentlichung wird erstellt, das neue Paket wird veröffentlicht und die aktualisierten Dokumente werden in https://reactstrap.github.io/ bereitgestellt.

In freier Wildbahn

Organisationen und Projekte mit reactstrap

• Airframe -React - Demo - Flugzeugzelle bietet allen Komponenten, die ein Entwickler benötigt, um datenintensive Web -Apps mithilfe von React zu erstellen.
• Komponenten-Template
• Video-Reaktion
• CoreUi-frei-Bootstrap-Admin-Template-Demo
• Admin -Dashboard -Beispiel -App, die mit ReactStrap - Demo erstellt wurde
• Devextreme React Grid - Es handelt sich um ein staatsloses Datennetz, das auf reactstrap mit Paging, Sortieren, Filter, Gruppierung, Auswahl, Bearbeitung und virtuellen Scrolling -Funktionen basiert.
• Devextreme React -Diagramm - ein Diagramm, das auf reactstrap basiert, das Daten unter Verwendung einer Vielzahl von Serientypen visualisiert, darunter Balken, Linie, Fläche, Streuung, Kuchen und mehr.
• ReactStrap -CROLLSPY - Demo
• Formstrap - Demo - Lassen Sie Ihre reactstrap -Eingangskomponente nahtlos mit Formik integrieren
• Jimu UI - Demo - Die UI -Bibliothek für Arcgis Experience Builder -Mapping -Plattform.

Senden Sie eine PR ein, um dieser Liste hinzuzufügen!

Möchten Sie wiederverwendbare Komponenten erstellen, dokumentieren und veröffentlichen, die auf reactstrap basieren? Erwägen Sie, https://github.com/reactstrap/component-template zu verzichten, um Ihr Projekt zu kickern!