React er et velkjent JavaScript-bibliotek som du kan bruke til å lage brukergrensesnitt for allsidige nettapplikasjoner. React er tilpasningsdyktig og du kan kombinere den med andre teknologier for å lage kraftigere og mer effektive apper.

Lær hvordan du integrerer React med ulike teknologier, og du vil få fordeler fra flere kilder.

1. Reager + Redux

Redux er et statlig administrasjonsbibliotek som brukes i forbindelse med React. Redux forenkler sentralisert administrasjon av applikasjonstilstand. Når du bygger komplekse applikasjoner med mange tilstander, fungerer React og Redux godt sammen.

Her er en illustrasjon av hvordan du bruker Redux med React:

import Reagere fra'reagere';
import { createStore } fra'redux';
import { Forsørger } fra'react-redux';
konst initialState = { telle: 0 };
funksjonredusering(tilstand = initialState, handling) {
bytte om (action.type) {





instagram viewer

sak'INKREMENT':
komme tilbake { telle: state.count + 1 };
sak'DECREMENT':
komme tilbake { telle: state.count - 1 };
misligholde:
komme tilbake stat;
 }
}

konstimport Reagere fra'reagere';
import { useQuery, gql } fra'@apollo/klient';
konst GET_USERS = gql`
 spørring GetUsers {
 brukere {
 id
 Navn
 }
 }
;
funksjonBrukere() {
konst { loading, error, data } = useQuery (GET_USERS);
hvis (laster) komme tilbake<s>Laster inn...s>;
hvis (feil) komme tilbake<s>Feil :(s>;
komme tilbake (
store = createStore (redusering);
funksjonDisk() {
konst telle = brukVelger(stat => state.count);
konst dispatch = useDispatch();
komme tilbake (


Antall: {count}</p>
 sending({ type: 'INKREMENT' })}>+</button>
 sending({ type: 'DECREMENT' })}>-</button>
 </div>
 );
}
funksjonApp() {
komme tilbake (


 </Provider>
 );
}
eksportmisligholde App;

Dette eksemplet oppretter en Redux-butikk med en starttilstand på 0. En reduksjonsfunksjon håndterer da ØKES og NEDSAK operasjoner. Koden bruker useSelector og bruk Forsendelse hekter for å få den løpende tellingen og sende aktivitetene individuelt.

Til slutt, for å gjøre butikken tilgjengelig for hele applikasjonen, pakk inn tellerkomponenten i leverandørkomponenten.

2. Gjengivelse på serversiden med Next.js

Next.js er et utviklingsrammeverk som optimerer nettstedhastighet og SEO taktikk ved å overføre HTML til klienter og bruke server-side gjengivelse av React-komponenter.

Det kraftige verktøysettet fungerer sammen med React, og gir eksepsjonell ytelse og høy søkemotorrangering.

// pages/index.js
import Reagere fra'reagere';
funksjonHjem() {
komme tilbake (


Hei, verden!</h1>


Dette er en server-gjengitt React-komponent.</p>
 </div>
 );
}
eksportmisligholde Hjem;

I denne modellen karakteriserer du en React-komponent kalt Hjem. Next.js lager en statisk HTML-side med innholdet i denne komponenten når den gjengir den på serveren. Når siden mottar et besøk fra klienten, vil den sende HTML-en til klienten og hydrere komponenten, slik at den kan fungere som en dynamisk React-komponent.

3. Datahenting med GraphQL

GraphQL er et spørringsspråk for APIer som tilbyr et dyktig, sterkt og tilpasningsdyktig alternativ til REST. Med GraphQL kan du få data raskere og oppdatere brukergrensesnittet raskere.

Dette er en illustrasjon av måten å bruke GraphQL med React på:

import Reagere fra'reagere';
import { useQuery, gql } fra'@apollo/klient';
konst GET_USERS = gql`
 spørring GetUsers {
 brukere {
 id
 Navn
 }
 }
;
funksjonBrukere() {
konst { loading, error, data } = useQuery (GET_USERS);
hvis (laster) komme tilbake<s>Laster inn...s>;
hvis (feil) komme tilbake<s>Feil :(s>;
komme tilbake (


 {data.users.map(bruker => (
{user.name}</li>
 ))}
 </ul>
 );
}
funksjonApp() {
komme tilbake (


Brukere</h1>

 </div>
 );
}
eksportmisligholde App;

Denne modellen kaller useQuery funksjon fra @apollo/klient bibliotek for å bringe oversikten over klienter fra GraphQL-programmeringsgrensesnittet. Brukerlisten vises deretter i brukergrensesnittet.

4. Styling med CSS-in-JS

CSS-in-JS er en JavaScript-basert metode for styling av React-komponenter. Det gjør det enklere å administrere komplekse stilark og lar deg skrive stiler i en modulær og komponentbasert stil.

Her er en illustrasjon av hvordan du bruker CSS-in-JS med React:

import Reagere fra'reagere';
import stylet fra"stilte komponenter";
konst Knapp = stylet.knapp`
 bakgrunnsfarge: #007bff;
 farge: #fff;
 polstring: 10px 20px;
 border-radius: 5px;
 skriftstørrelse: 16px;
 markør: peker;
 &:sveve {
 bakgrunnsfarge: #0069d9;
 }
;
funksjonApp() {
komme tilbake (


Klikk meg!</Button>
 </div>
 );
}
eksportmisligholde App;

Dette eksemplet lager en stylet knapp komponent ved hjelp av stylet funksjon. Den definerer knappens opplevelsestone, teksttone, demping, linjesveip, tekstdimensjon og markør.

En hover-tilstand som endrer bakgrunnsfargen når brukeren holder musepekeren over knappen er også definert. Knappen gjengis til slutt ved hjelp av en React-komponent.

5. Integrering med D3 for datavisualisering

D3 er et JavaScript-bibliotek for datamanipulering og visualisering. Du kan lage kraftige og interaktive datavisualiseringer ved hjelp av React. En illustrasjon av hvordan du bruker D3 med React er som følger:

import Reager, { useRef, useEffect } fra'reagere';
import * som d3 fra'd3';
funksjonBarChart({ data }) {
konst ref = brukRef();
 useEffect(() => {
konst svg = d3.select (ref.current);
konst width = svg.attr('bredde');
konst høyde = svg.attr('høyde');
konst x = d3.scaleBand()
 .domene (data.map((d) => d.label))
 .område([0, bredde])
 .padding(0.5);
konst y = d3.scaleLinear()
 .domene([0, d3.max (data, (d) => d.verdi)])
 .range([høyde, 0]);
 svg.selectAll('riktig')
 .data (data)
 .Tast inn()
 .append('riktig')
 .attr('x', (d) => x (d.label))
 .attr('y', (d) => y (d.verdi))
 .attr('bredde', x.bandwidth())
 .attr('høyde', (d) => høyde - y (d.verdi))
 .attr('fylle', '#007bff');
 }, [data]);
komme tilbake (
400}>
 {/* økser går her */}
 </svg>
 );
}
eksportmisligholde BarChart;

Denne koden definerer en BarChart komponent som godtar en data prop i forrige kodebit. Den kaller brukRef krok for å lage en referanse til SVG-komponenten som vil bruke den til å tegne omrisset.

Etter det gjengir den søylene i diagrammet og definerer skalaene med useEffect() krok, som kartlegger verdiene til dataene til koordinatene på skjermen.

6. Legger til sanntidsfunksjonalitet med WebSockets

Implementering av WebSockets etablerer en fullt operativ toveis vei som muliggjør kontinuerlig kommunikasjon mellom en klient og server. De gjør det mulig for React å legge til kontinuerlig nytte til webapplikasjoner, for eksempel diskusjonsfora, liveoppdateringer og advarsler.

Du bruker WebSockets på følgende måte med React:

import Reager, { useState, useEffect } fra'reagere';
import io fra'socket.io-client';
funksjonSamtalerom() {
konst [messages, setMessages] = useState([]);
konst [inputValue, setInputValue] = useState('');
konst socket = io(' http://localhost: 3001');
 useEffect(() => {
 socket.on('beskjed', (melding) => {
 setMessages([...meldinger, melding]);
 });
 }, [meldinger, socket]);
konst handleSubmit = (e) => {
 e.preventDefault();
 socket.emit('beskjed', inputValue);
 setInputValue('');
 };
komme tilbake (




 {messages.map((melding, dvs) => (
{melding}</li>
 ))}
 </ul>


 type="tekst"
 verdi={inputValue}
 onChange={(e) => setInputValue (e.target.value)}
 />
"sende inn">Send</button>
 </form>
 </div>
 );
}
eksportmisligholde Samtalerom;

I dette eksemplet definerer du en Samtalerom komponent som bruker socket.io-klient bibliotek for å koble til en WebSocket-server. Du kan bruke useState krok for å håndtere oversikten over meldinger og informasjonsaktelsen.

Når du mottar en ny melding, useEffect hook registrerer en lytter for å utløse en meldingshendelsesoppdatering til meldingslisten. For å slette og sende en inngangsverdi for hendelsesmeldingen, finnes det en handleSend inn funksjon.

Deretter vil både skjemaet med inntastingsfelt og knapp samt oppdatert meldingsliste vises på skjermen.

Ved hver innsending av skjema, ringer du til handleSend inn funksjon er uunngåelig. For å levere meldingen til serveren bruker denne metoden kontakten.

7. Integrering med React Native for mobilutvikling

React Local er et system for å bygge lokale universelle applikasjoner ved hjelp av React, som kobles til for å fremme bærbare applikasjoner for iOS- og Android-stadier.

Ved å bruke integrasjonen av React Native med React, kan du bruke den komponentbaserte designen og den gjenbrukbare koden til React på tvers av mobil- og nettplattformer. Dette reduserer utviklingssyklusene for mobilapper og tiden til markedet. React Native er et populært rammeverk for å utvikle native mobilapper som bruker React-biblioteket.

Vi introduserer viktig programmering og biblioteker, som Node.js, Svar Lokal CLI, og Xcode eller Android Studio, er grunnleggende for designere som arbeider med iOS og Android hver for seg. Til slutt, enkle React Native-komponenter gjør det mulig for utviklere å lage robuste og funksjonsrike mobilapplikasjoner for iOS- og Android-plattformene.

Kombiner React med andre teknologier

React er et godt likt og effektivt bibliotek for å bygge nettapper. React er et flott alternativ for å lage brukergrensesnitt, men det brukes også sammen med andre teknologier for å øke mulighetene.

Ved å integrere React med disse teknologiene kan utviklere lage mer intrikate og avanserte apper som tilbyr en bedre brukeropplevelse. React og dets økosystem av verktøy og biblioteker dekker alt som er nødvendig for å lage et grunnleggende nettsted eller en kompleks nettapplikasjon.