React je dobre známa knižnica JavaScript, ktorú môžete použiť na vytváranie používateľských rozhraní pre všestranné webové aplikácie. React je prispôsobivý a môžete ho skombinovať s inými technológiami, aby ste vytvorili výkonnejšie a efektívnejšie aplikácie.

Naučte sa, ako integrovať React s rôznymi technológiami a získate výhody z viacerých zdrojov.

1. Reagovať + Redux

Redux je knižnica správy stavu používaná v spojení s Reactom. Redux uľahčuje centralizovanú správu stavu aplikácií. Pri vytváraní zložitých aplikácií s mnohými stavmi spolupracujú React a Redux dobre.

Tu je ilustrácia toho, ako používať Redux s Reactom:

importovať Reagovať od'reagovať';
importovať { createStore } od'redux';
importovať { Poskytovateľ } od'react-redux';
konšt počiatočný stav = { počítať: 0 };
funkciureduktor(stav = počiatočný stav, akcia) {
prepínač (action.type) {
prípad'INCREMENT':
vrátiť





instagram viewer
 { počítať: štát.počet + 1 };
prípad'DECREMENT':
vrátiť { počítať: state.count - 1 };
predvolená:
vrátiť štát;
 }
}

konštimportovať Reagovať od'reagovať';
importovať { useQuery, gql } od'@apollo/client';
konšt GET_USERS = gql`
 dotaz GetUsers {
 používatelia {
 id
 názov
 }
 }
;
funkciuPoužívatelia() {
konšt { načítavanie, chyba, údaje } = useQuery (GET_USERS);
ak (načítava) vrátiť<p>Načítava...p>;
ak (chyba) vrátiť<p>Chyba :(p>;
vrátiť (
store = createStore (reduktor);
funkciuPočítadlo() {
konšt počet = useSelector(štát => state.count);
konšt odoslanie = useDispatch();
vrátiť (


Počet: {count}</p>
 odoslanie ({ typu: 'INCREMENT' })}>+</button>
 odoslanie ({ typu: 'DECREMENT' })}>-</button>
 </div>
 );
}
funkciuApp() {
vrátiť (


 </Provider>
 );
}
exportpredvolená App;

Tento príklad vytvorí obchod Redux s počiatočným stavom 0. Funkcia redukcie potom zvládne INCREMENT a ZNÍŽENIE operácií. Kód používa useSelector a použiteOdoslanie háčiky na získanie priebežného počtu a odosielanie aktivít jednotlivo.

Nakoniec, aby bol obchod prístupný pre celú aplikáciu, zabaľte komponent počítadla do komponentu poskytovateľa.

2. Vykresľovanie na strane servera s Next.js

Next.js je vývojový rámec, ktorý optimalizuje rýchlosť webových stránok a SEO taktiky prenášaním HTML klientom a používaním vykresľovanie komponentov React na strane servera.

Jeho výkonná sada nástrojov funguje spolu s Reactom a poskytuje výnimočný výkon a vysoké hodnotenie vo vyhľadávačoch.

// pages/index.js
importovať Reagovať od'reagovať';
funkciuDomov() {
vrátiť (


Ahoj, Svet!</h1>


Toto je komponent React vykreslený serverom.</p>
 </div>
 );
}
exportpredvolená Domov;

V tomto modeli charakterizujete komponent React tzv Domov. Next.js vytvorí statickú HTML stránku s obsahom tohto komponentu, keď ho vykreslí na serveri. Keď stránka dostane návštevu od klienta, odošle HTML klientovi a hydratuje komponent, čo mu umožní fungovať ako dynamický komponent React.

3. Načítanie údajov pomocou GraphQL

GraphQL je dopytovací jazyk pre API, ktorý ponúka odbornú, silnú a prispôsobiteľnú alternatívu k REST. Pomocou GraphQL môžete získať údaje rýchlejšie a rýchlejšie aktualizovať používateľské rozhranie.

Toto je ilustrácia spôsobu použitia GraphQL s React:

importovať Reagovať od'reagovať';
importovať { useQuery, gql } od'@apollo/client';
konšt GET_USERS = gql`
 dotaz GetUsers {
 používatelia {
 id
 názov
 }
 }
;
funkciuPoužívatelia() {
konšt { načítavanie, chyba, údaje } = useQuery (GET_USERS);
ak (načítava) vrátiť<p>Načítava...p>;
ak (chyba) vrátiť<p>Chyba :(p>;
vrátiť (


 {data.users.map(užívateľ => (
{user.name}</li>
 ))}
 </ul>
 );
}
funkciuApp() {
vrátiť (


Používatelia</h1>

 </div>
 );
}
exportpredvolená App;

Tento model nazýva useQuery funkcia z @apollo/klient knižnica, ktorá prináša prehľad klientov z programovacieho rozhrania GraphQL. Zoznam používateľov sa potom zobrazí v používateľskom rozhraní.

4. Styling s CSS-in-JS

CSS-in-JS je metóda založená na JavaScripte na úpravu komponentov React. Zjednodušuje správu zložitých šablón štýlov a umožňuje písať štýly v modulárnom štýle založenom na komponentoch.

Tu je ilustrácia toho, ako používať CSS-in-JS s Reactom:

importovať Reagovať od'reagovať';
importovať štylizované od„styled-components“;
konšt Tlačidlo = štylizované.tlačidlo`
 farba pozadia: #007bff;
 farba: #fff;
 vypchávka: 10px 20px;
 hraničný polomer: 5px;
 veľkosť písma: 16px;
 kurzor: ukazovateľ;
 &:vznášať sa {
 farba pozadia: #0069d9;
 }
;
funkciuApp() {
vrátiť (


Kliknite na mňa!</Button>
 </div>
 );
}
exportpredvolená App;

Tento príklad vytvára a štylizované tlačidlo komponent pomocou štylizované funkciu. Definuje zvuk tlačidla, tón textu, odpruženie, posun čiary, rozmer textu a kurzor.

Definovaný je aj stav kurzora, ktorý mení farbu pozadia, keď používateľ umiestni kurzor myši na tlačidlo. Tlačidlo je nakoniec vykreslené pomocou komponentu React.

5. Integrácia s D3 pre vizualizáciu dát

D3 je knižnica JavaScript na manipuláciu a vizualizáciu údajov. Pomocou Reactu môžete vytvárať výkonné a interaktívne vizualizácie údajov. Ilustrácia toho, ako používať D3 s Reactom, je nasledovná:

importovať Reagovať, { useRef, useEffect } od'reagovať';
importovať * ako d3 od'd3';
funkciuStĺpcový graf({ údaje }) {
konšt ref = useRef();
 useEffect(() => {
konšt svg = d3.select (ref.current);
konšt šírka = svg.attr('šírka');
konšt výška = svg.attr('výška');
konšt x = d3.scaleBand()
 .domena (data.map((d) => d.label))
 .rozsah([0, šírka])
 .vypchávka(0.5);
konšt y = d3.scaleLinear()
 .domena([0, d3.max (údaje, (d) => d.value)])
 .rozsah([výška, 0]);
 svg.selectAll('rect')
 .data (údaje)
 .enter()
 .append('rect')
 .attr('X', (d) => x (d.štítok))
 .attr('y', (d) => y (d.hodnota))
 .attr('šírka', x.bandwidth())
 .attr('výška', (d) => výška - y (d.hodnota))
 .attr('fill', '#007bff');
 }, [údaje]);
vrátiť (
400}>
 {/* sem idú osi */}
 </svg>
 );
}
exportpredvolená Stĺpcový graf;

Tento kód definuje a Stĺpcový graf komponent, ktorý akceptuje a údajov prop v predchádzajúcom úryvku kódu. Volá to useRef háčik na vytvorenie odkazu na komponent SVG, ktorý ho použije na nakreslenie obrysu.

Potom vykreslí pruhy grafu a definuje mierky pomocou háčik useEffect()., ktorý mapuje hodnoty údajov na súradnice obrazovky.

6. Pridanie funkcií v reálnom čase pomocou WebSockets

Implementácia WebSockets vytvára plne funkčnú obojsmernú cestu, ktorá umožňuje nepretržitú komunikáciu medzi klientom a serverom. Umožňujú Reactu pridávať nepretržitú užitočnosť do webových aplikácií, ako sú napríklad diskusné fóra, živé aktualizácie a upozornenia.

WebSockets používate s React nasledujúcim spôsobom:

importovať Reaguj, { useState, useEffect } od'reagovať';
importovať io od'socket.io-client';
funkciuChatroom() {
konšt [messages, setMessages] = useState([]);
konšt [inputValue, setInputValue] = useState('');
konšt zásuvka = io(' http://localhost: 3001');
 useEffect(() => {
 socket.on('správa', (správa) => {
 setMessages([...správy, správa]);
 });
 }, [správy, zásuvka]);
konšt handleSubmit = (e) => {
 e.preventDefault();
 socket.emit('správa', vstupná hodnota);
 setInputValue('');
 };
vrátiť (




 {messages.map((správa, t.j) => (
{správa}</li>
 ))}
 </ul>


 typ="text"
 value={inputValue}
 onChange={(e) => setInputValue (e.target.value)}
 />
"Predložiť">Odoslať</button>
 </form>
 </div>
 );
}
exportpredvolená Chatroom;

V tomto príklade definujete a Chatroom komponent, ktorý používa zásuvka.io-klient knižnicu na pripojenie k serveru WebSocket. Môžete použiť useState háčik, ktorý sa vysporiada s úpadkom správ a úctou k informáciám.

Po prijatí novej správy, useEffect hook zaregistruje poslucháča, ktorý spustí aktualizáciu udalosti správy v zozname správ. Na vymazanie a odoslanie vstupnej hodnoty pre správu udalosti existuje a rukoväťOdoslať funkciu.

Následne sa na obrazovke zobrazí formulár so vstupným poľom a tlačidlom, ako aj aktualizovaný zoznam správ.

Pri každom odoslaní formulára zavolajte na rukoväťOdoslať funkcia je nevyhnutná. Na doručenie správy na server táto metóda využíva soket.

7. Integrácia s React Native pre mobilný vývoj

React Local je systém na vytváranie lokálnych univerzálnych aplikácií pomocou React, ktoré sa pripájajú k podpore prenosných aplikácií pre iOS a Android fázy.

Pomocou integrácie React Native s Reactom môžete použiť komponentový dizajn a opakovane použiteľný kód Reactu naprieč mobilnými a webovými platformami. To znižuje cykly vývoja mobilných aplikácií a čas uvedenia na trh. React Native je populárny rámec pre vývoj natívnych mobilných aplikácií, ktorý využíva knižnicu React.

Predstavujeme dôležité programovanie a knižnice, ako napr Node.js, Odpovedzte Local CLI, a Xcode alebo Android Studio, je základom pre dizajnérov, ktorí sa zaoberajú iOS a Android samostatne. Napokon, jednoduché komponenty React Native umožňujú vývojárom vytvárať robustné a na funkcie bohaté mobilné aplikácie pre platformy iOS a Android.

Skombinujte React s inými technológiami

React je obľúbená a efektívna knižnica na vytváranie online aplikácií. React je skvelá možnosť na vytváranie používateľských rozhraní, no používa sa aj s inými technológiami na zvýšenie jeho možností.

Integráciou Reactu s týmito technológiami môžu vývojári vytvárať zložitejšie a pokročilejšie aplikácie, ktoré ponúkajú lepšiu používateľskú skúsenosť. React a jeho ekosystém nástrojov a knižníc pokrývajú všetko potrebné na vytvorenie základnej webovej stránky alebo komplexnej webovej aplikácie.