React.js #2 Bootstrap kullanımı

React.js # 1

Bootstrap kullanmak

React ile bootstrap kullanmak için reactstrap paketini kullanabilirsiniz. Tüm bootstrap componentlerini içerisinde bulabilirsiniz. Ayrıca bootstrap 4 desteği olan bir paket.

İlk olarak gerekli paketleri indirelim.

npm install --save reactstrap react react-dom

ya da yarn kullananlar için

yarn add reactstrap react react-dom

ve son olarak src/index.js dosyasına bootstrap.css import ediyoruz.

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

ve artık şu sayfada gördüğünüz tüm componentler kullanıma hazır.

Bilgisayarınıza kurulum yapmadan deneme yapacağınız online bir editör olarak codesandbox sitesini tavsiye ederim.

Aşağıda kodları ve deneme ekranını görebilirsiniz. Componentleri aşağıdaki şekilde çağırarak kullanabilirsiniz. Konfigürasyonlarını props üzerinden aktarabilirsiniz. Her component için yapılabilecek ayarlamaları döküman sayfasında Properties alanında görebilirsiniz.

import { Button, Container, Col, Row } from "reactstrap";