Два способа интеграции Bootstrap в React-приложение

2023-06-29 0 ∞ 1

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

Второй метод заключается в установке готового пакета React-Bootstrap. Данная сборка позволяет использовать JavaScript компоненты фреймворка Bootstrap (кнопки, формы, элементы навигации) в React- приложениях. Мы рассмотрим оба способа, чтобы вы могли выбрать наиболее подходящий.

Пример использования элементов Bootstrap в оформлении React- приложения:

Первый способ интеграции Bootstrap и React

Прежде всего, установим фреймворк Bootstrap, используя следующую команду для менеджера пакетов npm:

npm install --save bootstrap

После успешной установки необходимо импортировать CSS элементы Bootstrap в файл src/index.js, с помощью команды, приведенной ниже:

import 'bootstrap/dist/css/bootstrap.css';

Код в файле src/index.js должен выглядеть следующим образом:

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import App from './App';

import * as serviceWorker from './serviceWorker';

import 'bootstrap/dist/css/bootstrap.css';

   

ReactDOM.render(

  <React.StrictMode>

    <App />

  </React.StrictMode>,

  document.getElementById('root')

);

serviceWorker.unregister();

Теперь вы можете использовать классы Bootstrap, как это сделал я в файле src/App.js (результат – на скриншоте, продемонстрированном в начале статьи):

import React from 'react';

import logo from './logo.svg';

import './App.css';

    

function App() {

  return (

    <div class="container">

        <h1>How to Install Bootstrap in React App - ItSolutionStuff.com</h1>

   

        <button class="btn btn-success">Success Button!</button>

        <button class="btn btn-primary">Primary Button!</button>

        <button class="btn btn-danger">Danger Button!</button>

   

        <div class="alert alert-success">

          <p>This is success alert.</p>

        </div> 

        <div class="alert alert-primary">

          <p>This is primary alert.</p>

        </div> 

        <div class="alert alert-danger">

          <p>This is danger alert.</p>

        </div>

    </div>

  );

}

  

export default App;

Второй способ подключения Bootstrap к React-приложениям

В этом методе мы установим сборку React-Bootstrap с помощью следующей npm команды:

npm install react-bootstrap bootstrap

После завершения установки импортируем CSS элементы Bootstrap в файл src/index.js:

import 'bootstrap/dist/css/bootstrap.css';

Код файла src/index.js выглядит следующим образом:

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import App from './App';

import * as serviceWorker from './serviceWorker';

import 'bootstrap/dist/css/bootstrap.css';

   

ReactDOM.render(

  <React.StrictMode>

    <App />

  </React.StrictMode>,

  document.getElementById('root')

);

serviceWorker.unregister();

Все готово, можно использовать классы Bootstrap, как это сделано в моем примере файла src/App.js на скриншоте, приведенном в начале статьи:

import React from 'react';

import logo from './logo.svg';

import './App.css';

import { Button, Alert } from 'react-bootstrap';

  

function App() {

  return (

    <div className="container">

  

        <Button variant="success">Success</Button>

        <Button variant="primary">Primary</Button>

        <Button variant="danger">Danger</Button>

   

        <Alert key="1" variant="success">

           This is a success alert—check it out!

        </Alert>

    </div>

  );

}

  

export default App;

Вадим Дворниковавтор-переводчик статьи «How to Install Bootstrap in React App?»