Преглед садржаја[Сакрити][Прикажи]
Када бирате софтверску библиотеку или оквир, обично се узима у обзир искуство програмера.
Када помињем „искуство програмера“, мислим на то како програмери заправо раде посао. Програмери бирају библиотеке или оквире које је пријатно користити.
Ово је један од основних разлога зашто сада имамо најпопуларније библиотеке и оквире. Као програмери, не морамо да почињемо од нуле када постоје постојећи алати створени да нам помогну у нашим задацима.
Оквири су делови софтвера које креирају и користе програмери за израду апликација, а НектЈС је један од њих.
У овом посту ћемо проћи кроз Нектјс, његове кључне карактеристике и како га можемо користити за прављење апликације. Ускочимо одмах.
Шта је Нект.јс?
Нект.јс је ЈаваСцрипт оквир за брзо и лако конструисање статичких веб страница и онлајн апликација заснованих на Реацт-у. Омогућава вам да дизајнирате сјајне веб апликације за различите платформе, укључујући Виндовс, Линук и Мац.
Требало би да сте упознати са Нект.јс оквиром ако сте минимално упознати са реацтом и желите да сазнате више о реацт екосистему.
Иако Нект.јс долази са свиме што вам је потребно за почетак, можете бирати између НПМ-а и Иарн-а, ЈаваСцрипт-а и ТипеСцрипт-а, ЦСС-а и СЦСС-а, статичког извоза и имплементације без сервера.
Карактеристике
- Рутирање се врши аутоматски – Не морате ништа да конфигуришете јер је било која УРЛ адреса мапирана на систем датотека, на датотеке у фасцикли страница (наравно, имате опције прилагођавања).
- Компоненте једне датотеке – Компоненти је једноставно додати стилове у опсегу помоћу стилед-јск, који је потпуно интегрисан и произведен од стране истог тима.
- Поновно учитавање врућег кода – Када Нект.јс открије модификацију сачувану на диску, поново учитава страницу.
- Динамичке компоненте – Можете динамички учитавати ЈаваСцрипт модуле и Реацт компоненте.
- Статички извози – Нект.јс вам омогућава да извезете потпуно статичну локацију из ваше апликације помоћу следеће команде за извоз.
- Компатибилност са окружењем – Нект.јс се неприметно интегрише са екосистемима ЈаваСцрипт, Ноде и Реацт.
- Аутоматско раздвајање кодова – За приказивање страница користе се само библиотеке и ЈаваСцрипт који су потребни. Уместо да креира једну ЈаваСцрипт датотеку која садржи сав код апликације, Нект.јс интелигентно дели апликацију на много ресурса.
Како направити нект.јс апликацију?
инсталација
Можете користити команду ноде нпк да инсталирате и изградите Нект.јс пројекат.
Ово ће генерисати фасциклу и све датотеке, конфигурације и друге ставке потребне за покретање Нект.јс пројекта.
Можете покренути апликацију када је генерисана.
Странице и рутирање
За руковање рутама са Нект.јс, не морамо да користимо оквир за рутирање. Рутирање помоћу Нект.јс је једноставно за подешавање. Када користите команду цреате-нект-апп за прављење нове Нект.јс апликације, апликација креира фасциклу која се подразумевано зове 'пагес'.
Ова фасцикла „странице“ је место где одржавате своје руте. Као резултат, свака датотека компоненти реаговања у поддиректоријуму ће се третирати као засебна рута.
На пример, ако фасцикла садржи те датотеке:
- индек.јс
- абоут.јс
- арицлес.јс
Ова датотека ће се аутоматски трансформисати на три начина:
- Индексна страница лоцалхост/индек
- Страница о локалном хосту/о
- Страница блога лоцалхост/артицлес
Пример странице абоут.јс је приказан испод. Као што видите, ништа није наведено о страници. То је једноставно стандардна Реацт функционална компонента.
rute
Да бисте направили угнежђене руте, прво морате успоставити поддиректоријум. На пример: странице/чланци. Креирајте своју 'цонтацт.јс' компоненту реаговања у оквиру те фасцикле и она ће генерисати страницу лоцалхост/артицлес/цонтацт.
Ако ставите једну датотеку у пагес/артицлес.јс, а другу у пагес/артицлес/индек.јс. Оба одражавају исту путању лоцалхост/блог. У овој ситуацији, Нект.јс ће само приказати датотеку артицле.јс. Шта је са динамичким рутама, у којима сваки блог пост има своју путању:
- лоцалхост/блог/фирст-артицле
- лоцалхост/блог/-сецонд-артицле
Користећи нотацију у заградама, можете дефинисати динамичку руту у Нект.јс. На пример: пагес/артицле/[слуг].јс
Линк Роутес
Сада сте завршили своју прву руту. Претпостављам да питате како да повежете странице са тим рутама. Да бисте то урадили, требаће вам „следеће/веза“.
Ево примера почетне странице која укључује везу до странице О нама:
Ако желите да стилизујете везу, користите следећу синтаксу:
Редирецт Роутес
Шта ако треба да присилите преусмеравање на одређену страницу? На пример, када се притисне дугме? Ово можете да постигнете коришћењем 'роутер.пусх':
SЕО
Странице у веб апликацијама захтевају мета елементе (главне) поред података у телу ХТМЛ-а. Ово ће захтевати инсталацију додатног захтева под називом Реацт Хелмет у Реацт апликацији.
Можемо да користимо компоненту Хеад из нект/хеад у Нект да бисмо лако додали метаподатке на наше веб странице који ће бити приказани у резултатима претраге и уграђеним:
komponente
Често ћете морати да развијете компоненте или датотеку изгледа. На пример, компонента која приказује навигациону траку. До сада смо користили само фасциклу страница. Шта ако ваша компонента није намењена да буде страница руте?
Не желите да корисник иде на страницу као што је лоцалхост/навбар. Ако ставите компоненту Навбар.јс у фолдер пагес, то ће се догодити. Шта треба да урадите у ситуацији?
Једноставно ускладиштите све своје компоненте „није страница“ у посебној фасцикли. Већина Нект.јс пројеката користи надимак „компоненте“, а овај директоријум се генерише у основној фасцикли вашег пројекта.
Глава компонента
Почетно учитавање странице приказује Нект.јс на страни сервера. То ради тако што мења ХТМЛ ваше странице. Одељак заглавља је укључен.
Компонента Нект.јс Хеад се користи за давање ознака одељка заглавља као што су наслов и мета. Компонента Хеад се користи у овом примеру компоненте Лаиоут.
Креирање 404 странице није пронађено
Могуће је да направите сопствену страницу са грешком 404. Можда бисте желели да прилагодите поруку или додате сопствени дизајн странице. У фасцикли страница креирајте датотеку 404.јс.
Када дође до грешке 404, Нект.јс ће аутоматски преусмерити на ову страницу. Ево примера персонализоване 404 странице:
Преузимање података са стране сервера
Уместо преузимања података на страни клијента, Нект.јс вам омогућава да извршите почетну популацију података, што подразумева слање странице са подацима који су већ попуњени са сервера.
Имате два избора за имплементацију преузимања података на страни сервера:
- Податке треба преузети на сваки захтев.
- Добијте податке само једном током процеса изградње (статична локација)
Преузмите податке о сваком захтеву
Метод гетСерверСидеПропс се користи за приказивање сваког захтева на страни сервера. Ова функција може бити укључена на крају датотеке компоненте. Нект.јс ће аутоматски попунити реквизите ваше компоненте са гетСерверСидеПропс објектом ако је та функција присутна у датотеци компоненте.
Преузмите податке у време израде
Метод гетСтатицПропс се користи за приказивање на страни сервера у време изградње. Ова функција може бити укључена на крају датотеке компоненте. Овај метод покреће серверски код и шаље ГЕТ захтев серверу, али само једном када је наш пројекат завршен.
Зашто би требало да научите Нект.јс?
Један од разлога за ово је зато што је Нект.јс изграђен на врху Реацт-а, фронт-енд развојног алата за креирање корисничких интерфејса који су мој омиљени избор за дизајнирање веб апликација.
Али то не би било довољно да Нект.јс није био добар у ономе што ради… зар не?
Дакле, шта тачно ради?
Прво морамо дефинисати неколико појмова да бисмо то разумели. Нект.јс је стекао популарност јер је решио проблем који су многи веб програмери имали са веб апликацијама на страни клијента (у прегледачу). Ове апликације на једној страници (СПА) имале су боље искуство јер им није био потребан корисник да поново учита страницу и омогућиле су више интерактивности.
Међутим, пошто већина материјала у апликацији попут ове постаје видљива само када се изврши у претраживачу, веб индексери имају потешкоћа да разумеју текстуални садржај такве апликације.
Као резултат тога, упркос њиховој популарности, многа СПА су остала углавном анонимна за велике претраживаче као што је Гугл. Нект.јс сада укључује робуснији уграђени механизам за рендеровање на страни сервера (ССР) Реацт компоненти.
Нект.јс омогућава програмерима да конструишу ЈаваСцрипт код на серверу током процеса прављења и обезбеде основни ХТМЛ који се може индексирати кориснику.
Прозодија
- Одлично за корисничко искуство
- Одлично за СЕО
- Направите супер брзу статичку веб локацију која се понаша као динамичка
- Флексибилност у изградњи корисничког интерфејса и корисничког искуства.
- Многе развојне предности
- Велика подршка заједнице
Против
- Веб локације или апликације имају одређено време да се направе или развију.
- За одређене задатке, Нект.јс је неадекватан. Програмери би требало да буду у стању да конструишу динамичке руте користећи Ноде.јс алате.
Zakljucak
Као што видите, Нект.јс поједностављује развој Реацт апликације и омогућава вам да се фокусирате на оно што је најважније – логику ваше апликације и кориснички интерфејс. Укључује све што је потребно за креирање савремених апликација богатих фронтендом и АПИ-ја.
Такође је прикладан за пројекте само са садржајем, као што су блогови и пословне веб странице, због своје способности да прави статичне ХТМЛ странице.
Са тренутним издањима, Нект.јс не само да одржава висок ниво искуства програмера, већ даје и алате за повећање визуелних перформанси и корисничког искуства, осигуравајући светлу будућност за овај оквир.
Ostavite komentar