Создание внешнего интерфейса может оказаться сложной задачей, если вы новичок в ReactJS. Фреймворк Bootstrap, наряду с его шаблонами, делает его проще и быстрее.
В Bootstrap есть тематические шаблоны, которые каждый может настроить и опубликовать бесплатно. Вы можете выбрать один из множества шаблонов перед их загрузкой и использованием в своем приложении.
Шаблоны помогают быстро создавать замечательные внешние интерфейсы, оставляя больше времени на сложные функции. Вы можете узнать о шаблонах Bootstrap, интегрировав их с приложением ReactJS.
Создайте свое приложение React
Начать с создание приложения ReactJS в папке на вашем компьютере. Кроме того, вы можете следить за официальным Руководство по реагированию при создании нового приложения.
Загрузите шаблон начальной загрузки
Загрузите шаблон по вашему выбору из Запустить Bootstrap веб-сайт тем или другой по вашему выбору. В Интернете есть несколько сайтов с бесплатными шаблонами Bootstrap.
Для этого руководства загрузите тему Bootstrap под названием Agency.
После загрузки разархивируйте файл папки, чтобы увидеть его содержимое. Вы заметите, что у вас есть папки с именами assets, CSS, JS и файл с именем index.html.
Добавьте шаблон Bootstrap в приложение ReactJS
Далее скопируйте содержимое скачанной папки в папку с именем публичный в вашем приложении React. Вы заметите, что теперь у вас есть два файла index.html. Скопируйте содержимое Bootstrap index.html файл в React App index.html файл.
Показать шаблон Bootstrap
После добавления Bootstrap HTML в index.html приложения запустите приложение, чтобы проверить, прошла ли интеграция успешно. Используйте следующую команду:
запуск нпмВы должны увидеть шаблон в своем браузере, как показано на следующем рисунке.
Интеграция темы Bootstrap в компоненты приложения
Чтобы интегрировать шаблон Bootstrap в приложение React, вы должны скопировать разделы HTML из index.html в каждый компонент. Компоненты позволяют писать код для разных частей приложения и повторно использовать их. Это уменьшает количество повторений, а также упорядочивает структуру вашего приложения.
Файл index.html теперь имеет разные разделы: «Навигация», «О нас», «Контакты» и «Нижний колонтитул». В папке src создайте две папки, компоненты и страницы. Разделите разделы на папки, показанные ниже:
Компоненты должны включать следующее:
- Header.jsx: главный раздел.
- Navigation.jsx: панель навигации и нижний колонтитул.
Папка страницы будет иметь следующее:
- AboutUs.jsx: Информация о нас.
- Home.jsx: разделы «Сервис», «Портфолио», «Клиенты» и «Команда».
- Contacts.jsx: контактная информация.
Скопируйте HTML-код каждого раздела из файла index.html и добавьте его в каждый компонент. Синтаксис должен выглядеть так:
Импортировать Реагировать от«реагировать»константа Заголовок = () => {
возвращаться (
"шапка">
"контейнер">
"шапка-подзаголовок">Добро пожаловать в нашу студию!</div>
"текст заголовка-шапки-верхний регистр">
ЭтоПриятно познакомиться
</div>
экспортпо умолчанию Заголовок
Затем измените синтаксис HTML в компонентах на JSX. Чтобы сделать это автоматически в редакторе Vscode нажмите Ctrl+Shift+P. Нажмите на опцию HTML to JSX во всплывающем окне, чтобы изменить HTML на JSX.
JSX — это синтаксическое расширение JavaScript. Он позволяет использовать смесь HTML и JavaScript для написания кода в компонентах. После того как вы скопируете все разделы в компоненты, файл index.html останется только со ссылками на стили и скриптами.
Это будет выглядеть так:
HTML><HTMLязык="ан">
<голова>
<метакодировка="утф-8" />
<связьотн.="икона"href="%PUBLIC_URL%/favicon.ico" />
<метаимя="окно просмотра"содержание="ширина = ширина устройства, начальный масштаб = 1" />
<метаимя="тема-цвет"содержание="#000000" />
<метаимя="описание"содержание="Веб-сайт создан с помощью приложения create-реагировать"/>
<связьотн.="яблочный сенсорный значок"href="%PUBLIC_URL%/logo192.png" />
<связьотн.="манифест"href="%PUBLIC_URL%/manifest.json" />
<заголовок>Реагировать приложениезаголовок>
<связьотн.="икона"тип="изображение/x-значок"href="активы/favicon.ico" />Иконки Font Awesome (бесплатная версия)
<сценарийисточник=" 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? семья=робото+плита: 400 100 300 700"отн.="таблица стилей"тип="текст/CSS" />Базовая тема CSS (включая Bootstrap)
<связьhref="%PUBLIC_URL%/css/styles.css"отн.="таблица стилей" />
голова><тело>
<носкрипт>Вам необходимо включить JavaScript, чтобы запустить это приложение.носкрипт><дивидентификатор="корень">див>
Ядро Bootstrap JS
<сценарийисточник=" https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">сценарий>Основная тема JS
<сценарийисточник="%PUBLIC_URL%/js/scripts.js">сценарий>* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* * SB Формы JS * *
* * Активируйте форму на https://startbootstrap.com/solution/contact-forms * *
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
<сценарийисточник=" https://cdn.startbootstrap.com/sb-forms-latest.js">сценарий>
тело>
HTML>
Создание маршрутов для компонентов
Теперь, когда у вас есть ссылки, сценарии и компоненты в приложении, вы должны создать маршруты для них в файле App.js. Маршруты будут отображать страницы в приложении, чтобы сделать его динамичным.
Чтобы отобразить страницы, установите react-router-dom с помощью следующей команды:
npm установить реакцию-маршрутизатор-дом в App.js файл, импортируйте BrowserRouter как Router, Routes и Route из библиотека react-router-dom. Затем импортируйте все компоненты и Страницы. Файл должен выглядеть так:
Импортировать { Браузермаршрутизатор как Маршрутизатор, маршруты, маршрут } от"реагировать-роутер-дом";
Импортировать Навигация от'./компоненты/Навигация';
Импортировать Дом от'./Страницы/Главная';
Импортировать О от'./Страницы/О программе';
Импортировать Контакт от'./Страницы/Контакты'
Импортировать Заголовок от"./компоненты/Заголовок";функцияПриложение() {
возвращаться (
"Приложение">
"/" элемент={} />
"/о" элемент={} />
"/контакт" элемент={} />
</Routes>
</Navigation>
</Router>
</div>
);
}
экспортпо умолчанию Приложение;
Вы должны видеть отображаемые страницы на локальном хосте при навигации в браузере. Подобно загруженному вами шаблону, как показано ниже.
Поздравляем, вы успешно интегрировали тему Bootstrap в свое приложение React. Теперь вы можете настроить страницы по своему усмотрению.
Зачем использовать тематические шаблоны Bootstrap?
Шаблоны Bootstrap помогают создавать замечательные внешние интерфейсы за очень короткое время. Есть много тем на выбор. Все темы последней версии Bootstrap. Они также поставляются с лицензиями MIT и являются новейшими отраслевыми разработками.
Несмотря на множество преимуществ, использование шаблонов снижает творческий потенциал. Часто можно найти одну популярную тему, используемую на других сайтах в Интернете. Тем не менее, вы можете настроить шаблон для уникального дизайна.
Теперь вы можете интегрировать шаблон Bootstrap в свое приложение React. Начните строить с помощью шаблонов Bootstrap и наслаждайтесь красивым внешним интерфейсом.