Çarşamba 25 Ocak 2023
Hakkında
Yazarlarımız
Reklam
Künye
İletişim
Webmaster.Kitchen – Türkiye'nin Webmaster MutfağıWebmaster.Kitchen – Türkiye'nin Webmaster Mutfağı

Bülten

Sosyal Medya Yasası Kabul Edildi

Binance ‘e Siber Saldırı

Webmaster.Kitchen – Türkiye'nin Webmaster MutfağıWebmaster.Kitchen – Türkiye'nin Webmaster Mutfağı
  • BAŞLARKEN
    • KOD
      • PHP
      • Asp.Net
      • Swift
      • MySQL
      • CMS
  • TASARIM
    • İpuçları
    • Çizim
    • Illustrator
    • Photoshop
    • Trendler
  • ARAYÜZ
    • JavaScript
    • HTML5
    • CSS
    • REACT
  • İPUÇLARI
    • API
    • Güvenlik
    • IDE
    • Framework
    • OS
    • Verimlilik
    • İçerik
      • Dökümantasyon
      • İpuçları
      • Nasıl Oluşturulur?
  • KAYNAKLAR
    • Tasarım
    • Kod
    • İş
  • GİRİŞİM
    • Finans
    • Girişimci
    • Nasıl yapılır?
  • ARAÇLAR
  1. Anasayfa
  2. CSS
  3. React ile Bootstrap Kullanmak
 React ile Bootstrap Kullanmak
CSS JavaScript

React ile Bootstrap Kullanmak

Yazar : Bilal UÇAR 11 Aralık 2017 2 Comments

React ile Bootstrap kullanmanın birden çok yolu vardır. Bootstrap CDN linkini kullanarak, Bootsrap dosyalarını indirerek, veya npm ile bootstrap paketini indirip projemize dahil ederek bootstrap kullanabiliriz.

React JS Başlangıç Rehberi adlı yazımda React kütüphanesinin çıkış hikayesini, neden react kullanmamız gerektiğini ve kısaca kullanımı hakkında bilgi vermiştim. Bu makalede ise bir react projesi oluşturup Bootstrap frameworkünü nasıl beraberinde kullanabileceğimizden bahsedeceğim.

Kısaca Bootstrap ‘ten bahsetmek gerekirse Bootstrap web üzerinde responsive, mobil-öncelikli projeler geliştirmek için en popüler HTML, CSS, JS kütüphanesidir.

React projesi oluşturmaya geçmeden önce bilgisayarınızda npm ve nodejs olmadan çalışmayacağını hatırlatalım.

Öncelikle masaüstünde react projelerimi oluşturacağım bir klasör açıyorum. Adına da React dedim. Şimdi ben bu dosyanın içerisine ilk react projemi oluşturacağım. Öncelikle terminal ekranından cd komutuyla oluşturduğum klasöre gidiyorum. Siz de nereye proje oluşturmak istiyorsanız o dizine gidin.

Node.js ve npm kurduktan sonra react projesi oluşturmak için npm install -g create-react-app komutunu girin. Ben daha önceden react çalıştığım için bende zaten mevcut.
Ardından create-react-app my-app komutunu kullanarak proje oluşturuyoruz. my-app kısmı projenizin adı olacak. Ben bootstrap adında bir proje oluşturdum. Siz de keyfinize göre bir proje oluşturabilirsiniz.

Success ile başlayan bir yanıt aldıysanız react projeniz başarılı bir şekilde oluşturulmuştur.

Şimdi projemizin çalıştırmak için cd komutuyla projemizin içine giriyoruz.

Projemizin içine girdikten sonra npm start komutuyla projemizi çalıştırıyoruz. Daha sonra localhost:3000 sayfası otomatik açılıyor.

React Projesinde Bootstrap CDN Nasıl Kullanılır?

Şimdi gelelim react projemize Bootstrap eklemeye. Öncelikle Bootstrap ‘in sitesindeki Bootstrap CDN alanından lazım olacak kısmı kopyalıyoruz.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

Kopyaladığımız kısmı projemizin public klasörünün altındaki index.html dosyasında aşağı ekran görüntüsünde gördüğünüz kısma yapıştırın.

Deneme amaçlı App.js dosyasına Bootstrap button ekliyorum ve test ediyorum.

Sayfamızın altında bootstrap butonunu gördül. Bootstrap eklemenin birinci yöntemi bu şekilde.

React Projesinde Bootstrap Dosyalarını İndirerek Kullanmak

İkinci bir yöntem ise bootstrap dosyalarını indirip projeye dahil etmek şeklinde olacak. Kullanmak istediğimiz dosyaları public klasörüne atıyoruz. Ben şimdilik sadece cssleri deneme amacıyla atıyorum. Daha sonra index.html dosyasında bu css kütüphanesinin yolunu gösteriyoruz.

Bunun dışında npm’den bootstrap paketini kurarak da kullanabilirsiniz.

Bu makalede React ile Bootstrap kütüphanesinin nasıl kullanılacağından bahsettik. Siz de düşüncelerinizi yorum yaparak bizlerle paylaşabilirsiniz.

Etiketler: react bootstrap react ile bootstrap kullanmak react proje nasıl oluşturulur react projeye bootstrap nasıl dahil edilir
Önceki Yazı
Sonraki Yazı

Bilal UÇAR (Website)

administrator

Front-end Developer @Webmaster.Kitchen. Front-end developer olarak çalışıyorum. Bu konuda öğrendiklerimi sizlerle paylaşmaya çalışıyorum. Siz de yaptığınız çalışmaları, edindiğiniz bilgileri paylaşabilirsiniz. Yorum alanı ile mutfağa katkıda bulunun.

2 Yorumlar

  • emre says:
    18 Aralık 2017 at 10:23

    Bence bu şekilde kullanmak best practice değil.

    Reply
    • Bilal UÇAR says:
      18 Aralık 2017 at 13:21

      Paket kurularak eklenen bootstrap mi best practice ?

      Reply

Yorum Yap Yorumu İptal Et.

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Taze Yazılar
Güncel

Sosyal Medya Yasası Kabul Edildi

14 Ekim 2022
Blockchain

Binance ‘e Siber Saldırı

8 Ekim 2022
Blockchain

Binance ‘den Ücretsiz Eğitim

5 Ekim 2022
Güncel

Japonya için Yenilenen Corolla

4 Ekim 2022
© 2021 Webmaster Kitchen. Tüm Hakları Saklıdır.