React е сред най-популярните JavaScript рамки и библиотеки за изграждане на едностранични приложения и потребителски интерфейси. Неговата гъвкавост при изграждането на потребителски интерфейси с помощта на компонентите за многократна употреба, скоростта на разработка и подкрепящата общност са причините за неговата популярност.
React обаче трябва да се комбинира с Cascading Style Sheets (CSS), за да направи приложенията си по-визуално привлекателни и представителни. Писането на CSS от нулата може да отнеме много време.
Разработчиците може да прекарат много време в работа върху стила вместо върху ключовите функции на приложението React. Добрата новина е, че инструменти и рамки като Bootstrap улесняват добавянето на CSS към вашето приложение React.
Съдържание
Какво е Bootstrap?
Bootstrap е CSS рамка с отворен код за front-end разработка. Bootstrap позволява на разработчиците да създават отзивчиви и ориентирани към мобилните устройства уебсайтове чрез своя изчерпателен набор от инструменти и шаблони за дизайн, базирани на JavaScript и CSS.
Bootstrap е създаден от Twitter и също се поддържа от екип инженери от същата компания. Неговият изходен код се поддържа в GitHub и членовете на общността могат да допринасят и да изпращат доклади за грешки и предложения. Bootstrap 5.3.0-alpha1 е най-новата версия към момента на писане.
Защо да използвате Bootstrap с React?
- Спестява време: Bootstrap се грижи за форматирането, като ви дава повече време да се съсредоточите върху функционалността. По този начин не е нужно да се притеснявате за проблеми като външния вид на вашите формуляри или бутони, а за области като например дали бутонът за изпращане изпраща данни към вашия бекенд или API.
- Лесна употреба: След като добавите Bootstrap към вашето приложение React, просто вземете предварително проектираните компоненти на потребителския интерфейс и ги добавете към вашето приложение.
- Последователен дизайн: Повечето приложения нарастват по размер с времето. Осигуряването на последователен дизайн на вашия уебсайт е важно, ако искате да привлечете лоялни потребители. Bootstrap има последователен стил, който ще придаде на вашите страници еднакъв вид.
- Тонове шаблони, от които да избирате: Bootstrap разполага със стотици шаблони, вариращи от навигационни ленти, бутони, формуляри и въртележки до падащи менюта, за да споменем няколко, от които да избирате.
- Лесно персонализиране: Въпреки че Bootstrap има шаблони за дизайн, винаги можете да персонализирате размера на шрифта, цвета и други функции, за да отговарят на вашите нужди.
- Поддръжка от общността: Bootstrap разполага с обширна документация, за да започнете. Все пак можете да разчитате на голямата общност, като винаги добавяте нови функции и поддържате тази CSS рамка.
- Отзивчив дизайн: След като добавите Bootstrap към вашето приложение React, вие сте сигурни, че вашето уеб приложение ще реагира на всички размери на екрана.
Как да инсталирате Bootstrap в React
Приложението React не идва с Bootstrap, инсталиран по подразбиране. Но преди да проучим как да добавим/инсталираме Bootstrap в React, трябва да проверим няколко неща;
Предпоставки
Използвайте тази команда, за да проверите дали node.js е инсталиран на вашия компютър:
node -v
Ако node.js е инсталиран, ще имате изход, подобен на този на вашия терминал.
Версия на възела
Ако не е инсталиран, можете да проверите инструкциите за изтегляне от https://nodejs.org/en/.
Използвайте тази команда, за да проверите дали React е инсталиран на вашия компютър:
npm list react
Ако React е инсталиран глобално на вашата машина, ще имате нещо подобно на вашия терминал.
React версия
- Инсталирайте react-create-app на вашата машина. С помощта на тази команда
npm install -g create-react-app
- Създайте своето приложение React с помощта на тази команда
npx create-react-app my-app
Можете да замените my-app с всяко име по ваш избор. За нашия случай нарекохме нашето приложение react-b.
Веднъж инсталиран, ще имате нещо подобно на вашия терминал:
Изпълнете тези команди, за да започнете
- cd react-b (използвайте името на вашето приложение, избрано в предишната стъпка)
- npm start (тази команда стартира вашето приложение React)
Сега можем да преминем към следващите стъпки и да добавим/инсталираме Bootstrap към нашето приложение React:
Метод за стартиране на инсталиране на NPM
Node.js идва с npm (мениджър на пакети на възли), инсталиран по подразбиране.
Можете да проверите версията на вашия npm чрез тази команда:
npm -v
Ако npm е инсталиран, ще получите изход като 9.2.0
Вече можете да инсталирате bootstrap, като използвате тази команда:
npm install bootstrap
След като сте готови, отидете на файла ./src/index.js. Добавете този ред в горната част.
импортиране на ‘bootstrap/dist/css/bootstrap.css’;
Използване на Yarn Package Manager
За разлика от npm, yarn не се инсталира по подразбиране, когато инсталирате node.js.
Инсталирайте yard с помощта на тази команда;
npm install -g yarn
Тази команда ще инсталира yarn глобално, така че вече не е необходимо да инсталирате пакета всеки път, когато създавате React приложение.
Изпълнете тази команда, за да добавите bootstrap към React:
yarn add bootstrap
След като сте готови, отидете на файла ./src/index.js. Добавете този ред в горната част.
импортиране на ‘bootstrap/dist/css/bootstrap.css’;
Винаги трябва да импортирате Bootstrap в горната част на входния файл на вашето приложение преди други CSS файлове. Това улеснява промяната на вашите записи в Bootstrap, ако трябва да промените стойностите по подразбиране на шаблоните, докато създавате вашето приложение React.
CDN метод
Използвайки връзка за мрежа за доставка на съдържание (CDN), можете да добавите Bootstrap към React. Добавяйки тази CDN връзка, вие включвате библиотеката Bootstrap към вашето приложение React, без да изтегляте и хоствате файловете в папката на вашия проект. Следвай тези стъпки.
- В главната папка навигирайте до файла .public/index.html
- В тага добавете този таг
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
- Трябва да добавите зависимости на JavaScript към приложението си. Отидете до тялото на вашия файл index.html и добавете този таг точно преди затварящия таг :
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
Bootstrap най-накрая е инсталиран на вашето приложение React.
Използване на React Bootstrap пакет
Подходите, които разгледахме досега, първоначално бяха предназначени за HTML файлове. За да разберете това по-добре, разгледайте този падащ код от Bootstrap:
<div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown button </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul> </div>
Какво не е наред с кода? Bootstrap по подразбиране използва клас, за да класифицира своите раздели (DIV). React обаче използва JSX, който използва синтаксис camelCase. Следователно трябва да замените класа с className ръчно.
За да накараме този код да работи на React, трябва да заменим всеки „клас“ с „className“. Крайният код ще бъде:
<div className="dropdown"> <button className="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown button </button> <ul className="dropdown-menu"> <li><a className="dropdown-item" href="#">Action</a></li> <li><a className="dropdown-item" href="#">Another action</a></li> <li><a className="dropdown-item" href="#">Something else here</a></li> </ul> </div>
За щастие имаме още два подхода, react-bootstrap и reactstrap, където не е необходима ръчна намеса.
React-bootstrap
React-bootstrap има истински React компоненти, изградени от нулата. Библиотеката е съвместима с ядрото Bootstrap.
Следвайте тези стъпки, за да започнете с React-bootstrap:
- Инсталирайте React-bootstrap с тази команда:
npm install react-bootstrap bootstrap
- Отидете до файла src/index.js или App.js и добавете този ред преди другите CSS файлове
импортиране на ‘bootstrap/dist/css/bootstrap.min.css’;
React-bootstrap ви позволява да импортирате конкретен компонент вместо цялата библиотека. Например, ако трябва да импортирате бутон на един от вашите компоненти, можете да го импортирате по следния начин;
import { Button } from ‘react-bootstrap’;
Reactstrap
Това е библиотека с компоненти на React за Bootstrap. Reactstrap разчита на CSS рамката на Bootstrap за своите стилове и тема. Тази библиотека импортира правилните Bootstrap класове към вашето приложение React, което ви позволява да имате последователен стил на приложението. Също така не е необходимо да добавяте JavaScript файловете на Bootstrap, за да задействате функционалност.
Следвайте тези стъпки, за да добавите Reactstrap към вашето приложение React:
- Инсталирайте Reactstrap чрез тази команда:
npm install reactstrap react react-dom
- Импортирайте Bootstrap с помощта на тези команди:
npm install --save bootstrap
импортиране на ‘bootstrap/dist/css/bootstrap.min.css’; (добавете този ред към вашия app.js)
Можете също да използвате опцията за CDN връзка, за да включите Bootstrap в приложението си. След първата стъпка отидете в основната директория и навигирайте до файла .public/index.html и добавете този ред към тага
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
Reactstrap ви позволява да импортирате конкретен компонент вместо цялата библиотека. Например, ако трябва да импортирате бутон на един от вашите компоненти, можете да импортирате като;
import { Button } from ‘reactstrap’;
Заключение
По-горе са някои подходи, които можете да използвате, за да инсталирате Bootstrap към вашето приложение React, за да стилизирате вашите уеб приложения. Изборът на подход за монтаж е въпрос на предпочитание, тъй като крайната цел е една и съща.
Комбинирането на React с Bootstrap ви спестява от болката да следите всички CSS стилове, докато приложението ви расте. Оформянето на вашето приложение става лесно и ефективно, когато имате повече време да се съсредоточите върху функционалността.
Може да разгледате някои причини да изберете React Native за разработка на мобилни приложения.