Pembaca seperti Anda membantu mendukung MUO. Saat Anda melakukan pembelian menggunakan tautan di situs kami, kami dapat memperoleh komisi afiliasi. Baca selengkapnya.

Membuat antarmuka front-end bisa menjadi tantangan jika Anda baru mengenal ReactJS. Kerangka kerja Bootstrap, bersama dengan templatnya, membuatnya lebih mudah dan lebih cepat.

Bootstrap memiliki template bertema yang dapat disesuaikan dan diterbitkan oleh siapa saja secara gratis. Anda dapat memilih dari banyak template sebelum mengunduh dan menggunakannya di aplikasi Anda.

Template membantu Anda dengan cepat membuat antarmuka frontend yang luar biasa, menyisakan lebih banyak waktu untuk fokus pada fitur yang kompleks. Anda dapat mempelajari tentang template Bootstrap dengan mengintegrasikannya dengan Aplikasi ReactJS.

Buat Aplikasi Bereaksi Anda

Mulai oleh membuat Aplikasi ReactJS dalam folder di mesin Anda. Atau, Anda dapat mengikuti resmi Panduan reaksi dalam membuat aplikasi baru.

Unduh Templat Bootstrap

Unduh templat pilihan Anda dari

instagram viewer
Mulai Bootstrap situs web tema atau pilihan Anda lainnya. Ada beberapa situs dengan template Bootstrap gratis online.

Untuk panduan ini, unduh tema Bootstrap bernama Agency.

Setelah diunduh, unzip file folder untuk melihat isinya. Anda akan melihat bahwa Anda memiliki folder bernama aset, CSS, JS, dan file bernama index.html.

Tambahkan Templat Bootstrap ke Aplikasi ReactJS

Selanjutnya, salin isi folder yang diunduh ke dalam folder bernama publik di Aplikasi Bereaksi Anda. Anda akan melihat bahwa sekarang Anda memiliki dua file index.html. Salin konten Bootstrap index.html file ke dalam React App's index.html mengajukan.

Tampilkan Templat Bootstrap

Setelah menambahkan HTML Bootstrap ke index.html Aplikasi, jalankan Aplikasi untuk melihat apakah integrasi berhasil. Gunakan perintah berikut:

mulai npm

Anda akan melihat template di browser Anda, seperti yang diilustrasikan oleh gambar berikut.

Integrasikan Tema Bootstrap ke dalam Komponen Aplikasi

Untuk mengintegrasikan template Bootstrap ke dalam Aplikasi React, Anda harus menyalin bagian HTML dari index.html ke setiap komponen. Komponen memungkinkan Anda menulis kode untuk berbagai bagian Aplikasi dan menggunakannya kembali. Ini mengurangi pengulangan dan juga mengatur struktur Aplikasi Anda.

File index.html sekarang memiliki bagian yang berbeda Navigasi, Tentang kami, Kontak, dan Footer. Di folder src, buat dua folder, komponen, dan halaman. Bagilah bagian ke dalam folder yang ditunjukkan di bawah ini:

Komponen harus mencakup yang berikut:

  • Header.jsx: Bagian masthead.
  • Navigation.jsx: Bilah navigasi dan footer.

Folder halaman akan memiliki yang berikut:

  • AboutUs.jsx: Informasi tentang kami.
  • Home.jsx: bagian Layanan, Portofolio, Klien, dan Tim.
  • Contacts.jsx: Informasi kontak.

Salin HTML setiap bagian dari file index.html dan tambahkan ke setiap komponen. Sintaksnya akan terlihat seperti ini:

impor Reaksi dari'reaksi'
const Tajuk = () => {
kembali (




"kepala surat">
"wadah">
"subjudul masthead">Selamat Datang Di Studio Kami!</div>









"huruf besar teks judul masthead">
 DiaSenang Bertemu Denganmu
 </div>



"btn btn-primer btn-xl teks-huruf besar" href="#jasa">
 Ceritakan Lebih Banyak
 </a>
 </div>
 </header>
 </div>
 );
};


eksporbawaan Tajuk

Selanjutnya, ubah sintaks HTML pada komponen menjadi JSX. Untuk melakukan ini secara otomatis pada klik editor Vscode Ctrl + Shift + P. Klik opsi HTML to JSX pada jendela yang muncul, untuk mengubah HTML menjadi JSX.

JSX adalah ekstensi sintaks untuk JavaScript. Ini memungkinkan Anda menggunakan campuran HTML dan JavaScript untuk menulis kode dalam komponen. Setelah Anda menyalin semua bagian ke komponen, file index.html tetap hanya berisi link dan skrip penataan gaya.

Ini akan terlihat seperti ini:

html>
<htmllang="en">


<kepala>
<metacharset="utf-8" />
<tautanrel="ikon"href="%PUBLIC_URL%/favicon.ico" />
<metanama="area pandang"isi="width=device-width, initial-scale=1" />
<metanama="warna-tema"isi="#000000" />
<metanama="keterangan"isi="Situs web dibuat menggunakan create-react-app"/>
<tautanrel="ikon-sentuh-apel"href="%PUBLIC_URL%/logo192.png" />
<tautanrel="tampak"href="%PUBLIC_URL%/manifest.json" />
<judul>Bereaksi Aplikasijudul>
<tautanrel="ikon"jenis="gambar/ikon-x"href="aset/favicon.ico" />


 Ikon Font Awesome (versi gratis)
<naskahsrc=" https://use.fontawesome.com/releases/v6.1.0/js/all.js"crossorigin="anonim">naskah>


 Font Google
<tautanhref=" https://fonts.googleapis.com/css? keluarga=Montserrat: 400.700"rel="lembar gaya"jenis="teks/css" />
<tautanhref=" https://fonts.googleapis.com/css? keluarga=Roboto+Slab: 400.100.300.700"rel="lembar gaya"jenis="teks/css" />


 CSS tema inti (termasuk Bootstrap)
<tautanhref="%PUBLIC_URL%/css/styles.css"rel="lembar gaya" />
kepala>


<tubuh>
<noscript>Anda perlu mengaktifkan JavaScript untuk menjalankan aplikasi ini.noscript>


<divpengenal="akar">div>


 Bootstrap inti JS
<naskahsrc=" https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">naskah>


 Tema inti JS
<naskahsrc="%PUBLIC_URL%/js/scripts.js">naskah>


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


 * * SB Membentuk JS * *


 * * Aktifkan formulir Anda di https://startbootstrap.com/solution/contact-forms * *


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


<naskahsrc=" https://cdn.startbootstrap.com/sb-forms-latest.js">naskah>
tubuh>
html>

Buat Rute untuk Komponen

Sekarang setelah Anda memiliki tautan, skrip, dan komponen di Aplikasi, Anda harus membuat rute untuknya di file App.js. Rute akan merender halaman di Aplikasi untuk membuatnya dinamis.

Untuk merender halaman, instal react-router-dom dengan perintah berikut:

npm install react-router-dom

Dalam Aplikasi.js file, impor BrowserRouter sebagai Router, Rute, dan Rute dari pustaka react-router-dom. Kemudian impor semua komponen Dan Halaman. File akan terlihat seperti ini:

impor {BrowserRouter sebagai Router, Rute, Rute } dari"bereaksi-router-dom";
impor Navigasi dari'./komponen/Navigasi';
impor Rumah dari'./Halaman/Beranda';
impor Tentang dari'./Halaman/Tentang';
impor Kontak dari'./Halaman/Kontak'
impor Tajuk dari"./komponen/Header";
fungsiAplikasi() {
kembali (


"Aplikasi">










"/" elemen={} />
"/tentang" elemen={} />
"/kontak" elemen={} />
 </Routes>
 </Navigation>
 </Router>
 </div>
 );
}


eksporbawaan Aplikasi;

Anda akan melihat halaman yang dirender di host lokal saat Anda menavigasi browser. Mirip dengan template yang Anda unduh, seperti yang diilustrasikan di bawah ini.

Selamat, Anda telah berhasil mengintegrasikan tema Bootstrap ke dalam Aplikasi React Anda. Anda sekarang dapat menyesuaikan halaman sesuai keinginan Anda.

Mengapa Menggunakan Template Bertema Bootstrap?

Template bootstrap membantu membuat antarmuka front-end yang luar biasa dalam waktu yang sangat singkat. Ada banyak tema untuk dipilih. Semua tema adalah versi Bootstrap terbaru. Mereka juga datang dengan lisensi MIT dan merupakan desain industri terbaru.

Meskipun banyak keuntungannya, mengandalkan template mengurangi kreativitas. Adalah umum untuk menemukan satu tema populer yang digunakan di situs lain secara online. Namun, Anda dapat menyesuaikan template dengan desain yang unik.

Sekarang Anda dapat mengintegrasikan template Bootstrap dengan Aplikasi React Anda. Mulailah membangun dengan template Bootstrap dan nikmati antarmuka front-end yang indah.