Русский

Учебник ReactJS

Хуки

Расширенные функции ReactJS

Дополнительные концепции

ReactJS и Bootstrap: Начальный гид по интеграции Bootstrap

Здравствуйте, будущие разработчики React! Я рад быть вашим проводником в увлекательное путешествие в мир ReactJS и Bootstrap. Как某人, кто преподавал informatikу на протяжении многих лет, я могу заверить вас, что к концу этого руководства у вас будет прочное понимание того, как сделать ваши приложения React стильными и профессиональными с помощью Bootstrap. Итак, lets дайв в это!

ReactJS - Bootstrap

Что такое Bootstrap?

Прежде чем мы начнем интегрировать Bootstrap с React, давайте на минутку поймем, что такое Bootstrap. Представьте, что вы строите дом. Вы могли бы создать каждый кирпич, гвоздь и piece of furniture с нуля, или вы могли бы использовать готовые компоненты, чтобы ускорить процесс. Bootstrap как раз такие готовые компоненты, но для веб-разработки.

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

Why Использовать Bootstrap с React?

Вы можете задаться вопросом: "Why мне использовать Bootstrap с React?" Ну, позвольте мне рассказать вам一个小кую историю. Годы назад у меня был студент, который был гением в React, но мучался с дизайном. Его приложения работали безупречно, но выглядели так, словно застряли в 90-х. Затем он открыл Bootstrap, и вдруг его проекты перешли от "ну так себе" к "вау!" в кратчайшие сроки.

React великолепен для создания динамических интерфейсов пользователей, но он не поставляется с встроенными стилями. Сочетая React с Bootstrap, вы получаете лучшее из обоих миров: мощную компонентную архитектуру React и красивые адаптивные элементы дизайна Bootstrap.

Интеграция Bootstrap с React

Теперь, давайте запачкать руки и начнем интегрировать Bootstrap с React. Есть два основных способа сделать это:

  1. Используя Bootstrap CSS
  2. Используя React-Bootstrap

Мы рассмотрим оба метода, но сначала давайте настроим новый проект React.

Настройка нового проекта React

Если вы еще не установили Node.js на свой компьютер, вам нужно это сделать. Как только это будет сделано, откройте ваш терминал и выполните следующие команды:

npx create-react-app my-bootstrap-app
cd my-bootstrap-app
npm start

Это создаст новый проект React и запустит сервер разработки. Вы должны увидеть стандартное приложение React, работающее в вашем браузере.

Метод 1: Использование Bootstrap CSS

Самый простой способ добавить Bootstrap в ваш проект React - это включить CSS-файл. Вот как это сделать:

  1. Установите Bootstrap:
npm install bootstrap
  1. Импортируйте CSS Bootstrap в ваш файл src/index.js:
import 'bootstrap/dist/css/bootstrap.min.css';

Теперь вы можете использовать классы Bootstrap в ваших компонентах React. Давайте создадим простую навигационную панель, чтобы увидеть это в действии:

import React from 'react';

function App() {
return (
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<a className="navbar-brand" href="#">My Bootstrap App</a>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNav">
<ul className="navbar-nav">
<li className="nav-item active">
<a className="nav-link" href="#">Home</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">About</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
);
}

export default App;

Этот код создает адаптивную навигационную панель с использованием классов Bootstrap. Класс navbar определяет основной контейнер, в то время как другие классы, такие как navbar-expand-lg и navbar-light, контролируют его поведение и appearance.

Метод 2: Использование React-Bootstrap

Хотя использование CSS Bootstrap напрямую работает хорошо, React-Bootstrap делает шаг вперед, предоставляя компоненты React, интегрирующие функциональность Bootstrap. Этот подход более "React-like" и может привести к более чистому и легко поддерживаемому коду.

Давайте настроим это:

  1. Установите React-Bootstrap и Bootstrap:
npm install react-bootstrap bootstrap
  1. Импортируйте CSS Bootstrap в ваш src/index.js файл (также как и раньше):
import 'bootstrap/dist/css/bootstrap.min.css';

Теперь давайте перепишем нашу навигационную панель, используя компоненты React-Bootstrap:

import React from 'react';
import { Navbar, Nav } from 'react-bootstrap';

function App() {
return (
<Navbar bg="light" expand="lg">
<Navbar.Brand href="#home">My Bootstrap App</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#about">About</Nav.Link>
<Nav.Link href="#contact">Contact</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
);
}

export default App;

Этот код достигает того же результата, что и наш предыдущий пример, но использует компоненты React-Bootstrap, такие как Navbar и Nav, вместо сырых HTML-элементов с классами Bootstrap. Этот подход более естественен в React и может сделать ваш код легче для поддержки.

Компоненты Bootstrap в React

Теперь, когда мы настроили Bootstrap в нашем приложении React, давайте рассмотрим некоторые популярные компоненты Bootstrap и их использование в React. Мы создадим простой макет страницы, используя различные компоненты Bootstrap.

import React from 'react';
import { Container, Row, Col, Card, Button } from 'react-bootstrap';

function App() {
return (
<Container>
<Row className="mt-5">
<Col md={4}>
<Card>
<Card.Img variant="top" src="https://via.placeholder.com/150" />
<Card.Body>
<Card.Title>Card 1</Card.Title>
<Card.Text>
This is a sample card with some content.
</Card.Text>
<Button variant="primary">Learn More</Button>
</Card.Body>
</Card>
</Col>
<Col md={4}>
<Card>
<Card.Img variant="top" src="https://via.placeholder.com/150" />
<Card.Body>
<Card.Title>Card 2</Card.Title>
<Card.Text>
Another card with different content.
</Card.Text>
<Button variant="secondary">Explore</Button>
</Card.Body>
</Card>
</Col>
<Col md={4}>
<Card>
<Card.Img variant="top" src="https://via.placeholder.com/150" />
<Card.Body>
<Card.Title>Card 3</Card.Title>
<Card.Text>
Yet another card to showcase Bootstrap.
</Card.Text>
<Button variant="success">Discover</Button>
</Card.Body>
</Card>
</Col>
</Row>
</Container>
);
}

export default App;

В этом примере мы используем несколько компонентов Bootstrap:

  • Container: Создает центрированный контейнер для нашего контента.
  • Row и Col: Реализуют网格овую систему Bootstrap для адаптивных макетов.
  • Card: Отображает контент в гибком контейнере.
  • Button: Создает стилизованные кнопки с различными appearance.

Проп md={4} в компонентах Col говорит Bootstrap сделать каждую колонку занимающей 4 из 12 единиц grid на средних и более крупных экранах. Это приводит к трем равновеликим колонкам.

Настройка Bootstrap в React

Одна из великолепных особенностей Bootstrap - это его гибкость. Вы можете легко настроить его под уникальный стиль вашего проекта. Вот несколько способов сделать это:

1. Переопределение переменных Bootstrap

Создайте файл custom.scss в вашей директории src:

// Custom.scss

// Переопределение стандартных переменных
$primary: #007bff;
$secondary: #6c757d;
$success: #28a745;

// Импорт Bootstrap и его стандартных переменных
@import '~bootstrap/scss/bootstrap.scss';

Затем импортируйте этот файл в ваш index.js вместо стандартного CSS Bootstrap:

import './custom.scss';

2. Добавление пользовательских классов

Вы также можете добавить свои классы alongside с классами Bootstrap:

<Button className="my-custom-button" variant="primary">Custom Button</Button>

Затем в вашем CSS (или SCSS) файле:

.my-custom-button {
border-radius: 25px;
text-transform: uppercase;
}

Заключение

Поздравляю! Вы только что сделали свои первые шаги в мир интеграции Bootstrap с React. Мы рассмотрели основы настройки Bootstrap в проекте React, использование компонентов Bootstrap и даже настройку Bootstrap под ваши нужды.

помните, что практика делает мастера. Попробуйте создать небольшой проект, используя то, что вы здесь learned. Может быть,的个人ный Portfolio page или простой блог. Чем больше вы используете эти инструменты, тем комфортнее вы станете с ними.

Заканчивая, я вспоминаю еще одну студентку, которая initially боялась фронтенд-дизайна. После того, как она научилась использовать Bootstrap с React, она создала одни из самых красивых и функциональных веб-приложений, которые я когда-либо видел. Кто знает? Может быть, вы станете моей следующей success story!

Продолжайте программировать, stay curious, и, что самое главное, получайте удовольствие от процесса. До следующего раза, счастливого кодирования с Bootstrap!

Credits: Image by storyset

Предыдущий учебник:
ReactJS - Анимация
Следующий учебник:
ReactJS - Карта