„React“ yra gerai žinoma „JavaScript“ biblioteka, kurią galite naudoti kurdami universalių žiniatinklio programų vartotojo sąsajas. „React“ yra pritaikomas ir galite jį derinti su kitomis technologijomis, kad sukurtumėte galingesnes ir efektyvesnes programas.

Sužinokite, kaip integruoti React su įvairiomis technologijomis ir gausite naudos iš kelių šaltinių.

1. Reaguoti + Redux

Redux yra būsenos valdymo biblioteka, naudojama kartu su React. Redux palengvina centralizuotą programos būsenos valdymą. Kuriant sudėtingas programas su daugybe būsenų, „React“ ir „Redux“ puikiai veikia kartu.

Štai iliustracija, kaip naudoti Redux su React:

importuoti Reaguoti iš'reaguoti';
importuoti { CreateStore } iš"redux";
importuoti { Teikėjas } iš'react-redux';
konst pradinė būsena = { skaičiuoti: 0 };
funkcijareduktorius(būsena = pradinėBūsena, veiksmas) {
jungiklis (action.type) {





instagram viewer

atveju'INCREMENT':
grąžinti { skaičiuoti: būsena.skaičius + 1 };
atveju'SUMAŽINIMAS':
grąžinti { skaičiuoti: state.count - 1 };
numatytas:
grąžinti valstybė;
 }
}

konstimportuoti Reaguoti iš'reaguoti';
importuoti { useQuery, gql } iš'@apollo/klientas';
konst GET_USERS = gql`
 užklausa GetUsers {
 vartotojai {
 id
 vardas
 }
 }
;
funkcijaVartotojai() {
konst { įkeliama, klaida, duomenys } = useQuery (GET_USERS);
jeigu (kraunama) grąžinti<p>Įkeliama...p>;
jeigu (klaida) grąžinti<p>Klaida :(p>;
grąžinti (
store = createStore (reduktorius);
funkcijaSkaitliukas() {
konst count = useSelector(valstybė => state.count);
konst dispatch = useDispatch();
grąžinti (


Skaičiavimas: {count}</p>
 išsiuntimas({ tipo: 'INCREMENT' })}>+</button>
 išsiuntimas({ tipo: 'SUMAŽINIMAS' })}>-</button>
 </div>
 );
}
funkcijaProgramėlė() {
grąžinti (


 </Provider>
 );
}
eksportuotinumatytas Programėlė;

Šis pavyzdys sukuria „Redux“ parduotuvę, kurios pradinė būsena yra 0. Tada reduktoriaus funkcija tvarko PRIEDIMAS ir SUMAŽINIMAS operacijos. Kodas naudoja useSelector ir UseDispatch kabliukai, norint gauti nuolatinį skaičių ir išsiųsti veiklą atskirai.

Galiausiai, kad parduotuvė būtų pasiekiama visai programai, suvyniokite skaitiklio komponentą į teikėjo komponentą.

2. Serverio atvaizdavimas naudojant Next.js

Next.js yra kūrimo sistema, optimizuojanti svetainės greitį ir SEO taktika perduodant HTML klientams ir naudojant React komponentų atvaizdavimas serverio pusėje.

Jo galingas įrankių rinkinys veikia kartu su React, užtikrina išskirtinį našumą ir aukštą reitingą paieškos sistemose.

// puslapiai/index.js
importuoti Reaguoti iš'reaguoti';
funkcijaNamai() {
grąžinti (


Sveiki, pasauli!</h1>


Tai serverio pateiktas „React“ komponentas.</p>
 </div>
 );
}
eksportuotinumatytas Namai;

Šiame modelyje apibūdinate React komponentą, vadinamą Namai. Next.js sukuria statinį HTML puslapį su šio komponento turiniu, kai jis pateikia jį serveryje. Kai puslapis sulaukia kliento apsilankymo, jis išsiųs HTML klientui ir sudrėkins komponentą, kad jis veiktų kaip dinaminis „React“ komponentas.

3. Duomenų gavimas naudojant GraphQL

GraphQL yra API užklausų kalba, kuri siūlo įgudusią, stiprią ir pritaikomą REST alternatyvą. Naudodami GraphQL galite greičiau gauti duomenis ir greičiau atnaujinti vartotojo sąsają.

Tai iliustracija, kaip naudoti GraphQL su React:

importuoti Reaguoti iš'reaguoti';
importuoti { useQuery, gql } iš'@apollo/klientas';
konst GET_USERS = gql`
 užklausa GetUsers {
 vartotojai {
 id
 vardas
 }
 }
;
funkcijaVartotojai() {
konst { įkeliama, klaida, duomenys } = useQuery (GET_USERS);
jeigu (kraunama) grąžinti<p>Įkeliama...p>;
jeigu (klaida) grąžinti<p>Klaida :(p>;
grąžinti (


 {data.users.map(Vartotojas => (
{naudotojo.vardas}</li>
 ))}
 </ul>
 );
}
funkcijaProgramėlė() {
grąžinti (


Vartotojai</h1>

 </div>
 );
}
eksportuotinumatytas Programėlė;

Šis modelis vadinamas useQuery funkcija iš @apollo/klientas biblioteką, kad iš GraphQL programavimo sąsajos būtų galima peržiūrėti klientų duomenis. Tada naudotojų sąrašas rodomas vartotojo sąsajoje.

4. Stilius naudojant CSS-in-JS

CSS-in-JS yra „JavaScript“ pagrindu sukurtas „React“ komponentų stiliaus nustatymo metodas. Tai palengvina sudėtingų stilių lentelių valdymą ir leidžia rašyti stilius moduliniu ir komponentiniu stiliumi.

Štai iliustracija, kaip naudoti CSS-in-JS su React:

importuoti Reaguoti iš'reaguoti';
importuoti stiliaus iš„stiliuotieji komponentai“;
konst Mygtukas = stilizuotas.mygtukas`
 fono spalva: #007bff;
 spalva: #fff;
 pamušalas: 10px 20px;
 sienos spindulys: 5px;
 šrifto dydis: 16px;
 žymeklis: rodyklė;
 &:hover {
 fono spalva: #0069d9;
 }
;
funkcijaProgramėlė() {
grąžinti (


Spausk mane!</Button>
 </div>
 );
}
eksportuotinumatytas Programėlė;

Šis pavyzdys sukuria a stiliaus mygtukas komponentas naudojant stiliaus funkcija. Jis apibrėžia mygtuko naudojimo toną, teksto toną, amortizaciją, linijos nubraukimą, teksto matmenis ir žymeklį.

Taip pat apibrėžiama užvedimo būsena, kuri pakeičia fono spalvą, kai vartotojas užveda pelės žymeklį virš mygtuko. Mygtukas galiausiai atvaizduojamas naudojant „React“ komponentą.

5. Integravimas su D3 duomenų vizualizavimui

D3 yra duomenų apdorojimo ir vizualizavimo JavaScript biblioteka. Naudodami „React“ galite sukurti galingas ir interaktyvias duomenų vizualizacijas. Iliustracija, kaip naudoti D3 su React, yra tokia:

importuoti Reaguoti, { useRef, useEffect } iš'reaguoti';
importuoti * kaip d3 iš'd3';
funkcijaJuostinė diagrama({ duomenys }) {
konst ref = useRef();
 useEffect (() => {
konst svg = d3.select (ref.current);
konst plotis = svg.attr('plotis');
konst aukštis = svg.attr('aukštis');
konst x = d3.scaleBand()
 .domain (data.map((d) => d.etiketė))
 .diapazonas([0, plotis])
 .padding(0.5);
konst y = d3.scaleLinear()
 .domenas([0, d3.max (duomenys, (d) => d.value)])
 .range([aukštis, 0]);
 svg.selectAll('teisinga')
 .data (duomenys)
 .enter()
 .pridėti('teisinga')
 .attr('x', (d) => x (d.etiketė))
 .attr('y', (d) => y (d.reikšmė))
 .attr('plotis', x.bandwidth())
 .attr('aukštis', (d) => aukštis - y (d.reikšmė))
 .attr('užpildyti', „#007bff“);
 }, [duomenys]);
grąžinti (
400}>
 {/* kirviai eina čia */}
 </svg>
 );
}
eksportuotinumatytas Juostinė diagrama;

Šis kodas apibrėžia a Juostinė diagrama komponentas, kuris priima a duomenis rekvizitai ankstesniame kodo fragmente. Tai vadina useRef kabliukas, kad būtų nuoroda į SVG komponentą, kuris jį naudos kontūrui nubrėžti.

Po to jis atvaizduoja diagramos juostas ir apibrėžia skales su useEffect() kabliukas, kuri duomenų reikšmes susieja su ekrano koordinatėmis.

6. Realiojo laiko funkcionalumo pridėjimas naudojant „WebSockets“.

Diegiant „WebSockets“ sukuriamas visiškai veikiantis dvipusis kelias, leidžiantis nuolat palaikyti ryšį tarp kliento ir serverio. Jie leidžia „React“ nuolat atnaujinti žiniatinklio programas, pavyzdžiui, diskusijų lentas, tiesioginius atnaujinimus ir įspėjimus.

„WebSockets“ su „React“ naudojate tokiu būdu:

importuoti Reaguoti, { useState, useEffect } iš'reaguoti';
importuoti io iš'socket.io-client';
funkcijaPokalbių svetainė() {
konst [pranešimai, setMessages] = useState([]);
konst [inputValue, setInputValue] = useState('');
konst lizdas = io (' http://localhost: 3001');
 useEffect (() => {
 socket.on("žinutė", (pranešimas) => {
 setMessages([...pranešimai, žinutė]);
 });
 }, [pranešimai, lizdas]);
konst rankenaPateikti = (e) => {
 e.preventDefault();
 socket.emit("žinutė", inputValue);
 setInputValue('');
 };
grąžinti (




 {messages.map((žinutė, t) => (
{pranešimas}</li>
 ))}
 </ul>


 tipas ="tekstas"
 value={inputValue}
 onChange={(e) => setInputValue (e.target.value)}
 />
"Pateikti">Siųsti</button>
 </form>
 </div>
 );
}
eksportuotinumatytas Pokalbių svetainė;

Šiame pavyzdyje jūs apibrėžiate a Pokalbių svetainė komponentas, kuris naudoja socket.io-client biblioteka prisijungti prie WebSocket serverio. Galite naudoti useState kabliukas susidoroti su pranešimų ir informacijos vertinimu.

Gavęs naują žinutę, naudojimoEfektas kabliukas registruoja klausytoją, kad suaktyvintų pranešimo įvykio atnaujinimą pranešimų sąraše. Norėdami išvalyti ir išsiųsti įvykio pranešimo įvesties reikšmę, yra a rankenaPateikti funkcija.

Vėliau ekrane bus rodoma forma su įvesties lauku ir mygtuku bei atnaujintas pranešimų sąrašas.

Pateikdami kiekvieną formą, kreipkitės į rankenaPateikti funkcija yra neišvengiama. Norėdami pristatyti pranešimą į serverį, šis metodas naudoja lizdą.

7. Integravimas su „React Native“ mobiliajam vystymuisi

„React Local“ yra vietinių universalių programų kūrimo sistema naudojant „React“, kurios jungiasi, kad reklamuotų nešiojamas programas „iOS“ ir „Android“ etapams.

Naudodami „React Native“ integraciją su „React“, galite naudoti komponentais pagrįstą dizainą ir pakartotinai naudojamą „React“ kodą mobiliosiose ir žiniatinklio platformose. Tai sumažina mobiliųjų programų kūrimo ciklus ir laiką, kai jie patenka į rinką. „React Native“ yra populiari vietinių programų mobiliesiems kūrimo sistema, kurioje naudojama „React“ biblioteka.

Pristatome gyvybiškai svarbų programavimą ir bibliotekas, pvz Node.js, Atsakykite į vietinį CLI, ir Xcode arba Android studija, yra labai svarbus dizaineriams, dirbantiems su iOS ir Android atskirai. Galiausiai, paprasti „React Native“ komponentai leidžia kūrėjams kurti patikimas ir daug funkcijų turinčias mobiliąsias programas „iOS“ ir „Android“ platformoms.

Derinkite React su kitomis technologijomis

„React“ yra mėgstama ir efektyvi biblioteka, skirta kurti internetines programas. „React“ yra puiki galimybė kurti vartotojo sąsajas, tačiau ji taip pat naudojama su kitomis technologijomis, siekiant padidinti savo galimybes.

Integruodami React su šiomis technologijomis, kūrėjai gali sukurti sudėtingesnes ir pažangesnes programas, kurios suteikia geresnę vartotojo patirtį. „React“ ir jos įrankių bei bibliotekų ekosistema apima viską, ko reikia norint sukurti pagrindinę svetainę arba sudėtingą žiniatinklio programą.