Adding bootstrap to react.js project

Алан-э-Дейл       11.03.2024 г.

Blueprint documentation and support

While Blueprint provides detailed documentation, it lacks community and support options. The Blueprint GitHub repo appears to be the most active place for reporting issues and getting support from contributors. There are also a few hundred Blueprint questions on Stack Overflow.

Semantic UI React

GitHub Stars Weekly NPM Downloads Stack Overflow Questions Origin
12.3k 176k (May 2021) 2.6k Jack Lukic

Similar to Bootstrap-React, Semantic UI React is the React flavor of the Semantic web framework. Also, like Bootstrap-React, Semantic UI React is jQuery-free to make it fully React compatible. Because of its origins in aiding with responsive, HTML-friendly web design, Semantic for React is better suited for web development vs. application building.

Two Basic Bootstrap 4 Pages

The following example shows the code for a basic Bootstrap 4 page (with a responsive fixed width container):

Container Example

<!DOCTYPE html><html lang=»en»><head>  <title>Bootstrap
4 Example</title>  <meta charset=»utf-8″>  <meta name=»viewport» content=»width=device-width, initial-scale=1″> 
<link rel=»stylesheet»
href=»https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css»> 
<script
src=»https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js»></script> 
<script
src=»https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js»></script> 
<script
src=»https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js»></script>
</head><body><div class=»container»>  <h1>My First Bootstrap Page</h1>  <p>This is some text.</p> </div></body></html>

The following example shows the code for a basic Bootstrap 4 page (with a full width container):

Container Fluid Example

<!DOCTYPE html><html lang=»en»><head>  <title>Bootstrap
4 Example</title>  <meta charset=»utf-8″>  <meta name=»viewport» content=»width=device-width, initial-scale=1″> 
<link rel=»stylesheet»
href=»https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css»> 
<script
src=»https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js»></script> 
<script
src=»https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js»></script> 
<script
src=»https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js»></script></head><body><div class=»container-fluid«>  <h1>My First Bootstrap Page</h1>  <p>This is some text.</p> </div></body></html>

❮ Previous
Next ❯

Дополнительные приятные плюшки

1. Как было уже отмечено выше, добавлена новая точка останова (grid-breakpoint) по названием xxl. Применяется для широкоформатных экранов разрешением от 1440 пикс. и выше. Честно говоря, в 4-ой версии я сам его добавлял при необходимости. А тут он уже доступен из коробки.

2. В миксинах sass бреакпоинтов max-width произошли небольшие изменения. В версии v.4, чтобы указать стили, скажем для экрана 992px и ниже, нужно было использовать миксин с точкой md, то есть вот так — . Я честно сказать немного тут путался, в голове цифра 992, а алиас точки используем — . В версии v.5 все так, как и должно быть — .

4. Появилась плавная прокрутка страницы до якоря и реализовано это с помощью CSS. Только я не знаю насколько полезна эта штука. Ну можно сделать ссылку «Наверх» в подвале без JS. В общем я эту фичу отключил. Давил в свой файл переменных и все, плавная прокрутка теперь не работает.

5. Интеграция сетки Бутстрап с библиотекой Masonry. Вот это тоже меня порадовало. Мне нравится библиотека Masonry и сетка Бутстрап тоже. Как же их подружить думал я? И вот, получите, распишитесь… Подключается довольно легко. Ознакомиться можете на странице примера.

6. Заменены буквы в классах, означающие начало и конец (горизонтальное направление): l (left) и r (right), на более логичные имена s (start) и e (end) соответственно. В v.4, к примеру, чтобы указать нужно было указать класс —. Тоже самое, если нужно — . В Bootstrap 5 теперь будет так: и . Это касается всех классов, где применяются буквы для обозначения лево и право (начало, конец). Надеюсь понятно объяснил.

Как установить Bootstrap

Установить Bootstrap можно несколькими способами:

  • Подключить компилированные файлы c помощью BootstrapCDN.
  • Скачать скомпилированные файлы CSS и JS, подключить их к проекту через ссылки и верстать. Это отличный вариант для того, чтобы познакомиться с фреймворком.
  • Скачать исходные файлы. Эта сборка удобнее для верстки, потому что позволяет гибко кастомизировать компоненты. Однако она требует использования дополнительных инструментов: компилятора Sass и постпроцессоров. 
  • Установить исходники через npm, yarn, RubyGems, Composer, NuGet.

Мы не будем подробно рассматривать все способы — они описаны в документации Bootstrap. Вот версия на русском языке. Она обновляется немного позже официальной инструкции на английском, но порядок установки не меняется годами, так что вся информация актуальна.

Посмотрим способы подключения, которые позволяют быстро получить работающий фреймворк и приступить к изучению его особенностей.

Самый простой метод установки — подключение через BootstrapCDN. Вам не нужно скачивать файлы в проект. Просто создайте шаблон HTML и разместите внутри него ссылку на фреймворк.

Код может быть таким:

<!DOCTYPE html>

<html lang="ru">

<head>

     <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Эта ссылка загружает с CDN все необходимые файлы Bootstrap -->

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

</head>

<body>

    <h1>Привет, мир!</h1>

    <!-- Перед закрывающим тегом <body> подключаем jQuery, Popper и Bootstrap JS, чтобы работали интерактивные компоненты  -->     

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous" ></script>

</body>

</html>

Еще один простой способ установки — скачивание скомпилированных файлов. Внутри архива (его нужно распаковать) две папки: css и js. 

В папке css — файлы стилей. 

  • bootstrap.css — стили фреймворка. Файл bootstrap.min.css — минифицированная версия.
  • bootstrap-grid.css — сетка Bootstrap. Файл bootstrap-grid.min.css — минифицированная версия.
  • bootstrap-reboot.css — нормализатор Bootstrap, устанавливающий базовые стили, чтобы во всех браузерах верстка смотрелась одинаково. Файл bootstrap-reboot.min.css — минифицированная версия.

В папке js — файлы для работы JavaScript.

  • bootstrap.bundle.js — компилированные файлы JavaScript с Popper (плагином всплывающих подсказок). Файл bootstrap.bundle.min.js — минифицированая версия.
  • bootstrap.js — компилированные файлы JavaScript без Popper. Файл bootstrap.js — минифицированая версия.

В четвертой версии Bootstrap для работы с JavaScript требуется библиотека JQuery. Она подключается перед Bootstrap JS. 

Файл проекта index.html, к которому мы будем подключать Bootstrap, нужно разместить в той же директории, что и подключаемые файлы CSS и JavaScript.

Код шаблона может быть таким:

<!DOCTYPE html>

<html lang="ru">

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="css/bootstrap.css" >

</head>

<body>

    <h1>Привет, мир!</h1>

    <!-- Сначала подключаем библиотеку JQuery, затем — Bootstrap JS -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

    <script src="js/bootstrap.js"></script>    

</body>

</html>

Обратите внимание — я подключил не минифицированные файлы (с суффиксом min), а обычные. Так удобнее работать со стилями и скриптами

Однако на рабочем проекте нужно использовать минифицированные версии — они меньше весят и обеспечивают более быструю загрузку страницы. После редактирования стилей вам нужно самостоятельно минифицировать файл, заменив шаблонную версию.

using reactstrap

npm install –save reactstrap

reactstrapsupporst the bootstrap 4 version that means it is more latest than react-bootstrap

As bootstrap is most popular css framework , using it with react we can create the mobile first web applications very quickly.

We can import the components from reactstrap which are similar to other react component

import {
   Button,UncontrolledAlert,Card,CardImg,CardBody,
   CardTitle,CardSubtitle,CardText
} from'reactstrap';

Reactstrap has good support for modal windows and it’s the preferred library for react.

There are other libraries as well such as CoreUI-React, react-UI, React-Bootstrap-Table

Shyam Hande

Published on 04-Sep-2019 08:20:07

  • Related Questions & Answers
  • React.js routing
  • Empowering the Project Managers with Project Charter
  • Thinking in React.js
  • Accessibility in React.js
  • Styling in React.js
  • Fragment in React.js
  • Python Mini Project
  • Using JSX in React.js
  • Rendering elements in React.js
  • Understanding state in React.js
  • Handling events in React.js
  • Conditional rendering in React.js
  • Uncontrolled Component in React.js
  • Code splitting in React.js
  • Basics of React.js Routing

Previous Page
Print Page

Next Page  

Using Bootstrap NPM Package

Bootstrap can use in our application using its NPM package. So we do not need to download and paste the bootstrap.css file inside the public directory by ourselves in this method.

4.2 Import Bootstrap.css File

So after installation of the bootstrap package, we can import the bootstrap.css to our root file(index.js).

Now we can use any bootstrap class inside our app. Use the below code for reference.

From the above methods, We can choose any appropriate one. This may depend upon your project. The first, second, and fourth methods are depending on some NPM packages. the third method is the best way I think because it does not depend on any other packages and easy to do.

Chakra UI

GitHub Stars Weekly NPM Downloads Stack Overflow Questions Origin
18.4k 100k (May 2021) Segun Adebayo

Chakra UI is an up-and-coming component library. Chakra UI was created by Segun Adebayo and offers a set of “accessible, reusable, and composable” React components for building websites and apps.

Components — Chakra UI has a robust component library with over 50 components. Notable components include a Toast component for pop-up alerts and a Form Control component for building user-friendly forms. If you want to create your own components, Chakra UI provides a guide to creating components.

Theming — At the core of Chakra UI is a default theme to define color palette, type scale, font stacks, breakpoints, border-radius values for an application. Customized themes can then be layered on top of the default theme. Chakra UI also offers a framework to customize components using modifier styles that alter components based on specified properties or state.

Documentation and resources — Chakra offers ample documentation for installation, components, and understanding concepts unique to Chakra UI. There is also a Chakra Dischord community and YouTube channel for more immersive learning than documentation.

Первый способ интеграции 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;

Flux и Redux

Сначала реализуем страницу со «счетчиками», чтобы разговор о Flux и Redux оказался максимально приближенным к практике.

Создадим два новых компонента: Counter.jsx и StateCounter.jsx.

Counter будет отображать переданное ему значение и кнопку «плюс», отвечающую за изменение этого значения.

StateCounter — компонент-родитель компонента Counter. Он будет хранить текущее значение Counter в собственном хранилище state и содержать бизнес-логику обновления этого значения при клике по кнопке «плюс».

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

  • поддерживать и сопровождать,
  • тестировать,
  • повторно использовать.

В частности в нашем проекте сразу несколько компонентов будут использовать Counter.

src/components/CounterPage/CounterPage.jsx

Самое время протестировать обновленный код. В браузере перейдем на вкладку «Счетчики» и нажмем на кнопку «+». Значение изменилось с 0 на 1. Отлично! Теперь перейдем на любую другую вкладку, а потом вернемся обратно. Значение счетчика снова стало «0». Это в высшей степени ожидаемо, но не всегда соответствует тому, что мы хотели бы видеть.

Настало время обсудить концепцию «Flux».

Примечание: Flux — это именно концепция, а не библиотека. На сегодняшний день существует множество различных библиотек, которые ее реализуют.

jQuery и JavaScript

За последние полтора десятилетия jQuery предоставил беспрецедентный доступ к сложному поведению JavaScript миллионам (миллиардам?) людей. Лично я всегда благодарен за предоставленные мне полномочия и поддержку, чтобы они продолжали писать front-end код, изучать новые вещи и использовать плагины сообщества. Возможно, он навсегда изменил сам JavaScript, и это само по себе является памятником успеха jQuery. Спасибо каждому вкладчику и сопровождающему jQuery, который сделал это возможным для таких людей, как я.

Благодаря прогрессу, достигнутому в инструментах front-end разработки и поддержке браузеров, мы теперь можем отбросить jQuery как зависимость (дословный перевод слов @Johann-S), наша основная поддержка JavaScript, в настоящее время помогла перенести эту миграцию. Это отмечает одно из самых больших изменений в структуре за последние годы и означает, что проекты, созданные на Bootstrap 5, будут значительно легче по размеру файла и загрузке страницы в будущем.

В дополнение к удалению jQuery мы внесли несколько других изменений и улучшений в наш JavaScript в v5, которые направлены на качество кода и преодоление разрыва между v4 и v5. Одним из наших более крупных изменений было удаление большей части нашего плагина Button для подхода только к HTML и CSS для переключения состояний. Теперь кнопки переключения питаются от флажков и переключателей и стали намного надежнее.

Вы можете увидеть полный список изменений, связанных с JS, в первом альфа-проекте v5 на GitHub.

Заинтересованы в помощи JavaScript Bootstrap? Мы всегда ищем новых участников для команды, чтобы помочь в написании новых плагинов, проверке запросов на удаление и исправлении ошибок. Дайте нам знать!

Material-UI documentation and support

Material-UI is well documented and supported. Documentation covers everything from installation to components to styling and guides for implementing utilities like server-side rendering and localization.

For support, there’s plenty of free options like the Material-UI community, Stack Overflow, and GitHub. Material points technical questions to Stack Overflow, where more than 12.5k questions have been posted. GitHub is used exclusively as a bugs and feature requests tracker. On the paid side, Material-UI suggests purchasing a Tidelift subscription which offers “flexibility of open-source and the confidence of commercial-grade software.” At the rate of $200/hr or $1500 per day, “” can be requested for help modifying Material-UI to meet specific requirements.

An Overview of Third-party Libraries for React and Bootstrap

There are a few libraries that try to create a React-specific implementation of Bootstrap so that we can use JSX components while working with Bootstrap styles. I’ve compiled a list of a few popular Bootstrap modules that we can use with our React projects.

React-Bootstrap is by far one of the most popular libraries for adding Bootstrap components into React. However, at the time of writing this tutorial, it targets Bootstrap v3 and not the latest version of Bootstrap. It’s in active development and the API might break when a newer version is released.

reactstrap is another library that gives us the ability to use Bootstrap components in React. Unlike React-Bootstrap, reactstrap is built for the latest version of Bootstrap. The module includes components for typography, icons, forms, buttons, tables, layout grids, and navigation. It’s also in active development and it’s a nice alternative for building React-powered Bootstrap apps.

There are a few other libraries like React-UI, and domain-specific modules like React-bootstrap-table and CoreUI-React Admin Panel on GitHub, which provide extended support for creating awesome UIs using React.

The rest of this tutorial will focus on reactstrap, because it’s the only popular module that uses the latest version of Bootstrap.

Retool components

Out of the box, Retool comes with 50+ components to build internal applications. We also offer custom components if you need to load other interfaces into your applications dynamically.

Retool components are grouped in the following categories:

Commonly used — as the name implies, these are core components like buttons, tables, text, dropdowns, etc.

Inputs — components that allow for user input and interactions. These include components like a checkbox, date range picker, rich text editor, slider, etc.

Data — these are components that aggregate data like a calendar, JSON explorer, and query builder.

Charts — build interactive charts in your Retool apps while also providing the full flexibility and customizability of the Plotly.js charting library for more advanced use cases.

Display — visual components that provide users with context such as a progress bar, alerts, timers, and video viewers.

Step 2 — Add Navigation Links

We are going to have two sections:

  • The “main” section that will hold our content.
  • The “header” section that will hold our navbar.

Go ahead and replace the contents of src/App.js with this code:

As you can see, it doesn’t do much yet. It just divides our page to two sections. If you point your browser to localhost:3000, you should see the words “header!” and “main!” one on top of the other.

Let’s continue by adding our pages. Since this is only an example, they won’t be too impressive.
Create a new file for our pages:
src/pages.js

Change Our App in index.js to be a BrowserRouter:src/index.js

Change the Main component in App.js to a Switch:src/App.js

Change our Header component to show links:
src/App.js

If you want to read more about React routers, there’s a nice tutorial about it here.

Alright! So we now have a functional, ugly website with routing.

Examples of apps and websites built on Ant Design

React-Bootstrap

GitHub Stars Weekly NPM Downloads Stack Overflow Questions Origin
19.4k 838k (May 2021) 2.9k

Initially named Twitter Blueprint, the Bootstrap framework was built by Mark Otto and Jacob Thornton at Twitter. Bootstrap predates React by a couple of years (Bootstrap’s initial release was August 19, 2011, and React’s was on May 29, 2013). Bootstrap started as an open-source CSS framework centered around helping developers build responsive, mobile-first front-end websites and applications.

React-Bootstrap is a bit different but very similar to the original Bootstrap framework. React-Bootstrap replaces the Bootstrap JavaScript, and each component has been built from scratch as a proper React component, without unneeded dependencies like jQuery.

Основные понятия Redux

Как я уже писал выше, основные понятия редакса — actions, dispatcher, store.

Store — это состояние веб-компонента, которое хранит в себе всю информацию (или ту которую вы решили сохранить в него). В дальнейшем стор будет доступен из любого компонента вашего приложения.

Action — действие, описывает что нужно сделать. Согласно принципам функционального программирования, мы не можем изменять объект напрямую, поэтому нам нужны экшены, чтобы передать их в диспатчер и «сказать», что нужно сделать.

Dispatcher — сообщает хранилищу о каком-то действии (action) и передает ему обновленную информацию.

Теперь когда мы разобрали основные понятия, давайте посмотрим как работает Redux:

Схема работы Redux

Компонент генерирует действие (action), диспатчер сообщает об этом хранилищу (store), хранилище изменяет состояние и данные передаются в компонент (View).

Есть еще одно понятие в Redux это reducer (редюсер). Редюсер — это чистая функция, которая принимает как аргумент хранилище и экшен. Основные правила редюсеров:

  • В этих функциях не должно быть «side effects» (побочных эффектов). Например, нельзя делать API запрос для получения каких-либо данных
  • Они не должны мутировать (изменять) принятые аргументы или состояние.
  • Нельзя вызывать нечистые функции внутри редюсеров (например, Date.now() или Math.random())

Более подробно про чистые функции можно прочитать тут.

Документация

Мы перевели наш генератор статической информации с сайта Jekyll на Hugo. Jekyll долгое время был нашим генератором выбора, учитывая то, как легко его запустить и запустить, а также простоту развертывания на страницах GitHub.

К сожалению, с Джекиллом мы столкнулись с двумя основными проблемами:

  1. Jekyll требует, чтобы Ruby был установлен
  2. Создание сайта было очень медленным

С другой стороны, Hugo написан на Go, поэтому он не имеет внешних зависимостей времени выполнения и работает намного быстрее. Мы создаем наш текущий основной ветвь сайта, в том числе документ Sass -> CSS в ~ 1.6s. Наш локальный сервер перезагружается за миллисекунды вместо 8-12 секунд, поэтому работа с документами снова стала приятным опытом.

Переключатель Hugo был бы невозможен без основной работы Хьюго, Бьорна Эрика Педерсена (@bep), который внес немало изменений в кодовую базу, чтобы сделать переход возможным и плавным!

Также поблагодарите @xhmikosr, который возглавил здесь преобразование сотен файлов и работу с разработчиками Hugo, чтобы убедиться, что наша локальная разработка была быстрой, эффективной и поддерживаемой.

5.4.3 Используем flexbox

Эта полезная возможность CSS обеспечит нам большую скорость
разработки стилей. Многие, не исключая меня, любят её за простоту
и потрясающие возможности по компоновке элементов разметки.

Вы, возможно, уже использовали flex-ы и можете заявить, а как же кроссбраузерность?
Не “поедет” ли разметка в некоторых браузерах? В этом разделе документации проекта
create-react-app написано, что проект умеет делать пост обработку CSS и
самостоятельно добавлять вендорские префиксы с помощью Autoprefixer. Нужно лишь
указать целевые браузеры в в файле . Отличный
русскоязычный источник по flexbox вы можете найти здесь.

Гость форума
От: admin

Эта тема закрыта для публикации ответов.