React’a Bootsrap nasıl eklenir
React’e Bootsrap eklemenin birden fazla yolu var, bunlardan ikisine değineceğim.
- Dosyaları indirmeden, cdn kullanarak:
React uygulamanızın ana dizininde yer alan public klasörünün içindeki index.html dosyamızı açalım. Karşımıza şu şekilde bir yapı çıkacak:
Sizlerin de bildiği üzere React ile yazdığımız kodlar id’si “root” olan div’de renderlanıyor. Şimdi Bootstrap’i ekleyelim uygulamamıza.
Yazılan kodlara buradan erişebilirsiniz.
İşlemimiz bu kadar, artık dilediğiniz gibi yazabilirsiniz. Not: “class” yerine “className” yazmayı unutmayın. Örnek:
2. Bootstrap dosyalarını uygulamamıza ekleyerek.
Diğer işleme göre daha karmaşık gözükse de inanın zor değil, gelin nasıl yapmamız gerektiğine bakalım.
Öncelikle bu yapacağımız işlemler için bilgisayarınızda node.js kurulu olmalı, eğer kurulu değilse şu adresten işletim sistemine uygun olanı seçip indirip ardından kurunuz. Bilgisayarınızda node.js kurulu olduğunu varsayarak anlatımıma devam ediyorum.
VS Code üzerinden File → Open Folder sekmesinden React Uygulamanızı seçiniz. Ardından aşağıdaki resimde 1 ile işaretlediğim alandan sırasıyla
Terminal → New Terminal dedikten sonra resimde 3 ile gösterdiğim alan açılacak. Burada dikkat ederseniz react uygulamamızın bulunduğu konum yazıyor ardından ise npm i bootstrap (bunu ben ekledim sizlerde copy-paste yapın) . Bu ifade şu anlama gelmekte npm üzerinde install yap bootstrap’i. Bunu yazıp enter’a bastığımızda terminalde bir şeylerin yüklendiğini göreceksiniz.
Yükleme işlemi bittikten sonra yapmamız gereken tek bir şey kaldı. index.js dosyanızı açın ve şu kodu ekleyin: import 'bootstrap/dist/css/bootstrap.min.css';Ekledikten sonra oluşan görüntü şu şekilde olmalıdır:
İşlemlerimiz bu kadar artık gönül rahatlığıyla bootstrap kullanabilirsiniz.
