Aytaç Ünal

Aytaç Ünal

React uygulamada Bootstrap tema nasıl giydirilir.

React uygulamada Bootstrap tema nasıl giydirilir.

Arkadaşlar Merhaba ;

Bu yazımda size oluşturduğumuz react uygulamasına bootstrap temayı nasıl component haline getiririz onu göstereceğim.

  1. React kurulumu

  2. Bootstrap kurulumu

  3. Temayı komponentlerine ayırma

1.React Kurulumu

Biraz bilgi sahibi olduğunuz düşünerek; terminal ekranınıza aşşağıdaki kodu yazıyor, react uygulamamızı oluşturuyoruz.

npx create-react-app

Eğer sonuna uygulama ismini yazmazsanız komutu yazdığınız dizine kurulum yapar.Ama aşşağıdaki kodu yazarsanız dizin oluşturur içerisine kurulum yapar.

npx create-react-app my-app
cd my-app && yarn start

Yukarıdaki komutları uygulama oluştuktan sonra komut satırına yazarsanız o dizine gider ve 3000 portunda uygulamayı ayağa kaldırır.

Screen Shot 2021-08-30 at 20.10.07.png

2.Bootstrap Kurulumu

Bootstrap'in react için oluşturduğu paketi içeren siteye giderek indirebilirsiniz. React Bootstrap

Getting Started ardından Installation sekmesindeki komutu uygulama dizininde komut satırına yazabilirsiniz.(Sürekli kullanacaksanız sonuna --save parametresini koymayı unutmayın)

npm install react-bootstrap@next bootstrap@5.1.0

Kurulum bittikten sonra aynı sayfadaki Stylesheet kısmındaki css dosyasını (açıklamada yazdığı gibi) uygulama dizinindeki src klasörünün altında bulunan index.js e ekleyebilirsiniz.

{/* The following line can be included in your src/index.js or App.js file*/}

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

3. Temayı komponentlerine ayırma

Startbootstrap'in sitesinde bulunan ücretsiz bir tema seçtim.Bu ve bunun gibi temaları kullanarak deneme yapabilirsiniz. Tema

Temanın içinde bulunan index.html dosyasının içindeki scriptler hariç iki body arasındaki tüm satırları kopyalayarak React uygulamamızın içindeki src klasöründe bulunan App.js'e yapıştırabilirsiniz.

Bunu yaparken dikkat etmeniz gereken hususlardan biri kodları jsx'e çevirmeniz gerektiği diğer bir husus da aşşağıdaki resimde gösterilen şekilde olmasıdır.

function App() {
  return (
      <div>
        {/* Navigation*/}
        <nav className="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
          <div className="container px-4">
            <a className="navbar-brand" href="#page-top">Start Bootstrap</a>
            <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><span className="navbar-toggler-icon" /></button>
            <div className="collapse navbar-collapse" id="navbarResponsive">
              <ul className="navbar-nav ms-auto">
                <li className="nav-item"><a className="nav-link" href="#about">About</a></li>
                <li className="nav-item"><a className="nav-link" href="#services">Services</a></li>
                <li className="nav-item"><a className="nav-link" href="#contact">Contact</a></li>
              </ul>
            </div>
          </div>
        </nav>
        {/* Header*/}
        <header className="bg-primary bg-gradient text-white">
          <div className="container px-4 text-center">
            <h1 className="fw-bolder">Welcome to Scrolling Nav</h1>
            <p className="lead">A functional Bootstrap 5 boilerplate for one page scrolling websites</p>
            <a className="btn btn-lg btn-light" href="#about">Start scrolling!</a>
          </div>
        </header>
        {/* About section*/}
        <section id="about">
          <div className="container px-4">
            <div className="row gx-4 justify-content-center">
              <div className="col-lg-8">
                <h2>About this page</h2>
                <p className="lead">This is a great place to talk about your webpage. This template is purposefully unstyled so you can use it as a boilerplate or starting point for you own landing page designs! This template features:</p>
                <ul>
                  <li>Clickable nav links that smooth scroll to page sections</li>
                  <li>Responsive behavior when clicking nav links perfect for a one page website</li>
                  <li>Bootstrap's scrollspy feature which highlights which section of the page you're on in the navbar</li>
                  <li>Minimal custom CSS so you are free to explore your own unique design options</li>
                </ul>
              </div>
            </div>
          </div>
        </section>
        {/* Services section*/}
        <section className="bg-light" id="services">
          <div className="container px-4">
            <div className="row gx-4 justify-content-center">
              <div className="col-lg-8">
                <h2>Services we offer</h2>
                <p className="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut optio velit inventore, expedita quo laboriosam possimus ea consequatur vitae, doloribus consequuntur ex. Nemo assumenda laborum vel, labore ut velit dignissimos.</p>
              </div>
            </div>
          </div>
        </section>
        {/* Contact section*/}
        <section id="contact">
          <div className="container px-4">
            <div className="row gx-4 justify-content-center">
              <div className="col-lg-8">
                <h2>Contact us</h2>
                <p className="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero odio fugiat voluptatem dolor, provident officiis, id iusto! Obcaecati incidunt, qui nihil beatae magnam et repudiandae ipsa exercitationem, in, quo totam.</p>
              </div>
            </div>
          </div>
        </section>
        {/* Footer*/}
        <footer className="py-5 bg-dark">
          <div className="container px-4"><p className="m-0 text-center text-white">Copyright © Your Website 2021</p></div>
        </footer>
      </div>
  );
}

Tabi yapıştırdıktan sonra eğer temaya ait css dosyasını uygulamaya eklemezseniz. Aşşağıdaki resimdeki hali alır.

Screen Shot 2021-08-30 at 20.37.15.png

Temanın içinde bulunan css dosyasının içindeki styles.css 'i uygulamamızda bulunan index.css 'e içindekileri silerek ekliyor ve aşşağıdaki halini almasını sağlıyoruz.

Screen Shot 2021-08-30 at 20.39.52.png

İşte bu kadar . Bu temanın içerisindeki sınıfları değiştirerek kendi isteğinize göre şekillendirebilirsiniz.Bu yazımda react uygulama oluşturma , bootstrap kurulumu ve tema giydirmeyi gösterdim, bir sonraki yazımda daha farklı bir içerik ile beraber olacağız.

 
Share this