Sizin gibi okuyucular MUO'yu desteklemeye yardımcı oluyor. Sitemizdeki bağlantıları kullanarak bir satın alma işlemi gerçekleştirdiğinizde, bir ortaklık komisyonu kazanabiliriz. Devamını oku.

ReactJS'de yeniyseniz, bir ön uç arayüzü oluşturmak zor olabilir. Önyükleme çerçevesi, şablonlarının yanı sıra bunu daha kolay ve daha hızlı hale getirir.

Bootstrap, herkesin ücretsiz olarak özelleştirip yayınlayabileceği temalı şablonlara sahiptir. İndirip uygulamanızda kullanmadan önce birçok şablon arasından seçim yapabilirsiniz.

Şablonlar, hızla dikkat çekici ön uç arayüzleri oluşturmanıza yardımcı olarak karmaşık özelliklere odaklanmak için daha fazla zaman bırakır. Bir ReactJS Uygulaması ile entegre ederek Bootstrap şablonları hakkında bilgi edinebilirsiniz.

React Uygulamanızı Oluşturun

La başlamak ReactJS Uygulaması oluşturma makinenizdeki bir klasörde. Alternatif olarak, resmi takip edebilirsiniz. Tepki kılavuzu yeni bir uygulama oluştururken.

Bir Önyükleme Şablonu İndirin

Seçtiğiniz bir şablonu şu adresten indirin:

instagram viewer
Önyüklemeyi Başlat temalar web sitesi veya tercih ettiğiniz başka bir site. Çevrimiçi olarak ücretsiz Bootstrap şablonlarına sahip birkaç site var.

Bu kılavuz için Agency adlı Bootstrap temasını indirin.

İndirdikten sonra, içeriğini görmek için klasör dosyasını açın. Varlıklar, CSS, JS adlı klasörleriniz ve index.html adlı bir dosyanız olduğunu fark edeceksiniz.

ReactJS Uygulamasına Bootstrap Şablonu Ekleyin

Ardından, indirilen klasörün içeriğini adlı klasöre kopyalayın. halk React Uygulamanızda. Artık iki index.html dosyanız olduğunu fark edeceksiniz. Önyükleme içeriğini kopyalayın index.html React App'in içine dosya index.html dosya.

Önyükleme Şablonunu Görüntüle

Önyükleme HTML'sini Uygulamanın index.html dosyasına ekledikten sonra, entegrasyonun başarılı olup olmadığını görmek için Uygulamayı çalıştırın. Aşağıdaki komutu kullanın:

Npm başlangıç

Aşağıdaki resimde gösterildiği gibi şablonu tarayıcınızda görmelisiniz.

Önyükleme Temasını Uygulama Bileşenlerine Entegre Edin

Bootstrap şablonunu React Uygulamasına entegre etmek için, index.html'deki HTML bölümlerini her bir bileşene kopyalamanız gerekir. Bileşenler, Uygulamanın farklı bölümleri için kod yazmanıza ve bunları yeniden kullanmanıza olanak tanır. Bu, tekrarı azaltır ve ayrıca Uygulamanızın yapısını düzenler.

index.html dosyası artık Gezinme, Hakkımızda, İletişim ve Altbilgi gibi farklı bölümlere sahiptir. src klasöründe iki klasör, bileşen ve sayfa oluşturun. Bölümleri aşağıda gösterilen klasörlere ayırın:

Bileşenler aşağıdakileri içermelidir:

  • Header.jsx: Künye bölümü.
  • Navigation.jsx: Gezinme çubuğu ve alt bilgi.

Sayfaların klasörü aşağıdakilere sahip olacaktır:

  • AboutUs.jsx: Hakkımızda bilgileri.
  • Home.jsx: Hizmetler, Portföy, İstemciler ve Ekip bölümleri.
  • Contacts.jsx: İletişim bilgileri.

Her bölümün HTML'sini index.html dosyasından kopyalayın ve her bileşene ekleyin. Sözdizimi şöyle görünmelidir:

içe aktarmak Tepki itibaren'tepki'
sabit Başlık = () => {
geri dönmek (




"mastürbasyon">
"konteyner">
"masthead-alt başlık">Stüdyomuza Hoş Geldiniz!</div>









"masthead-heading metin-büyük harf">
 BTTanıştığımıza memnun oldum
 </div>



"btn btn-birincil btn-xl metin-büyük harf" href="#Hizmetler">
 Bana daha fazlasını anlat
 </a>
 </div>
 </header>
 </div>
 );
};


ihracatvarsayılan Başlık

Ardından, bileşenlerdeki HTML'nin sözdizimini JSX olarak değiştirin. Bunu Vscode düzenleyicide otomatik olarak yapmak için tıklayın Ctrl + Üst Karakter + P HTML'yi JSX olarak değiştirmek için açılan pencerede HTML'den JSX'e seçeneğini tıklayın.

JSX, JavaScript için bir sözdizimi uzantısıdır. Bileşenlere kod yazmak için HTML ve JavaScript'in bir karışımını kullanmanıza izin verir. Tüm bölümleri bileşenlere kopyaladığınızda, index.html dosyasında yalnızca stil bağlantıları ve komut dosyaları kalır.

Şöyle görünecek:

html>
<htmldil="tr">


<KAFA>
<metakarakter kümesi="utf-8" />
<bağlantırel="simge"href="%PUBLIC_URL%/favicon.ico" />
<metaisim="görüntü alanı"içerik="genişlik=cihaz genişliği, başlangıç ​​ölçeği=1" />
<metaisim="tema rengi"içerik="#000000" />
<metaisim="Tanım"içerik="Create-react-app kullanılarak oluşturulan web sitesi"/>
<bağlantırel="elma dokunmatik simgesi"href="%PUBLIC_URL%/logo192.png" />
<bağlantırel="belirgin"href="%PUBLIC_URL%/manifest.json" />
<başlık>Uygulamaya Tepki Verbaşlık>
<bağlantırel="simge"tip="resim/x simgesi"href="varlıklar/favicon.ico" />


 Harika Font simgeleri (ücretsiz sürüm)
<senaryokaynak=" https://use.fontawesome.com/releases/v6.1.0/js/all.js"çapraz köken="anonim">senaryo>


 Google yazı tipleri
<bağlantıhref=" https://fonts.googleapis.com/css? aile=Montserrat: 400.700"rel="stil sayfası"tip="metin/css" />
<bağlantıhref=" https://fonts.googleapis.com/css? family=Roboto+Slab: 400,100,300,700"rel="stil sayfası"tip="metin/css" />


 Temel tema CSS (Bootstrap içerir)
<bağlantıhref="%PUBLIC_URL%/css/styles.css"rel="stil sayfası" />
KAFA>


<vücut>
<noscript>Bu uygulamayı çalıştırmak için JavaScript'i etkinleştirmeniz gerekir.noscript>


<divİD="kök">div>


 Önyükleme çekirdeği JS
<senaryokaynak=" https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">senaryo>


 Temel tema JS
<senaryokaynak="%PUBLIC_URL%/js/scripts.js">senaryo>


 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *


 * * SB Formları JS * *


 * * Formunuzu şu adresten etkinleştirin: https://startbootstrap.com/solution/contact-forms * *


 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *


<senaryokaynak=" https://cdn.startbootstrap.com/sb-forms-latest.js">senaryo>
vücut>
html>

Bileşenler için Tesisatlar Oluşturun

Uygulamada bağlantılara, komut dosyalarına ve bileşenlere sahip olduğunuza göre, bunlar için App.js dosyasında yollar oluşturmalısınız. Rotalar, Uygulamayı dinamik hale getirmek için sayfaları işleyecektir.

Sayfaları işlemek için, aşağıdaki komutla tepki-yönlendirici-dom'u kurun:

npm install tepki-yönlendirici-dom

İçinde Uygulama.js dosyasından BrowserRouter'ı Yönlendirici, Rotalar ve Rota olarak içe aktarın. tepki-yönlendirici-dom kitaplığı. Ardından, tümünü içe aktarın bileşenler Ve Sayfalar. Dosya şöyle görünmelidir:

içe aktarmak { TarayıcıYönlendirici gibi Yönlendirici, Rotalar, Rota } itibaren"tepki-yönlendirici-dom";
içe aktarmak Navigasyon itibaren'./bileşenler/Navigasyon';
içe aktarmak Ev itibaren'./Sayfalar/Ana Sayfa';
içe aktarmak Hakkında itibaren'./Sayfalar/Hakkında';
içe aktarmak Temas etmek itibaren'./Sayfalar/İletişim'
içe aktarmak Başlık itibaren"./bileşenler/Başlık";
işlevUygulama() {
geri dönmek (


"Uygulama">










"/" eleman={} />
"/hakkında" eleman={} />
"/temas etmek" eleman={} />
 </Routes>
 </Navigation>
 </Router>
 </div>
 );
}


ihracatvarsayılan Uygulama;

Tarayıcıda gezinirken, oluşturulan sayfaları yerel ana bilgisayarda görmelisiniz. Aşağıda gösterildiği gibi, indirdiğiniz şablona benzer.

Tebrikler, bir Bootstrap temasını React Uygulamanıza başarıyla entegre ettiniz. Artık sayfaları tercihinize göre özelleştirebilirsiniz.

Bootstrap'in Temalı Şablonlarını Neden Kullanmalı?

Önyükleme şablonları, çok kısa bir süre içinde olağanüstü ön uç arayüzler oluşturmaya yardımcı olur. Aralarından seçim yapabileceğiniz birçok tema var. Tüm temalar en son Bootstrap sürümündedir. Ayrıca MIT lisanslarıyla gelirler ve en son endüstri tasarımlarıdır.

Avantajları çok olsa da, şablonlara güvenmek yaratıcılığı azaltır. Çevrimiçi olarak diğer sitelerde kullanılan popüler bir tema bulmak yaygındır. Ancak, bir şablonu benzersiz bir tasarıma göre özelleştirebilirsiniz.

Artık bir Bootstrap şablonunu React Uygulamanıza entegre edebilirsiniz. Bootstrap şablonlarıyla oluşturmaya başlayın ve güzel ön uç arabirimlerinin keyfini çıkarın.