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

Научите како да интегришете Реацт са различитим технологијама и добићете предности из више извора.

1. Реацт + Редук

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

Ево илустрације како да користите Редук са Реацт-ом:

увоз Реаговати из'реаговати';
увоз { цреатеСторе } из'редук';
увоз { Провајдер } из'реаговати-редук';
конст почетно стање = { цоунт: 0 };
функцијаредуктор(стање = почетно стање, акција) {
прекидач (ацтион.типе) {
случај'ИНЦРЕМЕНТ':
повратак { цоунт





instagram viewer
: стате.цоунт + 1 };
случај'СМАЊИВАЊЕ':
повратак { цоунт: стате.цоунт - 1 };
Уобичајено:
повратак држава;
 }
}

констувоз Реаговати из'реаговати';
увоз { усеКуери, гкл } из'@аполло/цлиент';
конст ГЕТ_УСЕРС = гкл`
 упита ГетУсерс {
 корисници {
 ид
 име
 }
 }
;
функцијаКорисници() {
конст { лоадинг, еррор, дата } = усеКуери (ГЕТ_УСЕРС);
ако (учитавање) повратак<стр>Учитавање...стр>;
ако (грешка) повратак<стр>Грешка :(стр>;
повратак (
сторе = цреатеСторе (редуцер);
функцијаЦоунтер() {
конст цоунт = усеСелецтор(држава => стате.цоунт);
конст диспатцх = усеДиспатцх();
повратак (


Број: {цоунт}</p>
 депеша({ тип: 'ИНЦРЕМЕНТ' })}>+</button>
 депеша({ тип: 'СМАЊИВАЊЕ' })}>-</button>
 </div>
 );
}
функцијаАпликација() {
повратак (


 </Provider>
 );
}
извозУобичајено Апликација;

Овај пример креира Редук складиште са почетним стањем 0. Функција редуктора тада управља ИНЦРЕМЕНТ и ДЕЦРЕМЕНТ операције. Код користи усеСелецтор и усеДиспатцх куке за добијање текућег бројања и појединачно слање активности.

Коначно, да би продавница била доступна целој апликацији, умотајте компоненту бројача у компоненту добављача.

2. Рендеровање на страни сервера са Нект.јс

Нект.јс је развојни оквир који оптимизује брзину веб локације и СЕО тактике преносом ХТМЛ-а клијентима и коришћењем приказивање Реацт компоненти на страни сервера.

Његов моћни скуп алата ради заједно са Реацт-ом, пружајући изузетне перформансе и високо рангирање на претраживачима.

// пагес/индек.јс
увоз Реаговати из'реаговати';
функцијаКућа() {
повратак (


Здраво, Свете!</h1>


Ово је серверска Реацт компонента.</p>
 </div>
 );
}
извозУобичајено Кућа;

У овом моделу карактеришете Реацт компоненту под називом Кућа. Нект.јс прави статичну ХТМЛ страницу са садржајем ове компоненте када је рендерује на серверу. Када страница добије посету од клијента, она ће послати ХТМЛ клијенту и хидратизовати компоненту, омогућавајући јој да функционише као динамичка Реацт компонента.

3. Преузимање података помоћу ГрапхКЛ-а

ГрапхКЛ је језик упита за АПИ-је који нуди стручну, снажну и прилагодљиву алтернативу РЕСТ-у. Са ГрапхКЛ-ом можете брже добити податке и брже ажурирати кориснички интерфејс.

Ово је илустрација начина коришћења ГрапхКЛ-а са Реацт-ом:

увоз Реаговати из'реаговати';
увоз { усеКуери, гкл } из'@аполло/цлиент';
конст ГЕТ_УСЕРС = гкл`
 упита ГетУсерс {
 корисници {
 ид
 име
 }
 }
;
функцијаКорисници() {
конст { лоадинг, еррор, дата } = усеКуери (ГЕТ_УСЕРС);
ако (учитавање) повратак<стр>Учитавање...стр>;
ако (грешка) повратак<стр>Грешка :(стр>;
повратак (


 {дата.усерс.мап(корисник => (
{усер.наме}</li>
 ))}
 </ul>
 );
}
функцијаАпликација() {
повратак (


Корисници</h1>

 </div>
 );
}
извозУобичајено Апликација;

Овај модел се зове усеКуери функција из @аполло/клијент библиотеку да донесе преглед клијената из ГрапхКЛ програмског интерфејса. Листа корисника се затим приказује у корисничком интерфејсу.

4. Стилизирање са ЦСС-ин-ЈС

ЦСС-ин-ЈС је метода заснована на ЈаваСцрипт-у за стилизовање Реацт компоненти. Олакшава управљање сложеним листама стилова и омогућава вам писање стилова у модуларном стилу заснованом на компонентама.

Ево илустрације како да користите ЦСС-ин-ЈС са Реацт-ом:

увоз Реаговати из'реаговати';
увоз стилизовано из'стилед-цомпонентс';
конст Дугме = стилизовано.дугме`
 боја позадине: #007бфф;
 боја: #ффф;
 паддинг: 10пк 20пк;
 радијус границе: 5пк;
 величина фонта: 16пк;
 курсор: показивач;
 &:лебдети {
 боја позадине: #0069д9;
 }
;
функцијаАпликација() {
повратак (


Кликните на мене!</Button>
 </div>
 );
}
извозУобичајено Апликација;

Овај пример ствара а стилизовано дугме компонента помоћу стилизовано функција. Дефинише тон доживљаја дугмета, тон текста, амортизацију, померање линије, димензију текста и курсор.

Такође је дефинисано стање лебдења које мења боју позадине када корисник пређе мишем преко дугмета. Дугме се коначно приказује помоћу Реацт компоненте.

5. Интеграција са Д3 за визуелизацију података

Д3 је ЈаваСцрипт библиотека за манипулацију и визуализацију података. Можете направити моћне и интерактивне визуализације података користећи Реацт. Илустрација како да користите Д3 са Реацт-ом је следећа:

увоз Реагујте, { усеРеф, усеЕффецт } из'реаговати';
увоз * као д3 из'д3';
функцијаДијаграм({ подаци }) {
конст реф = усеРеф();
 усеЕффецт(() => {
конст свг = д3.селецт (реф.цуррент);
конст ширина = свг.аттр('ширина');
конст висина = свг.аттр('висина');
конст к = д3.сцалеБанд()
 .домаин (дата.мап((д) => д.ознака))
 .домет([0, ширина])
 .паддинг(0.5);
конст и = д3.сцалеЛинеар()
 .домаин([0, д3.мак (подаци, (д) ​​=> д.вредност)])
 .ранге([висина, 0]);
 свг.селецтАлл('рецт')
 .дата (подаци)
 .ентер()
 .додати('рецт')
 .аттр('Икс', (д) ​​=> к (д.ознака))
 .аттр('и', (д) ​​=> и (д.вредност))
 .аттр('ширина', к.бандвидтх())
 .аттр('висина', (д) ​​=> висина - и (д.вредност))
 .аттр('испунити', '#007бфф');
 }, [подаци]);
повратак (
400}>
 {/* секире иду овде */}
 </svg>
 );
}
извозУобичајено Дијаграм;

Овај код дефинише а Дијаграм компонента која прихвата а података проп у претходном исечку кода. То зове усеРеф закачите да бисте направили референцу на СВГ компоненту која ће је користити за цртање обриса.

Након тога, он приказује траке графикона и дефинише скале са усеЕффецт() кука, који пресликава вредности података у координате екрана.

6. Додавање функционалности у реалном времену помоћу ВебСоцкетс-а

Имплементацијом ВебСоцкетс-а успоставља се потпуно оперативан двосмерни пут који омогућава континуирану комуникацију између клијента и сервера. Они омогућавају Реацт-у да додаје сталну корисност веб апликацијама, на пример, форумима за дискусије, ажурирањима уживо и упозорењима.

Користите ВебСоцкетс на следећи начин са Реацт-ом:

увоз Реагујте, { усеСтате, усеЕффецт } из'реаговати';
увоз ио из'соцкет.ио-цлиент';
функцијаПричаоница() {
конст [мессагес, сетМессагес] = усеСтате([]);
конст [инпутВалуе, сетИнпутВалуе] = усеСтате('');
конст соцкет = ио(' http://localhost: 3001');
 усеЕффецт(() => {
 соцкет.он('порука', (порука) => {
 сетМессагес([...поруке, порука]);
 });
 }, [поруке, утичница]);
конст хандлеСубмит = (е) => {
 е.превентДефаулт();
 соцкет.емит('порука', инпутВалуе);
 сетИнпутВалуе('');
 };
повратак (




 {мессагес.мап((порука, тј) => (
{мессаге}</li>
 ))}
 </ul>


 типе="текст"
 валуе={инпутВалуе}
 онЦханге={(е) => сетИнпутВалуе (е.таргет.валуе)}
 />
"прихвати">Пошаљи</button>
 </form>
 </div>
 );
}
извозУобичајено Причаоница;

У овом примеру дефинишете а Причаоница компонента која користи соцкет.ио-цлиент библиотека за повезивање са ВебСоцкет сервером. Можете користити усеСтате кука да се носи са прегледом порука и уважавањем информација.

По пријему нове поруке, усеЕффецт хоок региструје слушаоца да покрене ажурирање догађаја поруке на листи порука. Да бисте обрисали и послали улазну вредност за поруку о догађају, постоји а хандлеСубмит функција.

Након тога, и образац са пољем за унос и дугметом, као и ажурирана листа порука ће се приказати на екрану.

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

7. Интеграција са Реацт Нативе за мобилни развој

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

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

Представљање виталног програмирања и библиотека, нпр Ноде.јс, Одговорите на локални ЦЛИ, и Ксцоде или Андроид Студио, је од суштинског значаја за дизајнере који се одвојено баве иОС-ом и Андроид-ом. Коначно, једноставне Реацт Нативе компоненте омогућавају програмерима да креирају робусне мобилне апликације богате функцијама за иОС и Андроид платформе.

Комбинујте Реацт са другим технологијама

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

Интеграцијом Реацт-а са овим технологијама, програмери могу креирати сложеније и напредније апликације које нуде боље корисничко искуство. Реацт и његов екосистем алата и библиотека покривају све што је потребно за креирање основне веб странице или сложене веб апликације.