Читатели като вас помагат в подкрепа на MUO. Когато правите покупка чрез връзки на нашия сайт, ние може да спечелим комисионна за партньор. Прочетете още.

Създаването на преден интерфейс може да бъде предизвикателство, ако сте нов в ReactJS. Рамката Bootstrap, заедно със своите шаблони, го прави по-лесно и по-бързо.

Bootstrap има тематични шаблони, които всеки може да персонализира и публикува безплатно. Можете да избирате от много шаблони, преди да ги изтеглите и използвате в приложението си.

Шаблоните ви помагат бързо да създавате забележителни предни интерфейси, оставяйки повече време за фокусиране върху сложни функции. Можете да научите за шаблоните на Bootstrap, като интегрирате един с приложение ReactJS.

Създайте вашето приложение React

Започнете от създаване на приложение ReactJS в папка на вашето устройство. Като алтернатива можете да следвате официалния Ръководство за реакция при създаване на ново приложение.

Изтеглете шаблон за Bootstrap

Изтеглете шаблон по ваш избор от Стартирайте Bootstrap

instagram viewer
тематичен уебсайт или друг по ваше предпочитание. Има няколко сайта с безплатни шаблони на Bootstrap онлайн.

За това ръководство изтеглете темата Bootstrap, наречена Agency.

След като го изтеглите, разархивирайте файла на папката, за да видите съдържанието му. Ще забележите, че имате папки с имена на активи, CSS, JS и файл с име index.html.

Добавете Bootstrap шаблон към приложението ReactJS

След това копирайте съдържанието на изтеглената папка в папката с име публичен във вашето приложение React. Ще забележите, че сега имате два файла index.html. Копирайте съдържанието на Bootstrap index.html файл в приложението React index.html файл.

Показване на Bootstrap шаблон

След като добавите Bootstrap HTML към index.html на приложението, стартирайте приложението, за да видите дали интеграцията е била успешна. Използвайте следната команда:

npm стартиране

Трябва да видите шаблона във вашия браузър, както е показано на следната снимка.

Интегрирайте темата Bootstrap в компонентите на приложението

За да интегрирате шаблона Bootstrap в приложението React, трябва да копирате HTML секциите от index.html към всеки компонент. Компонентите ви позволяват да пишете код за различни части на приложението и да ги използвате повторно. Това намалява повторенията и също така организира структурата на вашето приложение.

Файлът index.html вече има различни секции Навигация, За нас, Контакти и Долен колонтитул. В папката src създайте две папки, компоненти и страници. Разделете секциите в папките, показани по-долу:

Компонентите трябва да включват следното:

  • Header.jsx: Главният раздел.
  • Navigation.jsx: Навигационната лента и долен колонтитул.

Папката на страниците ще има следното:

  • AboutUs.jsx: Информация за нас.
  • Home.jsx: секции Услуги, Портфолио, Клиенти и Екип.
  • Contacts.jsx: Информация за контакт.

Копирайте HTML кода на всеки раздел от файла index.html и го добавете към всеки компонент. Синтаксисът трябва да изглежда така:

импортиране Реагирайте от"реагира"
конст Заглавие = () => {
връщане (




"главна глава">
"контейнер">
"masthead-subheading">Добре дошли в нашето студио!</div>









"masthead-heading text-uppercase">
 ТоПриятно ми е да се запознаем
 </div>



"btn btn-основен btn-xl текст с главни букви" href="#услуги">
 Кажи ми повече
 </a>
 </div>
 </header>
 </div>
 );
};


износпо подразбиране Заглавка

След това променете синтаксиса на HTML в компонентите в JSX. За да направите това автоматично, щракнете върху редактора на Vscode Ctrl + Shift + P. Кликнете върху опцията HTML към JSX в изскачащия прозорец, за да промените HTML към JSX.

JSX е синтаксисно разширение на JavaScript. Тя ви позволява да използвате смес от HTML и JavaScript, за да пишете код в компоненти. След като копирате всички секции в компонентите, файлът index.html остава само с връзките и скриптовете за стилизиране.

Ще изглежда така:

html>
<htmlезик="bg">


<глава>
<метанабор от знаци="utf-8" />
<връзкаотн="икона"href=„%PUBLIC_URL%/favicon.ico“ />
<метаиме="viewport"съдържание="width=device-width, initial-scale=1" />
<метаиме="тема-цвят"съдържание="#000000" />
<метаиме="описание"съдържание=„Уеб сайт, създаден с помощта на create-react-app“/>
<връзкаотн="ябълка-тъч-икона"href="%PUBLIC_URL%/logo192.png" />
<връзкаотн="манифест"href=„%PUBLIC_URL%/manifest.json“ />
<заглавие>React Appзаглавие>
<връзкаотн="икона"Тип="изображение/x-икона"href="активи/favicon.ico" />


 Икони Font Awesome (безплатна версия)
<сценарийsrc=" https://use.fontawesome.com/releases/v6.1.0/js/all.js"кръстосан произход="анонимен">сценарий>


 Google шрифтове
<връзкаhref=" https://fonts.googleapis.com/css? семейство=Монсерат: 400 700"отн="стилов лист"Тип="текст/css" />
<връзкаhref=" https://fonts.googleapis.com/css? семейство=Roboto+Slab: 400,100,300,700"отн="стилов лист"Тип="текст/css" />


 CSS на основната тема (включва Bootstrap)
<връзкаhref="%PUBLIC_URL%/css/styles.css"отн="стилов лист" />
глава>


<тяло>
<noscript>Трябва да активирате JavaScript, за да стартирате това приложение.noscript>


<дивдокумент за самоличност="корен">див>


 Ядрото на Bootstrap JS
<сценарийsrc=" https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">сценарий>


 Основна тема JS
<сценарийsrc="%PUBLIC_URL%/js/scripts.js">сценарий>


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


 * * SB Forms JS * *


 * * Активирайте формата си на https://startbootstrap.com/solution/contact-forms * *


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


<сценарийsrc=" https://cdn.startbootstrap.com/sb-forms-latest.js">сценарий>
тяло>
html>

Създаване на маршрути за компоненти

Сега, след като имате връзките, скриптовете и компонентите в приложението, трябва да създадете маршрути за тях във файла App.js. Маршрутите ще визуализират страниците на приложението, за да го направят динамично.

За да визуализирате страниците, инсталирайте react-router-dom със следната команда:

npm инсталирате реагира-рутер-дом

В App.js файл, импортирайте BrowserRouter като рутер, маршрути и маршрут от библиотека react-router-dom. След това импортирайте всички компоненти и Страници. Файлът трябва да изглежда така:

импортиране { BrowserRouter като Рутер, маршрути, маршрут } от"react-router-dom";
импортиране Навигация от'./components/Navigation';
импортиране У дома от'./Pages/Home';
импортиране относно от'./Pages/About';
импортиране Контакт от'./Pages/Contact'
импортиране Заглавка от"./components/Header";
функцияПриложение() {
връщане (


"приложение">










"/" елемент={} />
"/относно" елемент={} />
"/контакт" елемент={} />
 </Routes>
 </Navigation>
 </Router>
 </div>
 );
}


износпо подразбиране Приложение;

Трябва да видите изобразените страници на локалния хост, когато навигирате в браузъра. Подобно на изтегления от вас шаблон, както е илюстрирано по-долу.

Поздравления, успешно интегрирахте тема на Bootstrap във вашето приложение React. Вече можете да персонализирате страниците според вашите предпочитания.

Защо да използвате тематични шаблони на Bootstrap?

Шаблоните Bootstrap помагат за създаването на забележителни интерфейси отпред за много кратко време. Има много теми за избор. Всички теми са от най-новата версия на Bootstrap. Те също идват с лицензи на MIT и са най-новите дизайни в индустрията.

Въпреки че предимствата са много, разчитането на шаблони намалява креативността. Обичайно е да намерите една популярна тема, използвана на други сайтове онлайн. Въпреки това можете да персонализирате шаблон за уникален дизайн.

Сега можете да интегрирате шаблон на Bootstrap с вашето приложение React. Започнете да изграждате с шаблони Bootstrap и се насладете на красиви интерфейси отпред.