React je dobře známá knihovna JavaScript, kterou můžete použít k vytváření uživatelských rozhraní pro všestranné webové aplikace. React je adaptabilní a můžete jej kombinovat s dalšími technologiemi, abyste vytvořili výkonnější a efektivnější aplikace.

Naučte se, jak integrovat React s různými technologiemi, a získáte výhody z více zdrojů.

1. Reagovat + Redux

Redux je knihovna pro správu stavu používaná ve spojení s Reactem. Redux usnadňuje centralizovanou správu stavu aplikací. Při vytváření složitých aplikací s mnoha stavy spolupracují React a Redux dobře.

Zde je ilustrace toho, jak používat Redux s Reactem:

import Reagovat z'reagovat';
import { createStore } z'redux';
import { Poskytovatel } z'react-redux';
konst initialState = { počet: 0 };
funkcereduktor(stav = počátečníStav, akce) {
přepínač (action.type) {
pouzdro'PŘÍRŮSTEK':
vrátit se { počet: stav.počet + 1 };
pouzdro'DECREMENT':
vrátit se { počet: state.count - 1 };
výchozí:
vrátit se Stát;
 }
}





instagram viewer

konstimport Reagovat z'reagovat';
import { useQuery, gql } z'@apollo/client';
konst GET_USERS = gql`
 dotaz GetUsers {
 uživatelé {
 id
 název
 }
 }
;
funkceUživatelé() {
konst { načítání, chyba, data } = useQuery (GET_USERS);
-li (načítání) vrátit se<p>Načítání...p>;
-li (chyba) vrátit se<p>Chyba :(p>;
vrátit se (
store = createStore (reduktor);
funkceČelit() {
konst počet = useSelector(Stát => stát.počet);
konst odeslání = useDispatch();
vrátit se (


Počet: {count}</p>
 odeslání({ typ: 'PŘÍRŮSTEK' })}>+</button>
 odeslání({ typ: 'DECREMENT' })}>-</button>
 </div>
 );
}
funkceAplikace() {
vrátit se (


 </Provider>
 );
}
vývoznívýchozí Aplikace;

Tento příklad vytvoří úložiště Redux s počátečním stavem 0. Funkce redukce pak zvládá PŘÍRŮSTEK a SNÍŽENÍ operace. Kód používá useSelector a použijteDislat háčky pro získání průběžného počtu a odeslání aktivit jednotlivě.

Nakonec, aby byl obchod přístupný celé aplikaci, zabalte komponentu čítače do komponenty poskytovatele.

2. Vykreslování na straně serveru s Next.js

Next.js je vývojový rámec, který optimalizuje rychlost webu a SEO taktiky přenášením HTML klientům a používáním vykreslování komponent React na straně serveru.

Jeho výkonná sada nástrojů spolupracuje s Reactem a poskytuje výjimečný výkon a vysoké hodnocení ve vyhledávačích.

// pages/index.js
import Reagovat z'reagovat';
funkceDomov() {
vrátit se (


Ahoj světe!</h1>


Toto je komponenta React vykreslená serverem.</p>
 </div>
 );
}
vývoznívýchozí Domov;

V tomto modelu charakterizujete komponentu React nazvanou Domov. Next.js vytvoří statickou HTML stránku s obsahem této komponenty, když ji vykreslí na serveru. Když stránka přijme návštěvu od klienta, odešle HTML klientovi a hydratuje komponentu, což jí umožní fungovat jako dynamická komponenta React.

3. Načítání dat pomocí GraphQL

GraphQL je dotazovací jazyk pro API, který nabízí zdatnou, silnou a adaptabilní alternativu k REST. S GraphQL můžete získat data rychleji a rychleji aktualizovat uživatelské rozhraní.

Toto je ilustrace způsobu použití GraphQL s React:

import Reagovat z'reagovat';
import { useQuery, gql } z'@apollo/client';
konst GET_USERS = gql`
 dotaz GetUsers {
 uživatelé {
 id
 název
 }
 }
;
funkceUživatelé() {
konst { načítání, chyba, data } = useQuery (GET_USERS);
-li (načítání) vrátit se<p>Načítání...p>;
-li (chyba) vrátit se<p>Chyba :(p>;
vrátit se (


 {data.users.map(uživatel => (
{user.name}</li>
 ))}
 </ul>
 );
}
funkceAplikace() {
vrátit se (


Uživatelé</h1>

 </div>
 );
}
vývoznívýchozí Aplikace;

Tento model nazývá useQuery funkce z @apollo/klient knihovna, která přináší přehled klientů z programovacího rozhraní GraphQL. Seznam uživatelů se poté zobrazí v uživatelském rozhraní.

4. Stylování pomocí CSS-in-JS

CSS-in-JS je metoda založená na JavaScriptu pro stylování komponent React. Usnadňuje správu složitých šablon stylů a umožňuje psát styly v modulárním stylu založeném na komponentách.

Zde je ilustrace toho, jak používat CSS-in-JS s Reactem:

import Reagovat z'reagovat';
import stylizovaný z'styled-components';
konst Tlačítko = stylizované.tlačítko`
 barva pozadí: #007bff;
 barva: #fff;
 vycpávka: 10px 20px;
 okraj-poloměr: 5px;
 velikost písma: 16px;
 kurzor: ukazatel;
 &:hover {
 barva pozadí: #0069d9;
 }
;
funkceAplikace() {
vrátit se (


Klikněte na mě!</Button>
 </div>
 );
}
vývoznívýchozí Aplikace;

Tento příklad vytváří a stylizované tlačítko součást pomocí stylizovaný funkce. Definuje zvuk tlačítka, tón textu, tlumení, tažení čáry, rozměr textu a kurzor.

Je také definován stav přechodu, který změní barvu pozadí, když uživatel najede na tlačítko. Tlačítko je nakonec vykresleno pomocí komponenty React.

5. Integrace s D3 pro vizualizaci dat

D3 je knihovna JavaScript pro manipulaci a vizualizaci dat. Pomocí Reactu můžete vytvářet výkonné a interaktivní vizualizace dat. Ilustrace toho, jak používat D3 s Reactem, je následující:

import Reagovat, { useRef, useEffect } z'reagovat';
import * tak jako d3 z'd3';
funkceSloupcový graf({ data }) {
konst ref = useRef();
 useEffect(() => {
konst svg = d3.select (ref.current);
konst šířka = svg.attr('šířka');
konst výška = svg.attr('výška');
konst x = d3.scaleBand()
 .domain (data.map((d) => d.štítek))
 .rozsah([0, šířka])
 .padding(0.5);
konst y = d3.scaleLinear()
 .doména([0, d3.max (data, (d) => d.value)])
 .rozsah([výška, 0]);
 svg.selectAll('rect')
 .data (data)
 .enter()
 .připojit('rect')
 .attr('X', (d) => x (d.label))
 .attr('y', (d) => y (d.hodnota))
 .attr('šířka', x.bandwidth())
 .attr('výška', (d) => výška - y (d.hodnota))
 .attr('vyplnit', '#007bff');
 }, [data]);
vrátit se (
400}>
 {/* sem jdou osy */}
 </svg>
 );
}
vývoznívýchozí Sloupcový graf;

Tento kód definuje a Sloupcový graf komponenta, která přijímá a data prop v předchozím úryvku kódu. Volá to useRef háček pro vytvoření odkazu na komponentu SVG, která jej použije k nakreslení obrysu.

Poté vykreslí pruhy grafu a definuje měřítka pomocí háček useEffect()., který mapuje hodnoty dat na souřadnice obrazovky.

6. Přidání funkcí v reálném čase pomocí WebSockets

Implementace WebSockets vytváří plně funkční obousměrnou cestu, která umožňuje nepřetržitou komunikaci mezi klientem a serverem. Umožňují Reactu přidávat nepřetržitou užitečnost webovým aplikacím, jako jsou například diskusní fóra, živé aktualizace a varování.

S Reactem používáte WebSockets následujícím způsobem:

import Reagovat, { useState, useEffect } z'reagovat';
import io z'socket.io-client';
funkceChatovací místnost() {
konst [messages, setMessages] = useState([]);
konst [inputValue, setInputValue] = useState('');
konst zásuvka = io(' http://localhost: 3001');
 useEffect(() => {
 socket.on('zpráva', (zpráva) => {
 setMessages([...zprávy, zpráva]);
 });
 }, [zprávy, zásuvka]);
konst handleSubmit = (E) => {
 e.preventDefault();
 zásuvka.emit('zpráva', inputValue);
 setInputValue('');
 };
vrátit se (




 {messages.map((zpráva, i) => (
{zpráva}</li>
 ))}
 </ul>


 typ="text"
 value={inputValue}
 onChange={(e) => setInputValue (e.target.value)}
 />
"Předložit">Odeslat</button>
 </form>
 </div>
 );
}
vývoznívýchozí Chatovací místnost;

V tomto příkladu definujete a Chatovací místnost komponenta, která používá zásuvka.io-klient knihovny pro připojení k serveru WebSocket. Můžete použít useState hák, který se vypořádá s nedostatkem zpráv a informační úctou.

Po obdržení nové zprávy, useEffect hook zaregistruje posluchače, aby spustil aktualizaci události zprávy v seznamu zpráv. Pro vymazání a odeslání vstupní hodnoty pro zprávu události existuje a handleSubmit funkce.

Následně se na obrazovce zobrazí jak formulář se vstupním polem a tlačítkem, tak i aktualizovaný seznam zpráv.

Při každém odeslání formuláře zavolejte na handleSubmit funkce je nevyhnutelná. K doručení zprávy na server tato metoda využívá soket.

7. Integrace s React Native pro mobilní vývoj

React Local je systém pro vytváření lokálních univerzálních aplikací pomocí React, které se připojují k propagaci přenosných aplikací pro iOS a Android fáze.

Pomocí integrace React Native s Reactem můžete použít komponentový design a opakovaně použitelný kód Reactu napříč mobilními a webovými platformami. Tím se zkracují cykly vývoje mobilních aplikací a doba uvedení na trh. React Native je populární framework pro vývoj nativních mobilních aplikací, který využívá knihovnu React.

Představení životně důležitého programování a knihoven, jako Node.js, Odpovědět Local CLI, a Xcode nebo Android Studio, je zásadní pro designéry, kteří se zabývají iOS a Androidem samostatně. A konečně, jednoduché komponenty React Native umožňují vývojářům vytvářet robustní a na funkce bohaté mobilní aplikace pro platformy iOS a Android.

Kombinujte React s dalšími technologiemi

React je oblíbená a efektivní knihovna pro vytváření online aplikací. React je skvělá možnost pro vytváření uživatelských rozhraní, ale používá se i s jinými technologiemi pro zvýšení jeho schopností.

Integrací Reactu s těmito technologiemi mohou vývojáři vytvářet složitější a pokročilejší aplikace, které nabízejí lepší uživatelskou zkušenost. React a jeho ekosystém nástrojů a knihoven pokrývají vše potřebné k vytvoření základní webové stránky nebo komplexní webové aplikace.