React Bootstrap İle Çalışmak

Uygulama veya web sayfası geliştirirken hazır CSS frameworkler ile çalışmak, tasarımcı açısıdan çok daha hızlı ve etkin bir yoldur. Çok sayıdan geliştirilmiş CSS frameworkü vardır ve bunlardan en meşhur olanlarından bir tanesi ve belkide en meşhur olanı Bootstrap kütüphanesidir.

Gerek mobil ve gerekse web sitesi geliştirirken kullanabileceğimiz harika bir yardımcıdır. Çok sayıda tema bootstrap ile geliştirilmiş ve kullanıma sunulmuştur. Hazır komponentleri sayesinde sayfa geliştirme işlemleri kolaylaşır.

React Bootstrap Nedir?

React Bootstrap sevilen CSS frameworkü olan Bootstrapın React için uyarlanmış halidir. Bootstrap temelli çalışır ve fakat komponetler birer React JS componenti olarak tasarlanmıştır. Diğer bir deyimle Bootstrapın React yorumudur.

En eski React komponentlerinden biridir. JQuery gibi bağımlılıklara ihtiyaç bırakmaz. Bootstrap ile uyumludur onun hazır sınıflarını kullanabilirsiniz.

Nasıl Kurulur?

Projenizde React Bootstrap kullanmak istiyorsanız onu projenize dahil etmeniz gerekir. Bunun için

npm install react-bootstrap bootstrap

şeklinde bir komut vermeniz yeterli olacaktır. İşlem bittiğinde React Bootstrap ve Bootstrap projenize eklenmiş olacaktır.

Projeninin uygun bir yerinde bootstrap ile ilgili css dosyasının içeri aktarılması gerekecektir. Bunun için

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

şeklinde bir import yeterli olacaktır. Artık projemize eklediğimize göre kullanmaya başlayabiliriz. Mesela sayfamıza bir bootstrap card ekleyeceğimizi düşünelim. Bunu için öncelikle sayfamızda Card komponentini import etmemiz gerek.

import Card from 'react-bootstrap/card';

Sonrasında artık Card komponentini kullanabiliriz.

...
    <Card style={{ width: '18rem' }}>
      <Card.Img variant="top" src="holder.js/100px180" />
      <Card.Body>
        <Card.Title>Card Title</Card.Title>
        <Card.Text>
          Some quick example text to build on the card title and make up the
          bulk of the card's content.
        </Card.Text>
        <Button variant="primary">Go somewhere</Button>
      </Card.Body>
    </Card>
...

Artık sayfamızda kartımız görüntülenecektir. Basitçe bu şekilde bir React Bootstrap komponentini sayfamıza ekleyebiliyoruz.

Adım Adım React Bootstrap İle Uygulama Geliştirmek.

Şimdi create-react-app ile bir uygulama oluşturalım ve React Bootstrap ile bir sayfa tasarımı yapalım. Bu bölümde create-react-app ile uygulama geliştirdiğinizi varsayıyoruz. Eğer bu konuda bilginiz yoksa create-react-app ile uygulama oluşturmak yazımıza bakabilirsiniz.

Uygun gördüğünüz bir yerde react-bootstrap-app şeklinde bir dizin oluşturalım. İsterseniz farklı isim verebilirsiniz.

Terminali açarak, oluşturduğumuz klasör içerisinde girerek,

npx create-react-app .

komutunu terminalden çalıştıralım. Bir süre sonra uygulamamızın çatısı otomatik olarak oluşturulmuş olacak. Şimdi ugulamamıza React Bootstrap ve Bootstrap modüllerini kuralım. Yine terminalden

npm install react-bootstrap bootstrap

komutunu çalıştıralım. İşlem bittiğinde VS Code veya kullandığınız farklı bir editör ise o editör ile proje sayfamızı açalım.

App.js sayfasını düzenlemeye başlayalım. İlk olarak sayfamıza bootstrap.css dosyasını import edelim. Bunun için sayfa başında

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

şeklinde import işlemimizi yapalım.

Sonrasına App fonksiyonumuz içerisinde hazır olarak gelen return bölümünün içerisini silelim ve div etiketi yerleştirelim. Sayfamız artık aşağıdaki gibi görünecektir.

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';

function App() {
  return (
    <div>

    </div>
  );
}

export default App;

İlk adımı bitirdiğimizde artık npm start komutu ile uygulamamızı çalıştırdığımızda boş bir sayfa ile karşılacacağız. Elimizde boş bir sayfa varsa bize de bu sayfayı hızlıca tasarlamak düşer. Şimdi React Bootstrap kullanarak sayfamızı düzenlemeye başlayalım. İlk olarak sayfamıza bir header bölümü ekleyelim. Bu bölümü React Bootstrap sayfasından komponentleri içerisinden navbar seçerek başlayabiliriz.

Header ve Menü Bölümünü Oluşturalım

Ama daha önce navbarımız için bir component oluşturmalıyız. Bunun için src klasörü içerisinde components klasörü oluşturalım. Sonra component klasörü içerisinde MainMenu.js olarak bir dosya oluşturalım.

Oluşturduğumuz dosya içeriği aşağıdaki gibi olacaktır.

import React from "react";
import Container from "react-bootstrap/Container";
import Nav from "react-bootstrap/Nav";
import Navbar from "react-bootstrap/Navbar";

function MainMenu() {
  return (
    <>
      <Navbar bg="dark" variant="dark">
        <Container>
          <Navbar.Brand href="#home">Navbar</Navbar.Brand>
          <Nav className="me-auto">
            <Nav.Link href="#home">Home</Nav.Link>
            <Nav.Link href="#features">Features</Nav.Link>
            <Nav.Link href="#pricing">Pricing</Nav.Link>
          </Nav>
        </Container>
      </Navbar>
    </>
  );
}

export default MainMenu;

Burada üç adet React Bootstrap komponenti kullanarak MainMenu komponentimizi oluşturuyoruz. Kullandığımız Navbar, Container ve Nav komponentlerini öncelikle import ettik.

import Container from "react-bootstrap/Container";
import Nav from "react-bootstrap/Nav";
import Navbar from "react-bootstrap/Navbar";

Sonrasında bu komponentleri kullanarak menümüzü oluşturdurk. Aslında bu React Bootstrapm navbar dökümanında bulunan örneklerden bir tanesi. Dilediğiniz gibi düzenleyebilirsiniz.

React Bootstrap Komponentine Proplar İle Veri Geçirme

İlk kullandığımız Navbar komponentine bg=’dark’ ile zemin rengini standard bootstrap dark olarak ayarladık. Yine variant=’dark’ diyerek navabarın dark temalı olacağını belirttik, bu ayarı light veya primary olarak da ayarlayabilirsiniz, f tabii ki o zaman bg değerini de değiştirmeniz gerekecek. Farklı seçenekler için dökümanına bakmalısınız. Yine

<Navbar.Brand href="#home">Navbar</Navbar.Brand>

satırında navbarımız için metin olarak logo bölümünü ayarlıyoruz. Logoya tıklandığında gidilecek yerin linkini href=”#home” olarak bir link atadık. Ayrıca etiket içerisinde Navbar olarak yazan yerimiz de logo metinimiz olacaktır. Dilediğiniz gibi değiştirebilirsiniz.

Oluşturuduğumuz MainMenu komponentini App komponentine import ederek kullanalım.

Footer Bölümünü Oluşturalım

Şimdi bir Footer komponenti oluşturalım. components dizini içerisinde Footer.js adında bir dosya oluşturalım. Dosyamızın içeriği aşağıdaki gibi olacaktır.

import React from 'react';
import { Container } from 'react-bootstrap';

function Footer() {
  return (
    <Container fluid className='text-center bg-dark text-light mt-3 p-5'>
        2022 @ <a href='https://netbilio.com' title='Netbilio Teknoloji'>Netbilio Teknoloji</a>
    </Container>
  );
}

export default Footer;

İlk olarak Container komponentini import ediyoruz. Dikkat ettiyseniz Bootstrapın hazır sınıflarından ihtiyacımız olanları kullandık.

className='text-center bg-dark text-light mt-3 p-5'

İhtiyacımız olan sınıfları gerektiği zaman kullanabiliyoruz. Tabiki ihtiyacımız varsa kendi sınıflarımızı da yazarak kullanabiliriz.

İçerik Bölümünü Oluşturma

İçerik bölümünü ayrı bir komponent içerisine yerleştirelim. Komponentimizin aldı Content olsun. Bunun için components klasörü altında Content.js adında bir dosya oluşturalım.

İçeriğimizi bir kaç bölüme ayıracağız. Önce bir Header oluşturacağız, sonrasında Faturead, Cards ve CardBottom olarak toplamda 4 bölüm ve her bölüm içinde bir komponent oluşturup Content komponentinin içerisine import ederek kullanacağız. Öncelikle bu komponentlerimizi oluşturalım.

Header bölümü bir kayan resim alanı oluştursun. Bunun için components klasöründe Header.js adında bir dosya oluşturalım ve sonrasında içeriğini aşağıdaki gibi yapalım.

import React, { useState } from "react";
import Carousel from "react-bootstrap/Carousel";

function Header() {
  const [index, setIndex] = useState(0);
  const handleSelect = (selectedIndex, e) => {
    setIndex(selectedIndex);
  };

  return (
    <Carousel activeIndex={index} onSelect={handleSelect}>
      <Carousel.Item>
        <img
          className="d-block w-100"
          src="slider-img-1.jpg"
          alt="First slide"
        />
        <Carousel.Caption>
          <h3>First slide label</h3>
          <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
        </Carousel.Caption>
      </Carousel.Item>
      <Carousel.Item>
        <img
          className="d-block w-100"
          src="slider-img-2.jpg"
          alt="Second slide"
        />

        <Carousel.Caption>
          <h3>Second slide label</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </Carousel.Caption>
      </Carousel.Item>
      <Carousel.Item>
        <img
          className="d-block w-100"
          src="slider-img-3.jpg"
          alt="Third slide"
        />

        <Carousel.Caption>
          <h3>Third slide label</h3>
          <p>
            Praesent commodo cursus magna, vel scelerisque nisl consectetur.
          </p>
        </Carousel.Caption>
      </Carousel.Item>
    </Carousel>
  );
}

export default Header;

Bunun için React Bootstrap Carousel komponentini kullanıyoruz.

Sonrasında Card komponenti kullanılarak Featured komponentini oluşturalım. Bunun için components klasörü içerisinde Featured.js isimli bir dosya oluşturalım ve içeriğini aşağıdaki gibi yapalım.

import React from 'react';
import Button from 'react-bootstrap/Button';
import Card from 'react-bootstrap/Card';

function Featured() {
  return (
    <Card className="text-center mt-4">
      <Card.Header>Featured</Card.Header>
      <Card.Body>
        <Card.Title>Special title treatment</Card.Title>
        <Card.Text>
          With supporting text below as a natural lead-in to additional content.
        </Card.Text>
        <Button variant="primary">Go somewhere</Button>
      </Card.Body>
      <Card.Footer className="text-muted">2 days ago</Card.Footer>
    </Card>
  );
}

export default Featured;

Featured komponenti içerisinde React Bootstrap Card komponentini kullandık.

Şimdide Cards komponentini oluşturalım. Bunun içinde components klasörü içerisinde Cards.js adında bir dosya oluşturalım ve içeriği aşağıdaki gibi olsun.

import React from "react";
import Button from "react-bootstrap/Button";
import Card from "react-bootstrap/Card";

function Cards() {
  return (
    <div className="d-block d-lg-flex justify-content-between mt-3">
      <Card style={{ width: "18rem" }} className='mt-3'>
        <Card.Img variant="top" src="card-1.jpg" />
        <Card.Body>
          <Card.Title>Card Title</Card.Title>
          <Card.Text>
            Some quick example text to build on the card title and make up the
            bulk of the card's content.
          </Card.Text>
          <Button variant="primary">Go somewhere</Button>
        </Card.Body>
      </Card>
      <Card  style={{ width: '18rem' }} className='mt-3'>
        <Card.Img variant="top" src="card-2.jpg" />
        <Card.Body>
          <Card.Title>Card Title</Card.Title>
          <Card.Text>
            Some quick example text to build on the card title and make up the
            bulk of the card's content.
          </Card.Text>
          <Button variant="primary">Go somewhere</Button>
        </Card.Body>
      </Card>
      <Card style={{ width: "18rem" }}  className='mt-3'>
        <Card.Img variant="top" src="card-3.jpg" />
        <Card.Body>
          <Card.Title>Card Title</Card.Title>
          <Card.Text>
            Some quick example text to build on the card title and make up the
            bulk of the card's content.
          </Card.Text>
          <Button variant="primary">Go somewhere</Button>
        </Card.Body>
      </Card>
      <Card style={{ width: "18rem" }}  className='mt-3'>
        <Card.Img variant="top" src="card-4.jpg" />
        <Card.Body>
          <Card.Title>Card Title</Card.Title>
          <Card.Text>
            Some quick example text to build on the card title and make up the
            bulk of the card's content.
          </Card.Text>
          <Button variant="primary">Go somewhere</Button>
        </Card.Body>
      </Card>
    </div>
  );
}

Bu bölümde 4 adet Card komponenti kullandık.

Ve son olarakda CardBottom komponentimiz için components dizini içerisinde CardBottom.js adında bir dosya oluşturalım ve içeriği aşağıdaki gibi olsun.

import React from 'react';
import Alert from 'react-bootstrap/Alert';

function CardBottom() {
  return (
    <Alert variant="success" className='mt-4'>
      <Alert.Heading>Hey, nice to see you</Alert.Heading>
      <p>
        Aww yeah, you successfully read this important alert message. This
        example text is going to run a bit longer so that you can see how
        spacing within an alert works with this kind of content.
      </p>
      <hr />
      <p className="mb-0">
        Whenever you need to, be sure to use margin utilities to keep things
        nice and tidy.
      </p>
    </Alert>
  );
}

export default CardBottom;

CardBottom komponenti içerisinde React Bootstrap Alert komponentini kullandık. Renk ayarını yapmak için de variant=’success’ probunu girdik.

Şimdi sıra Content komponentine geldi. Daha önce Content.js isimli dosyamızı oluşturmuştuk. Bu dosya içerisinde son oluşturduğumuz komponentleri import ederek kullanacağız.

import React from "react";
import { Container } from "react-bootstrap";
import CardBootom from "./CardBottom";
import Cards from "./Cards";
import Featured from "./Featured";
import Header from "./Header";

function Content() {
  return (
    <Container className="mt-3">
        <Header />
        <Featured />
        <Cards />
        <CardBootom />
    </Container>
  );
}

export default Content;

Sade ve içi dolu bir içerik oluşturmuş olduk. Content komponentimizi App komponetizmiz içerisinde kullanacağız. Bu nedenle App.js dosyasını aşağıdaki gibi değiştiriyoruz.

import React from 'react';
import MainMenu from './components/MainMenu';
import Footer from './components/Footer';
import Content from './components/Content';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';

function App() {
  return (
    <div>
      <MainMenu />
      <Content />
      <Footer />
    </div>
  );
}

export default App;

Artık sayfamızı bitirmiş olduk. Komut satırından npm start komutunu girdiğimizde sayfamız çalışmaya başlayacaktır.

Az bir uğraş ile güzel bir sayfa tasarımı çıkardık. React Bootstrapın bize sağladığı komponentler ile çok daha güzel sayfalar çıkarabiliriz. Biz bu yazımızda sadece nasıl kullanabileceğimiz üzerinde durduk. Kendi dökümanlarında daha ayrıntılı bilgiler bulunmaktadır.

Oluşturduğumuz bu çalışmanın dosyalarına Github üzerinden ulaşabilirsiniz.

Sormak istediğiniz sorular veya eklemek istediğiniz konular varsa yorumlara yazabilirsiniz.