Реацт је међу најпопуларнијим ЈаваСцрипт оквирима и библиотекама за прављење апликација на једној страници и корисничких интерфејса. Његова флексибилност у изградњи корисничких интерфејса коришћењем његових компоненти за вишекратну употребу, брзина развоја и подршка заједнице су разлози за његову популарност.
Међутим, Реацт мора да се комбинује са Цасцадинг Стиле Схеетс (ЦСС) како би његове апликације биле визуелно привлачније и презентабилније. Писање ЦСС-а од нуле може бити дуготрајно.
Програмери могу провести доста времена радећи на стилизовању уместо на кључним функцијама Реацт апликације. Добра вест је да алати и оквири као што је Боотстрап олакшавају додавање ЦСС-а вашој Реацт апликацији.
Преглед садржаја
Шта је Боотстрап?
Боотстрап је ЦСС оквир отвореног кода за фронт-енд развој. Боотстрап омогућава програмерима да креирају веб-сајтове који реагују и користе мобилне уређаје путем свог свеобухватног скупа алата и шаблона за дизајн заснованих на ЈаваСцрипт-у и ЦСС-у.
Боотстрап је креирао Твитер, а такође га одржава тим инжењера из исте компаније. Његов изворни код се одржава на ГитХуб-у, а чланови заједнице могу да доприносе и шаљу извештаје о грешкама и предлоге. Боотстрап 5.3.0-алпха1 је најновија верзија у време писања.
Зашто користити Боотстрап са Реацт-ом?
- Штеди време: Боотстрап брине о форматирању, дајући вам више времена да се фокусирате на функционалност. Стога не морате да бринете о питањима као што су изглед ваших образаца или дугмади, већ о областима као што је да ли дугме за слање шаље податке вашем позадину или АПИ-ју.
- Једноставност употребе: Када додате Боотстрап у своју Реацт апликацију, само узмите унапред дизајниране компоненте корисничког интерфејса и додајте их својој апликацији.
- Доследан дизајн: Већина апликација временом расте. Осигуравање доследног дизајна ваше веб странице је важно ако желите да привучете лојалне кориснике. Боотстрап има доследан стил који ће вашим страницама дати уједначен изглед.
- Тоне шаблона које можете изабрати: Боотстрап има стотине шаблона у распону од навигационих трака, дугмади, образаца и вртешки до падајућих менија, да поменемо неколико, које можете изабрати.
- Лакоћа прилагођавања: Иако Боотстрап има шаблоне за дизајн, увек можете да прилагодите величину фонта, боју и друге функције како би одговарале вашим потребама.
- Подршка заједнице: Боотстрап има обимну документацију за почетак. Међутим, и даље можете рачунати на велику заједницу, увек додајући нове функције и одржавајући овај ЦСС оквир.
- Респонзивни дизајн: Када додате Боотстрап у своју Реацт апликацију, сигурни сте да ће ваша веб апликација реаговати на свим величинама екрана.
Како инсталирати Боотстрап у Реацт-у
Реацт апликација не долази са Боотстрап инсталираним подразумевано. Али пре него што истражимо како додати/инсталирати Боотстрап у Реацт-у, морамо да проверимо неколико ствари;
Предуслови
Користите ову команду да проверите да ли је ноде.јс инсталиран на вашем рачунару:
node -v
Ако је ноде.јс инсталиран, имаћете излаз сличан овом на вашем терминалу.
Верзија чвора
Ако није инсталиран, можете погледати упутства за преузимање са хттпс://нодејс.орг/ен/.
Користите ову команду да проверите да ли је Реацт инсталиран на вашем рачунару:
npm list react
Ако је Реацт инсталиран глобално на вашој машини, имаћете нешто попут овога на вашем терминалу.
Реацт Версион
- Инсталирајте апликацију реацт-цреате-апп на своју машину. Користећи ову команду
npm install -g create-react-app
- Креирајте своју Реацт апликацију користећи ову команду
npx create-react-app my-app
Можете заменити моју апликацију било којим именом по вашем избору. За наш случај, назвали смо нашу апликацију реацт-б.
Једном инсталиран, имаћете нешто слично на свом терминалу:
Покрените ове команде да бисте започели
- цд реацт-б (користите име ваше апликације изабрано у претходном кораку)
- нпм старт (ова команда покреће вашу Реацт апликацију)
Сада можемо прећи на следеће кораке и додати/инсталирати Боотстрап у нашу Реацт апликацију:
НПМ Инсталл Боотстрап метод
Ноде.јс долази са подразумевано инсталираним нпм (менаџер пакета чворова).
Можете проверити верзију вашег нпм-а помоћу ове команде:
npm -v
Ако је нпм инсталиран, добићете излаз као што је 9.2.0
Сада можете да инсталирате боотстрап користећи ову команду:
npm install bootstrap
Када завршите, идите на ./срц/индек.јс датотеку. Додајте ову линију на врх.
импорт ‘боотстрап/дист/цсс/боотстрап.цсс’;
Коришћење менаџера пакета предива
За разлику од нпм-а, иарн се не инсталира подразумевано када инсталирате ноде.јс.
Инсталирајте иард користећи ову команду;
npm install -g yarn
Ова команда ће инсталирати иарн глобално, тако да више не морате да инсталирате пакет сваки пут када креирате Реацт апликацију.
Покрените ову команду да бисте додали боотстрап у Реацт:
yarn add bootstrap
Када завршите, идите на ./срц/индек.јс датотеку. Додајте ову линију на врх.
импорт ‘боотстрап/дист/цсс/боотстрап.цсс’;
Увек би требало да увезете Боотстрап на врх улазне датотеке ваше апликације пре других ЦСС датотека. Ово олакшава измену ваших Боотстрап уноса ако треба да промените подразумеване вредности шаблона док креирате своју Реацт апликацију.
ЦДН Метод
Користећи везу мреже за испоруку садржаја (ЦДН), можете додати Боотстрап у Реацт. Додавањем ове ЦДН везе укључујете Боотстрап библиотеку у своју Реацт апликацију без преузимања и хостовања датотека у фасцикли вашег пројекта. Пратите ове кораке.
- У вашем основном директоријуму идите до .публиц/индек.хтмл датотеке
- На ознаку <хеад> додајте ову ознаку <линк>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
- Морате да додате ЈаваСцрипт зависности у своју апликацију. Идите у тело ваше индек.хтмл датотеке и додајте ову ознаку непосредно пре завршне ознаке <боди/>:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
Боотстрап је коначно инсталиран у вашој Реацт апликацији.
Коришћење Реацт Боотстрап пакета
Приступи које смо до сада покрили првобитно су дизајнирани за ХТМЛ датотеке. Да бисте ово боље разумели, размотрите овај падајући код из Боотстрапа:
<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>
Шта није у реду са кодом? Боотстрап, подразумевано, користи класу да класификује своје поделе (ДИВ). Међутим, Реацт користи ЈСКС, који користи ЦамелЦасе синтаксу. Стога морате ручно заменити класу са цлассНаме.
Да би тај код функционисао на Реацт-у, морамо да заменимо сваку „класу“ са „цлассНаме“. Коначни код ће бити:
<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>
Срећом, имамо још два приступа, реацт-боотстрап и реацтстрап, где није потребна ручна интервенција.
Реацт-боотстрап
Реацт-боотстрап има праве Реацт компоненте изграђене од нуле. Библиотека је компатибилна са Боотстрап језгром.
Пратите ове кораке да бисте започели са Реацт-боотстрап-ом:
- Инсталирајте Реацт-боотстрап са овом командом:
npm install react-bootstrap bootstrap
- Идите до датотеке срц/индек.јс или Апп.јс и додајте овај ред испред других ЦСС датотека
импорт ‘боотстрап/дист/цсс/боотстрап.мин.цсс’;
Реацт-боотстрап вам омогућава да увезете одређену компоненту уместо целе библиотеке. На пример, ако треба да увезете дугме на једној од ваших компоненти, можете га увести на следећи начин;
импорт { Буттон } фром ‘реацт-боотстрап’;
Реацтстрап
Ово је библиотека компоненти Реацт за Боотстрап. Реацтстрап се ослања на Боотстрап ЦСС оквир за своје стилове и тему. Ова библиотека увози праве Боотстрап класе у вашу Реацт апликацију, омогућавајући вам да имате доследан стил апликације. Такође не морате да додајете Боотстрап-ове ЈаваСцрипт датотеке да бисте активирали функционалност.
Пратите ове кораке да бисте додали Реацтстрап у своју Реацт апликацију:
- Инсталирајте Реацтстрап помоћу ове команде:
npm install reactstrap react react-dom
- Увезите Боотстрап користећи ове команде:
npm install --save bootstrap
импорт ‘боотстрап/дист/цсс/боотстрап.мин.цсс’; (додајте овај ред у свој апп.јс)
Такође можете да користите опцију ЦДН везе да укључите Боотстрап у своју апликацију. Након првог корака, идите у основни директоријум и идите до .публиц/индек.хтмл датотеке и додајте овај ред у ознаку <хеад>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
Реацтстрап вам омогућава да увезете одређену компоненту уместо целе библиотеке. На пример, ако треба да увезете дугме на једној од ваших компоненти, можете да увезете као;
импорт { Буттон } фром ‘реацтстрап’;
Закључак
Изнад су неки приступи које можете користити да инсталирате Боотстрап у своју Реацт апликацију за стилизовање веб апликација. Избор приступа постављања је ствар преференције, јер је крајњи циљ исти.
Комбиновање Реацт-а са Боотстрап-ом штеди вас од бола да морате да пратите све ЦСС стилове како ваша апликација расте. Обликовање ваше апликације постаје лако и ефикасно јер добијате више времена да се фокусирате на функционалност.
Можете истражити неке разлоге да одаберете Реацт Нативе за развој мобилних апликација.