Читаоци попут вас помажу у подршци МУО. Када обавите куповину користећи везе на нашем сајту, можда ћемо зарадити провизију за партнере. Опширније.

Креирање фронт-енд интерфејса може бити изазовно ако сте нови у РеацтЈС-у. Боотстрап оквир, заједно са својим шаблонима, чини га лакшим и бржим.

Боотстрап има тематске шаблоне које свако може да прилагоди и објави бесплатно. Можете бирати између многих шаблона пре него што их преузмете и користите у својој апликацији.

Шаблони вам помажу да брзо креирате изванредна фронтенд интерфејса, остављајући више времена да се фокусирате на сложене функције. Можете научити о Боотстрап шаблонима тако што ћете их интегрисати са РеацтЈС апликацијом.

Направите своју Реацт апликацију

Старт би креирање РеацтЈС апликације у фасцикли на вашој машини. Алтернативно, можете пратити званичника Водич за реакцију о креирању нове апликације.

Преузмите Боотстрап шаблон

Преузмите шаблон по свом избору са Покрените Боотстрап теме веб сајта или неку другу по вашој жељи. Постоји неколико сајтова са бесплатним Боотстрап шаблонима на мрежи.

instagram viewer

За овај водич преузмите Боотстрап тему под називом Агенција.

Када се преузме, распакујте датотеку фасцикле да бисте видели њен садржај. Приметићете да имате директоријуме под називом ассес, ЦСС, ЈС и датотеку под називом индек.хтмл.

Додајте Боотстрап шаблон у РеацтЈС апликацију

Затим копирајте садржај преузете фасцикле у фасциклу под називом јавности у вашој апликацији Реацт. Приметићете да сада имате две датотеке индек.хтмл. Копирајте садржај Боотстрап-а индек.хтмл датотеку у апликацији Реацт индек.хтмл фајл.

Прикажи шаблон за покретање

Након што додате Боотстрап ХТМЛ у индек.хтмл апликације, покрените апликацију да видите да ли је интеграција била успешна. Користите следећу команду:

нпм старт

Требало би да видите шаблон у свом претраживачу, као што илуструје следећа слика.

Интегришите Боотстрап тему у компоненте апликације

Да бисте интегрисали Боотстрап шаблон у Реацт апликацију, морате копирати ХТМЛ одељке из индек.хтмл у сваку компоненту. Компоненте вам омогућавају да пишете код за различите делове апликације и поново их користите. Ово смањује понављање и такође организује структуру ваше апликације.

Датотека индек.хтмл сада има различите одељке Навигација, О нама, Контакт и Подножје. У фасцикли срц направите две фасцикле, компоненте и странице. Поделите одељке у фасцикле приказане у наставку:

Компоненте треба да садрже следеће:

  • Хеадер.јск: Масхед одељак.
  • Навигатион.јск: Трака за навигацију и подножје.

Фасцикла страница ће имати следеће:

  • АбоутУс.јск: Информације о нама.
  • Хоме.јск: Сервиси, Портфолио, Клијенти и Тимови.
  • Цонтацтс.јск: Контакт информације.

Копирајте ХТМЛ сваког одељка из датотеке индек.хтмл и додајте га свакој компоненти. Синтакса би требало да изгледа овако:

увоз Реаговати из'реаговати'
конст Заглавље = () => {
повратак (




"мастхеад">
"контејнер">
"мастхеад-субхеадинг">Добро дошли у наш студио!</div>









„мастхеад-хеадинг тект-велика слова“>
 ТоДраго ми је да смо се упознали
 </div>



"бтн бтн-примарни бтн-кл текст-велика слова" хреф="#услуге">
 Реци ми више
 </a>
 </div>
 </header>
 </div>
 );
};


извозУобичајено Хеадер

Затим промените синтаксу ХТМЛ-а у компонентама у ЈСКС. Да бисте то урадили аутоматски, кликните на Всцоде едитор Цтрл + Схифт + П. Кликните на опцију ХТМЛ то ЈСКС у прозору који се појави да бисте променили ХТМЛ у ЈСКС.

ЈСКС је проширење синтаксе за ЈаваСцрипт. Омогућава вам да користите мешавину ХТМЛ-а и ЈаваСцрипт-а за писање кода у компонентама. Када копирате све одељке у компоненте, датотека индек.хтмл остаје само са стилским везама и скриптама.

То ће изгледати овако:

хтмл>
<хтмлланг="ен">


<глава>
<метацхарсет="утф-8" />
<линкрел="икона"хреф=„%ПУБЛИЦ_УРЛ%/фавицон.ицо“ />
<метаиме="виевпорт"садржаја="видтх=девице-видтх, инитиал-сцале=1" />
<метаиме="тема-боја"садржаја="#000000" />
<метаиме="Опис"садржаја=„Веб сајт креиран помоћу апликације цреате-реацт-апп“/>
<линкрел="јабука-тоуцх-ицон"хреф=„%ПУБЛИЦ_УРЛ%/лого192.пнг“ />
<линкрел="манифестовати"хреф=„%ПУБЛИЦ_УРЛ%/манифест.јсон“ />
<наслов>Реацт Аппнаслов>
<линкрел="икона"тип="слика/к-икона"хреф="ассетс/фавицон.ицо" />


 Фонт Авесоме иконе (бесплатна верзија)
<скриптасрц=" https://use.fontawesome.com/releases/v6.1.0/js/all.js"унакрсно порекло="анонимно">скрипта>


 Гоогле фонтови
<линкхреф=" https://fonts.googleapis.com/css? породица=Монцерат: 400,700"рел="стилесхеет"тип="текст/цсс" />
<линкхреф=" https://fonts.googleapis.com/css? породица=Робото+плоча: 400,100,300,700"рел="стилесхеет"тип="текст/цсс" />


 Основна тема ЦСС (укључује Боотстрап)
<линкхреф=„%ПУБЛИЦ_УРЛ%/цсс/стилес.цсс“рел="стилесхеет" />
глава>


<тело>
<носцрипт>Морате да омогућите ЈаваСцрипт да бисте покренули ову апликацију.носцрипт>


<дивид="корен">див>


 Боотстрап језгро ЈС
<скриптасрц=" https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">скрипта>


 Основна тема ЈС
<скриптасрц=„%ПУБЛИЦ_УРЛ%/јс/сцриптс.јс“>скрипта>


 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *


 * * СБ Формс ЈС * *


 * * Активирајте свој образац на https://startbootstrap.com/solution/contact-forms * *


 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *


<скриптасрц=" https://cdn.startbootstrap.com/sb-forms-latest.js">скрипта>
тело>
хтмл>

Креирајте руте за компоненте

Сада када имате везе, скрипте и компоненте у апликацији, морате да креирате руте за њих у датотеци Апп.јс. Руте ће приказати странице у апликацији како би је учиниле динамичном.

Да бисте приказали странице, инсталирајте реацт-роутер-дом са следећом командом:

нпм инсталл реацт-роутер-дом

У Апп.јс датотеку, увезите БровсерРоутер као рутер, руте и руту из реацт-роутер-дом библиотека. Затим увезите све компоненте и Пагес. Датотека би требало да изгледа овако:

увоз { БровсерРоутер као Рутер, руте, рута } из"реаговати-рутер-дом";
увоз Навигација из'./цомпонентс/Навигатион';
увоз Кућа из'./Пагес/Хоме';
увоз О томе из'./Пагес/Абоут';
увоз Контакт из'./Пагес/Цонтацт'
увоз Хеадер из"./цомпонентс/Хеадер";
функцијаАпликација() {
повратак (


"Апликација">










"/" елемент={} />
"/О томе" елемент={} />
"/контакт" елемент={} />
 </Routes>
 </Navigation>
 </Router>
 </div>
 );
}


извозУобичајено Апликација;

Требало би да видите приказане странице на локалном хосту када се крећете кроз претраживач. Слично шаблону који сте преузели, као што је илустровано испод.

Честитамо, успешно сте интегрисали Боотстрап тему у своју Реацт апликацију. Сада можете да прилагодите странице својим жељама.

Зашто користити Боотстрап-ове тематске шаблоне?

Боотстрап шаблони помажу у стварању изванредних фронт-енд интерфејса у врло кратком времену. Постоји много тема које можете изабрати. Све теме су најновије Боотстрап верзије. Такође долазе са МИТ лиценцама и најновији су индустријски дизајн.

Иако су предности многе, ослањање на шаблоне смањује креативност. Уобичајено је пронаћи једну популарну тему која се користи на другим сајтовима на мрежи. Међутим, можете прилагодити шаблон према јединственом дизајну.

Сада можете да интегришете Боотстрап шаблон са Реацт апликацијом. Почните да правите са Боотстрап шаблонима и уживајте у прелепим интерфејсима предњег дела.