Как добавить тему на свою веб-страницу с помощью Bootswatch в проекте ReactJS?

Опубликовано: 7 Августа, 2021

Мы можем добавить мгновенную тему в проект ReactJS с помощью Bootwatch.

Bootswatch: Это - это проект с открытым исходным кодом, который предоставляет ряд бесплатных тем для начальной загрузки, которые может использовать веб-разработчик. Это помогает разработчику получить правильный пользовательский интерфейс, не тратя часы и силы на стилизацию различных элементов.

Предпосылка:

ReactJS Введение и работа
ReactJS Настройка среды разработки

Для начала перейдите по данной ссылке. Прокрутите немного вниз, появятся темы. Некоторые из наиболее часто используемых тем - космос, мрачный.

Ссылка на сайт:

https://bootswatch.com/

Структура проекта:

Установка Bootswatch в проект ReactJS:

Нажмите кнопку предварительного просмотра , чтобы получить более широкое представление о различных компонентах, таких как формы, раскрывающийся список и другие, чтобы увидеть, как эти компоненты будут выглядеть, если мы будем использовать эту конкретную тему.
После выбора темы нажмите кнопку загрузки , чтобы загрузить файл bootstrap.min.css.
Внутри вашей папки response.js откройте терминал , напишите команду, это установит response-bootstrap в ваше приложение.
```
 npm установить загрузочную загрузку с реакцией-начальной загрузкой
```
В качестве примера выбираем Киборга или https://bootswatch.com/cyborg/ - это выбранная тема. Теперь добавьте загруженный файл bootstrap.min.css, в папке Src.

Импортируйте файл bootstrap.min.css в index.js.
Имя файла index.js: здесь мы просто импортируем bootstrap.min.css. Теперь тема применима ко всему приложению.

Javascript

 import React from 'react' ;
 import ReactDOM from 'react-dom' ;
 import './index.css' ;
 import App from './App' ;
 import reportWebVitals from './reportWebVitals' ;
 
// Import downloaded theme
 import './bootstrap.min.css' ;
 
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById( 'root' )
 );
 reportWebVitals();

В папке src создайте еще одну папку Components и внутри нее создайте файл и назовите его Home.js, это будет наш функциональный компонент .

Создайте функциональный компонент в файле, как показано ниже. Теперь добавьте любой компонент начальной загрузки в свое приложение response.js, и он будет оформлен в соответствии с темой.

Имя файла - Home.js:

Javascript

 import React from 'react' ;
 import {Image , Row} from 'react-bootstrap' ;
 
const Home = () => {
 
    return (
        <div>
            <h1>Welcome to GeeksforGeeks</h1>
            <h2>Let's Learn</h2>
 
            { /* aligning the image at the center */ }
            <Row className= "justify-content-md-center" >
               <Image src=
 " https://www.geeksforgeeks.org/wp-content/uploads/gfg_200X200-1.png "
                      roundedCircle fluid />
            </Row>
        </div>
    )
 }
 
export default Home 

Теперь нам просто нужно импортировать компонент Home.js в наш корневой компонент App.js.
Имя файла - App.js: удалите ненужные вещи из этого файла и добавьте приведенный ниже код.
Javascript
import './App.css' ;
// Importing Home component
import Home from './component/Home' ;

function App() {
return (
<div className= "App" >
<Home />
</div>
);
}

export App; default

Запустите сервер: выполните следующую команду, чтобы запустить сервер.

 npm start

Результат: примененная тема - Киборг (темная тема), и вот результат.

Technical Scripter JavaScript CSS Bootstrap

Как добавить тему на свою веб-страницу с помощью Bootswatch в проекте ReactJS?

Javascript

Javascript

Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ