A React egy jól ismert JavaScript-könyvtár, amelyet sokoldalú webalkalmazások felhasználói felületének készítésére használhat. A React adaptálható, és más technológiákkal kombinálva hatékonyabb és hatékonyabb alkalmazásokat készíthet.

Tanulja meg, hogyan integrálhatja a Reactet különféle technológiákkal, és több forrásból is profitálhat.

1. React + Redux

A Redux egy állapotkezelési könyvtár, amelyet a Reacttel együtt használnak. A Redux megkönnyíti az alkalmazások állapotának központosított kezelését. Ha összetett, sok állapotú alkalmazásokat készít, a React és a Redux jól működik együtt.

Íme egy példa a Redux használatára a React-tal:

import Reagál tól től'reagál';
import { CreateStore } tól től"redux";
import { Szolgáltató } tól től'react-redux';
const kezdeti állapot = { számol: 0 };
funkciócsökkentő(állapot = kezdeti állapot, cselekvés) {
kapcsoló (akció.típus) {
ügy'NÖVEKEDÉS'





instagram viewer
:
Visszatérés { számol: állapot.szám + 1 };
ügy"CSÖKKENTÉS":
Visszatérés { számol: state.count - 1 };
alapértelmezett:
Visszatérés állapot;
 }
}

constimport Reagál tól től'reagál';
import { useQuery, gql } tól től"@apollo/kliens";
const GET_USERS = gql`
 lekérdezés GetUsers {
 felhasználók {
 id
 név
 }
 }
;
funkcióFelhasználók() {
const { betöltés, hiba, adatok } = useQuery (GET_USERS);
ha (Betöltés) Visszatérés<p>Betöltés...p>;
ha (hiba) Visszatérés<p>Hiba :(p>;
Visszatérés (
store = createStore (redukáló);
funkcióSzámláló() {
const count = useSelector(állapot => állapot.szám);
const dispatch = useDispatch();
Visszatérés (


Szám: {count}</p>
 Elküldés({ típus: 'NÖVEKEDÉS' })}>+</button>
 Elküldés({ típus: "CSÖKKENTÉS" })}>-</button>
 </div>
 );
}
funkcióApp() {
Visszatérés (


 </Provider>
 );
}
exportalapértelmezett App;

Ez a példa egy Redux tárolót hoz létre, amelynek kezdeti állapota 0. Ezután egy reduktor funkció kezeli a NÖVEKEDÉS és CSÖKKENTÉS tevékenységek. A kód a useSelector és useDispatch horgok a folyamatban lévő számláláshoz és a tevékenységek egyéni elküldéséhez.

Végül, hogy az áruház elérhető legyen a teljes alkalmazás számára, csomagolja be a számláló összetevőt a szolgáltató összetevőbe.

2. Szerveroldali renderelés a Next.js segítségével

A Next.js egy fejlesztői keretrendszer, amely optimalizálja a webhely sebességét és SEO taktikát a HTML ügyfeleknek való továbbításával és használatával a React összetevők szerveroldali megjelenítése.

Hatékony eszközkészlete a React mellett működik, kivételes teljesítményt és magas keresőmotor-rangsort biztosítva.

// pages/index.js
import Reagál tól től'reagál';
funkcióitthon() {
Visszatérés (


Szia Világ!</h1>


Ez egy szerver által előállított React komponens.</p>
 </div>
 );
}
exportalapértelmezett Itthon;

Ebben a modellben a React komponenst jellemezzük itthon. A Next.js statikus HTML-oldalt készít ezen összetevő tartalmával, amikor azt a szerveren rendereli. Amikor az oldal látogatást kap az ügyféltől, elküldi a HTML-kódot az ügyfélnek, és hidratálja az összetevőt, lehetővé téve, hogy dinamikus React komponensként működjön.

3. Adatlekérés GraphQL-lel

A GraphQL egy API-k lekérdezési nyelve, amely gyakorlott, erős és adaptálható alternatívát kínál a REST-hez. A GraphQL segítségével gyorsabban juthat adatokhoz, és gyorsabban frissítheti a felhasználói felületet.

Ez a GraphQL React-tal való használatának módját szemlélteti:

import Reagál tól től'reagál';
import { useQuery, gql } tól től"@apollo/kliens";
const GET_USERS = gql`
 lekérdezés GetUsers {
 felhasználók {
 id
 név
 }
 }
;
funkcióFelhasználók() {
const { betöltés, hiba, adatok } = useQuery (GET_USERS);
ha (Betöltés) Visszatérés<p>Betöltés...p>;
ha (hiba) Visszatérés<p>Hiba :(p>;
Visszatérés (


 {data.users.map(felhasználó => (
{felhasználó.név}</li>
 ))}
 </ul>
 );
}
funkcióApp() {
Visszatérés (


Felhasználók</h1>

 </div>
 );
}
exportalapértelmezett App;

Ez a modell az useQuery funkció a @apollo/kliens könyvtárat, hogy a GraphQL programozási felületről letöltse az ügyfeleket. A felhasználói lista ezután megjelenik a felhasználói felületen.

4. Styling a CSS-in-JS segítségével

A CSS-in-JS egy JavaScript-alapú módszer a React összetevők stílusának meghatározására. Egyszerűbbé teszi az összetett stíluslapok kezelését, és lehetővé teszi a stílusok moduláris és komponens alapú stílusban történő írását.

Íme egy példa a CSS-in-JS használatára a React-tal:

import Reagál tól től'reagál';
import stílusú tól től"stílusú összetevők";
const Gomb = stílusos.gomb`
 háttérszín: #007bff;
 szín: #fff;
 párnázás: 10px 20px;
 határsugár: 5px;
 betűméret: 16px;
 kurzor: pointer;
 &:hover {
 háttérszín: #0069d9;
 }
;
funkcióApp() {
Visszatérés (


Kattints rám!</Button>
 </div>
 );
}
exportalapértelmezett App;

Ez a példa létrehozza a stílusú gomb komponens segítségével stílusú funkció. Meghatározza a gomb élményhangját, szöveghangját, párnázását, vonalseprését, szövegméretét és kurzorát.

Meg van határozva egy lebegtetési állapot is, amely megváltoztatja a háttérszínt, amikor a felhasználó a gomb fölé viszi az egérmutatót. A gomb végül egy React komponens használatával jelenik meg.

5. Integráció a D3-mal az adatvizualizációhoz

A D3 egy adatmanipulációs és -vizualizációs JavaScript-könyvtár. A React segítségével hatékony és interaktív adatvizualizációkat készíthet. A D3 React-tal való használatának illusztrációja a következő:

import React, { useRef, useEffect } tól től'reagál';
import * mint d3 tól től'd3';
funkcióOszlopdiagram({ adat }) {
const ref = useRef();
 useEffect(() => {
const svg = d3.select (ref.current);
const szélesség = svg.attr('szélesség');
const magasság = svg.attr('magasság');
const x = d3.scaleBand()
 .domain (data.map((d) => d.címke))
 .hatótávolság([0, szélesség])
 .párnázás(0.5);
const y = d3.scaleLinear()
 .tartomány([0, d3.max (adat, (d) => d.érték)])
 .range([magasság, 0]);
 svg.selectAll('helyes')
 .data (adat)
 .belép()
 .mellékel('helyes')
 .attr('x', (d) => x (d.címke))
 .attr('y', (d) => y (d.érték))
 .attr('szélesség', x.bandwidth())
 .attr('magasság', (d) => magasság - y (d.érték))
 .attr('tölt', "#007bff");
 }, [adatok]);
Visszatérés (
400}>
 {/* a tengelyek ide mennek */}
 </svg>
 );
}
exportalapértelmezett Oszlopdiagram;

Ez a kód meghatározza a Oszlopdiagram komponens, amely elfogadja a adat prop az előző kódrészletben. Úgy hívja a useRef hook segítségével hivatkozhat arra az SVG komponensre, amely ezt fogja használni a körvonal megrajzolásához.

Ezt követően megjeleníti a diagram sávjait, és meghatározza a skálákat a useEffect() hook, amely leképezi az adatok értékeit a képernyő koordinátáira.

6. Valós idejű funkcionalitás hozzáadása a WebSockets segítségével

A WebSockets megvalósítása egy teljesen működőképes, kétirányú utat hoz létre, amely folyamatos kommunikációt tesz lehetővé a kliens és a szerver között. Lehetővé teszik a React számára, hogy folyamatosan hasznosítsák a webalkalmazásokat, például vitalapokat, élő frissítéseket és figyelmeztetéseket.

A WebSockets szolgáltatást a következő módon használja a React-tal:

import React, { useState, useEffect } tól től'reagál';
import io tól től'socket.io-client';
funkcióChat szoba() {
const [üzenetek, setMessages] = useState([]);
const [inputValue, setInputValue] = useState('');
const socket = io(' http://localhost: 3001');
 useEffect(() => {
 socket.on('üzenet', (üzenet) => {
 setMessages([...üzenetek, üzenet]);
 });
 }, [üzenetek, socket]);
const handleSubmit = (e) => {
 e.preventDefault();
 socket.emit('üzenet', inputValue);
 setInputValue('');
 };
Visszatérés (




 {messages.map((üzenet, i) => (
{üzenet}</li>
 ))}
 </ul>


 típus="szöveg"
 érték={inputValue}
 onChange={(e) => setInputValue (e.target.value)}
 />
"Beküldés">Küldés</button>
 </form>
 </div>
 );
}
exportalapértelmezett Chat szoba;

Ebben a példában definiálja a Chat szoba komponens, amely a socket.io-client könyvtárat a WebSocket szerverhez való csatlakozáshoz. Használhatja a useState horog, hogy megbirkózzon az üzenetek fogyásával és az információbecsüléssel.

Új üzenet érkezésekor a useEffect hook regisztrál egy figyelőt, hogy elindítsa az üzenetesemény frissítését az üzenetlistán. Az eseményüzenet bemeneti értékének törléséhez és küldéséhez létezik a handleSubmit funkció.

Ezt követően mind a beviteli mezőt és gombot tartalmazó űrlap, mind a frissített üzenetlista megjelenik a képernyőn.

Minden űrlap benyújtásakor felhívja a handleSubmit funkció elkerülhetetlen. Az üzenet kiszolgálóhoz történő eljuttatásához ez a módszer a socketet használja.

7. Integráció a React Native szolgáltatással a mobilfejlesztéshez

A React Local egy olyan rendszer, amely helyi univerzális alkalmazások készítésére szolgál a React segítségével, amelyek összekapcsolódnak az iOS és Android szakaszok hordozható alkalmazásainak népszerűsítésére.

A React Native és a React integrációjával a React komponens alapú tervezését és újrafelhasználható kódját használhatja mobil- és webes platformokon. Ez csökkenti a mobilalkalmazások fejlesztési ciklusait és a piacra kerülési időt. A React Native egy népszerű keretrendszer natív mobilalkalmazások fejlesztéséhez, amely a React könyvtárat használja.

Bemutatjuk a létfontosságú programozást és könyvtárakat, mint pl Node.js, Válasz a helyi CLI-re, és Xcode vagy Android Studio, alapvető fontosságú az iOS és Android rendszerrel külön-külön foglalkozó tervezők számára. Végül az egyszerű React Native összetevők lehetővé teszik a fejlesztők számára, hogy robusztus és funkciókban gazdag mobilalkalmazásokat hozzanak létre iOS és Android platformokhoz.

A React kombinálása más technológiákkal

A React egy népszerű és hatékony könyvtár az online alkalmazások készítéséhez. A React nagyszerű lehetőség felhasználói felületek létrehozására, de más technológiákkal is használják képességeinek növelésére.

A React ezen technológiákkal való integrálásával a fejlesztők bonyolultabb és fejlettebb alkalmazásokat hozhatnak létre, amelyek jobb felhasználói élményt kínálnak. A React és eszközeinek és könyvtárainak ökoszisztémája mindent lefed, ami egy alapwebhely vagy egy összetett webalkalmazás létrehozásához szükséges.