reactstrap

reactstrap

Komponen Bereaksi Stateless untuk Bootstrap 5.

Jika Anda menggunakan Bootstrap 4, Anda harus menggunakan ReactStrap V8

Memulai

Ikuti instruksi create-react-app untuk memulai dan kemudian ikuti versi reactstrap dari menambahkan bootstrap.

tl; dr

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

atau, jika npx (node> = 6 dan npm> = 5.2) tidak tersedia

 npm install -g create-react-app

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

Kemudian buka http: // localhost: 3000/untuk melihat aplikasi Anda. Struktur awal aplikasi Anda sedang diatur. Selanjutnya, mari tambahkan reactstrap dan bootstrap.

Menambahkan Bootstrap

Instal ReactStrap dan Bootstrap dari NPM. ReactStrap tidak termasuk bootstrap CSS sehingga ini perlu dipasang juga:

 npm i bootstrap
npm i reactstrap react react-dom

Impor Bootstrap CSS di file src/index.js :

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

Impor komponen reactstrap yang diperlukan dalam file src/App.js atau file komponen khusus Anda:

 import { Button } from 'reactstrap' ;

Sekarang Anda siap menggunakan komponen reactstrap impor dalam hierarki komponen Anda yang ditentukan dalam metode render. Berikut adalah contoh App.js yang diulang menggunakan reactstrap.

Dependensi

Dependensi sebaya yang dibutuhkan

Perpustakaan ini tidak dibundel dengan reactstrap dan diperlukan saat runtime:

• bereaksi
• react-dom

Tentang proyek

Perpustakaan ini berisi komponen reaksi bootstrap yang mendukung komposisi dan kontrol. Perpustakaan tidak bergantung pada JQuery atau bootstrap JavaScript. Namun, poppers.js melalui react-popper diandalkan untuk posisi canggih konten seperti tooltips, popover, dan dropdown flipping otomatis.

Ada beberapa konsep inti untuk dipahami untuk memanfaatkan perpustakaan ini sebaik -baiknya.

1. Konten Anda diharapkan disusun melalui prop.

    // 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. Atribut di perpustakaan ini digunakan untuk lulus dalam keadaan, dengan mudah menerapkan kelas pengubah, mengaktifkan fungsionalitas lanjutan (seperti tether), atau secara otomatis menyertakan elemen berbasis non-konten.

   Contoh:

   • isOpen - Keadaan saat ini untuk item seperti dropdown, popover, tooltip
   • toggle - Callback untuk Mengaktifkan isOpen di Komponen Pengendalian
   • color - Menerapkan kelas warna, mis: <Button color="danger"/>
   • size - untuk mengontrol kelas ukuran. Contoh: <Button size="sm"/>
   • tag - Kustomisasi Output Komponen Dengan Meneruskan Nama atau Komponen Elemen
   • Props berbasis boolean (atribut) bila memungkinkan untuk kelas gaya alternatif atau konten visually-hidden

Dokumentasi

https://reactstrap.github.io

Pencarian dokumentasi ditenagai oleh DocSearch Algolia.

Contoh CodeSandBox

Berikut adalah beberapa contoh siap untuk digunakan untuk kode dan kotak yang dapat Anda bereksperimen.

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

Berkontribusi

Perkembangan

Instal dependensi:

yarn install

Jalankan contoh di http: // localhost: 8080/dengan server webpack dev:

yarn start

Jalankan Laporan Tes & Cakupan:

yarn cover

Tes menonton:

yarn test 

Melepaskan

Cabang/versi rilis/catatan akan secara otomatis dibuat dan dikelola oleh tindakan github-rilis. Saat Anda siap menerbitkan rilis, cukup gabungkan cabang rilis. Rilis akan dibuat, paket baru akan diterbitkan, dan dokumen yang diperbarui akan digunakan ke https://reactstrap.github.io/.

Di alam liar

Organisasi dan proyek menggunakan reactstrap

• Airframe -React - Demo - Airframe menyediakan semua komponen yang dibutuhkan pengembang untuk membangun aplikasi web intensif data menggunakan React.
• Template komponen
• reaksi video
• Coreui-free-bootstrap-admin-template-demo
• Aplikasi Contoh Dasbor Admin Dibangun dengan ReactStrap - Demo
• DevExtreme React Grid - Ini adalah kisi data tanpa kewarganegaraan yang dibangun di atas reactstrap dengan paging, penyortiran, penyaringan, pengelompokan, pemilihan, pengeditan dan fitur gulir virtual.
• DevExtreme React Chart - Bagan yang dibangun di atas reactstrap yang memvisualisasikan data menggunakan berbagai jenis seri, termasuk batang, garis, area, pencar, pai, dan banyak lagi.
• reactstrap -scrollspy - demo
• FormStrap - Demo - Biarkan komponen input reactstrap Anda berintegrasi dengan mulus menggunakan Formik
• Jimu UI - Demo - Perpustakaan UI untuk Platform Pemetaan Pembangun Pengalaman ArcGIS.

Kirim PR untuk ditambahkan ke daftar ini!

Ingin membangun, mendokumentasikan, dan menerbitkan komponen yang dapat digunakan kembali yang dibangun di atas reactstrap ? Pertimbangkan forking https://github.com/reactstrap/component-template untuk memulai proyek Anda!