React este o bibliotecă JavaScript binecunoscută pe care o puteți folosi pentru a crea interfețe de utilizare pentru aplicații web versatile. React este adaptabil și îl puteți combina cu alte tehnologii pentru a crea aplicații mai puternice și mai eficiente.

Aflați cum să integrați React cu diverse tehnologii și veți obține beneficii din mai multe surse.

1. Reacționează + Redux

Redux este o bibliotecă de management de stat utilizată împreună cu React. Redux facilitează gestionarea centralizată a stării aplicației. Când construiți aplicații complexe cu multe stări, React și Redux funcționează bine împreună.

Iată o ilustrare a modului de utilizare a Redux cu React:

import Reacţiona din'reacţiona';
import { createStore } din„redux”;
import { Furnizor } din„react-redux”;
const initialState = { numara: 0 };
funcţiereductor(stare = initialState, actiune) 





instagram viewer
{
intrerupator (action.type) {
caz'CREŞTERE':
întoarcere { numara: stare.număr + 1 };
caz„DECREMENTARE”:
întoarcere { numara: stat.count - 1 };
Mod implicit:
întoarcere stat;
 }
}

constimport Reacţiona din'reacţiona';
import { useQuery, gql } din„@apollo/client”;
const GET_USERS = gql`
 interogați GetUsers {
 utilizatori {
 id
 Nume
 }
 }
;
funcţieUtilizatori() {
const { încărcare, eroare, date } = useQuery (GET_USERS);
dacă (Se încarcă) întoarcere<p>Se încarcă...p>;
dacă (eroare) întoarcere<p>Eroare :(p>;
întoarcere (
store = createStore (reductor);
funcţieTejghea() {
const count = useSelector(stat => stare.număr);
const dispatch = useDispatch();
întoarcere (


Count: {count}</p>
 expediere({ tip: 'CREŞTERE' })}>+</button>
 expediere({ tip: „DECREMENTARE” })}>-</button>
 </div>
 );
}
funcţieApp() {
întoarcere (


 </Provider>
 );
}
exportMod implicit Aplicație;

Acest exemplu creează un magazin Redux cu o stare inițială de 0. O funcție de reducere se ocupă apoi de CREŞTERE și DECREMENTAREA operațiuni. Codul folosește utilizați Selector și utilizațiDispatch cârlige pentru a obține numărătoarea în curs și a expedia activitățile individual.

În cele din urmă, pentru a face magazinul accesibil întregii aplicații, împachetați componenta contor în componenta furnizor.

2. Redare pe partea serverului cu Next.js

Next.js este un cadru de dezvoltare care optimizează viteza site-ului și SEO tactici prin transmiterea HTML către clienți și utilizarea redarea pe partea de server a componentelor React.

Setul său puternic de instrumente funcționează alături de React, oferind performanțe excepționale și clasamente ridicate în motoarele de căutare.

// pages/index.js
import Reacţiona din'reacţiona';
funcţieAcasă() {
întoarcere (


Salut, lume!</h1>


Aceasta este o componentă React redată de server.</p>
 </div>
 );
}
exportMod implicit Acasă;

În acest model, caracterizați o componentă React numită Acasă. Next.js realizează o pagină HTML statică cu conținutul acestei componente atunci când o redă pe server. Când pagina primește o vizită de la client, va trimite codul HTML către client și va hidrata componenta, permițându-i să funcționeze ca o componentă React dinamică.

3. Preluarea datelor cu GraphQL

GraphQL este un limbaj de interogare pentru API-uri care oferă o alternativă competentă, puternică și adaptabilă la REST. Cu GraphQL, puteți obține date mai rapid și puteți actualiza mai rapid interfața cu utilizatorul.

Aceasta este o ilustrare a modului de utilizare a GraphQL cu React:

import Reacţiona din'reacţiona';
import { useQuery, gql } din„@apollo/client”;
const GET_USERS = gql`
 interogați GetUsers {
 utilizatori {
 id
 Nume
 }
 }
;
funcţieUtilizatori() {
const { încărcare, eroare, date } = useQuery (GET_USERS);
dacă (Se încarcă) întoarcere<p>Se încarcă...p>;
dacă (eroare) întoarcere<p>Eroare :(p>;
întoarcere (


 {data.users.map(utilizator => (
{user.name}</li>
 ))}
 </ul>
 );
}
funcţieApp() {
întoarcere (


Utilizatori</h1>

 </div>
 );
}
exportMod implicit Aplicație;

Acest model numește useQuery funcția de la @apollo/client bibliotecă pentru a aduce lista clienților din interfața de programare GraphQL. Lista de utilizatori este apoi afișată în UI.

4. Stilizarea cu CSS-in-JS

CSS-in-JS este o metodă bazată pe JavaScript pentru stilarea componentelor React. Face mai simplă gestionarea foilor de stil complexe și vă permite să scrieți stiluri într-un stil modular și bazat pe componente.

Iată o ilustrare a modului de utilizare a CSS-in-JS cu React:

import Reacţiona din'reacţiona';
import stilizat din„componente-stilizate”;
const Button = stilat.button`
 culoare de fundal: #007bff;
 culoare: #fff;
 umplutura: 10px 20px;
 raza de frontieră: 5px;
 marimea fontului: 16px;
 cursor: pointer;
 &:hover {
 culoare de fundal: #0069d9;
 }
;
funcţieApp() {
întoarcere (


Click pe mine!</Button>
 </div>
 );
}
exportMod implicit Aplicație;

Acest exemplu creează un buton stilizat componentă folosind stilizat funcţie. Acesta definește tonul de experiență al butonului, tonul textului, amortizarea, maturarea liniilor, dimensiunea textului și cursorul.

De asemenea, este definită o stare de trecere care modifică culoarea de fundal atunci când utilizatorul trece cu mouse-ul peste buton. Butonul este redat în sfârșit folosind o componentă React.

5. Integrarea cu D3 pentru vizualizarea datelor

D3 este o bibliotecă JavaScript de manipulare și vizualizare a datelor. Puteți realiza vizualizări de date puternice și interactive folosind React. O ilustrare a modului de utilizare a D3 cu React este următoarea:

import Reacționează, { useRef, useEffect } din'reacţiona';
import * la fel de d3 din'd3';
funcţieDiagramă cu bare({ date }) {
const ref = useRef();
 useEffect(() => {
const svg = d3.select (ref.curent);
const lățime = svg.attr('lăţime');
const înălțime = svg.attr('înălţime');
const x = d3.scaleBand()
 .domain (data.map((d) => d.etichetă))
 .gamă([0, lățime])
 .padding(0.5);
const y = d3.scaleLinear()
 .domeniu([0, d3.max (date, (d) => d.valoare)])
 .gamă([înălțime, 0]);
 svg.selectAll("rect")
 .date (date)
 .introduce()
 .adăuga("rect")
 .attr('X', (d) => x (d.label))
 .attr('y', (d) => y (d.valoare))
 .attr('lăţime', x.bandwidth())
 .attr('înălţime', (d) => înălțime - y (d.valoare))
 .attr('completati', „#007bff”);
 }, [date]);
întoarcere (
400}>
 {/* topoarele merg aici */}
 </svg>
 );
}
exportMod implicit BarChart;

Acest cod definește a Diagramă cu bare componentă care acceptă a date prop în fragmentul de cod anterior. Se numeste utilizareRef cârlig pentru a face o referire la componenta SVG care o va folosi pentru a desena conturul.

După aceea, redă barele diagramei și definește scalele cu useEffect() cârlig, care mapează valorile datelor la coordonatele ecranului.

6. Adăugarea de funcționalități în timp real cu WebSockets

Implementarea WebSockets stabilește o cale bidirecțională complet operațională care permite comunicarea continuă între un client și un server. Acestea permit React să adauge utilitate continuă aplicațiilor web, de exemplu, forumuri de discuții, actualizări live și avertismente.

Utilizați WebSockets în felul următor cu React:

import Reacționează, { useState, useEffect } din'reacţiona';
import io din„socket.io-client”;
funcţieCameră de chat() {
const [mesaje, setMessages] = useState([]);
const [inputValue, setInputValue] = useState('');
const priză = io(' http://localhost: 3001');
 useEffect(() => {
 socket.on('mesaj', (mesaj) => {
 setMessages([...mesaje, mesaj]);
 });
 }, [mesaje, socket]);
const handleSubmit = (e) => {
 e.preventDefault();
 socket.emit('mesaj', inputValue);
 setInputValue('');
 };
întoarcere (




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


 tip="text"
 valoare={inputValue}
 onChange={(e) => setInputValue (e.target.value)}
 />
"Trimite">Trimite</button>
 </form>
 </div>
 );
}
exportMod implicit Cameră de chat;

În acest exemplu, definiți a Cameră de chat componentă care utilizează socket.io-client bibliotecă pentru a vă conecta la un server WebSocket. Puteți folosi useState cârlig pentru a face față derulării mesajelor și a stimei informaționale.

La primirea unui mesaj nou, useEffect hook înregistrează un ascultător pentru a declanșa o actualizare a unui eveniment de mesaj în lista de mesaje. Pentru a șterge și a trimite o valoare de intrare pentru mesajul de eveniment, există a handleSubmit funcţie.

Ulterior, pe ecran vor apărea atât formularul cu câmp și buton de introducere, cât și lista de mesaje actualizată.

Cu fiecare depunere a formularului, apelând la handleSubmit funcția este inevitabilă. Pentru a livra mesajul către server, această metodă folosește socket-ul.

7. Integrarea cu React Native pentru dezvoltarea mobilă

React Local este un sistem pentru construirea de aplicații universale locale folosind React, care se conectează pentru a promova aplicații portabile pentru etapele iOS și Android.

Folosind integrarea React Native cu React, puteți utiliza designul bazat pe componente și codul reutilizabil al React pe platformele mobile și web. Acest lucru reduce ciclurile de dezvoltare a aplicațiilor mobile și timpul de lansare pe piață. React Native este un cadru popular pentru dezvoltarea de aplicații mobile native care utilizează biblioteca React.

Vă prezentăm programarea vitală și bibliotecile, cum ar fi Node.js, Răspunde CLI local, și Xcode sau Android Studio, este fundamental pentru designerii care se ocupă separat de iOS și Android. În cele din urmă, componentele simple React Native permit dezvoltatorilor să creeze aplicații mobile robuste și bogate în funcții pentru platformele iOS și Android.

Combinați React cu alte tehnologii

React este o bibliotecă foarte apreciată și eficientă pentru construirea de aplicații online. React este o opțiune excelentă pentru crearea de interfețe cu utilizatorul, dar este folosit și cu alte tehnologii pentru a-și crește capacitățile.

Prin integrarea React cu aceste tehnologii, dezvoltatorii pot crea aplicații mai complexe și mai avansate care oferă o experiență mai bună pentru utilizator. React și ecosistemul său de instrumente și biblioteci acoperă tot ceea ce este necesar pentru a crea un site web de bază sau o aplicație web complexă.