Buradasın

Reactstrap Kullanımı Eğitim Videosu

Yapay zekadan makale özeti

Bu video, bir eğitim içeriği olup, konuşmacı Reactstrap kütüphanesinin nasıl kullanılacağını adım adım göstermektedir.
Video, Reactstrap'in ne olduğunu açıklayarak başlıyor ve ardından Reactstrap'i projeye nasıl dahil edeceğimizi gösteriyor. Konuşmacı, npm komutlarını kullanarak Reactstrap'i kurma, paket.json dosyasına ekleme ve index.js dosyasına import etme adımlarını detaylı şekilde anlatıyor. Daha sonra Reactstrap'in temel bileşenlerini (Container, Row, Column, ListGroup, ListGroupItem) kullanarak basit bir uygulama oluşturuyor ve Bootstrap ile birlikte nasıl kullanılacağını gösteriyor. Video, Reactstrap'in temel kullanımını öğrenmek isteyenler için faydalı bir kaynak niteliğindedir.

00:01React Strap Nedir ve Kullanımı: React Strap, React yapısına uygun olarak Bootstrap'in uygulanmasını sağlayan bir kütüphanedir.
React Strap ile Bootstrap komponentleri daha güzel bir şekilde kullanılabilmektedir.
React dünyasında yaygın olarak React Strap gibi kütüphaneler kullanılmaktadır.
01:01React Strap'i Projeye Dahil Etme: React Strap'i projeye dahil etmek için terminalde "npm install react-strap" komutu kullanılır.
Bu komut, package.json dosyasına React Strap'i ekler ve npm install komutu ile paketler güncellenir.
Kurulan paketler node_modules klasörüne eklenir.
04:16React Strap'i Uygulamada Kullanma: Index.js dosyasına React Strap'i kullanmak için "import { Container, Row} from 'react-strap'" kodu eklenir.
Bootstrap ve React Strap'i birlikte kullanmak için "import { Bootstrap, BootstrapMin } from 'bootstrap'" kodu da eklenmelidir.
React Strap'ten gelen konteyner ve row komponentleri, App komponentinin div'i içerisine entegre edilir.
06:21React Strap Komponentlerini Uygulama: App komponentinin div'i içerisine React Strap'ten gelen konteyner ve row komponentleri eklenir.
Bootstrap'te bir row 12 eşit parçaya ayrılır, bu nedenle React Strap'te 3 ve 9 değerleri kullanılarak kolon mimarisi oluşturulur.
List group ve list group item gibi komponentler de React Strap'ten import edilerek kullanılabilir.