React er et velkendt JavaScript-bibliotek, som du kan bruge til at lave brugergrænseflader til alsidige webapplikationer. React kan tilpasses, og du kan kombinere det med andre teknologier for at lave mere kraftfulde og effektive apps.

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

1. Reager + Redux

Redux er et statsadministrationsbibliotek, der bruges sammen med React. Redux letter centraliseret administration af applikationstilstande. Når du bygger komplekse applikationer med mange tilstande, fungerer React og Redux godt sammen.

Her er en illustration af, hvordan du bruger Redux med React:

importere Reagere fra'reagere';
importere { createStore } fra'redux';
importere { Udbyder } fra'react-redux';
konst initialState = { tælle: 0 };
fungerereducering(tilstand = initialState, handling) {
kontakt (action.type) {
sag'INKREMENT'





instagram viewer
:
Vend tilbage { tælle: state.count + 1 };
sag'DECREMENT':
Vend tilbage { tælle: state.count - 1 };
Standard:
Vend tilbage stat;
 }
}

konstimportere Reagere fra'reagere';
importere { useQuery, gql } fra'@apollo/klient';
konst GET_USERS = gql`
 forespørgsel GetUsers {
 brugere {
 id
 navn
 }
 }
;
fungereBrugere() {
konst { loading, error, data } = useQuery (GET_USERS);
hvis (Indlæser) Vend tilbage<s>Indlæser...s>;
hvis (fejl) Vend tilbage<s>Fejl :(s>;
Vend tilbage (
store = createStore (reducer);
fungereTæller() {
konst count = useSelector(stat => state.count);
konst dispatch = useDispatch();
Vend tilbage (


Antal: {count}</p>
 afsendelse({ type: 'INKREMENT' })}>+</button>
 afsendelse({ type: 'DECREMENT' })}>-</button>
 </div>
 );
}
fungereApp() {
Vend tilbage (


 </Provider>
 );
}
eksportStandard App;

Dette eksempel opretter et Redux-lager med en starttilstand på 0. En reduktionsfunktion håndterer så FORØG og NEDSÆTTELSE operationer. Koden bruger useSelector og brug Forsendelse kroge for at få den løbende optælling og afsende aktiviteterne individuelt.

Til sidst, for at gøre butikken tilgængelig for hele applikationen, skal du pakke tællerkomponenten ind i udbyderkomponenten.

2. Rendering på serversiden med Next.js

Next.js er en udviklingsramme, der optimerer hjemmesidehastighed og SEO taktik ved at overføre HTML til klienter og bruge server-side gengivelse af React komponenter.

Dets kraftfulde værktøjssæt arbejder sammen med React og giver enestående ydeevne og høje placeringer i søgemaskinerne.

// pages/index.js
importere Reagere fra'reagere';
fungereHjem() {
Vend tilbage (


Hej verden!</h1>


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

I denne model karakteriserer du en React-komponent kaldet Hjem. Next.js laver en statisk HTML-side med indholdet af denne komponent, når den gengiver den på serveren. Når siden modtager et besøg fra klienten, vil den sende HTML til klienten og hydrere komponenten, så den kan fungere som en dynamisk React-komponent.

3. Datahentning med GraphQL

GraphQL er et forespørgselssprog til API'er, der tilbyder et dygtigt, stærkt og tilpasningsdygtigt alternativ til REST. Med GraphQL kan du få data hurtigere og opdatere brugergrænsefladen hurtigere.

Dette er en illustration af måden at bruge GraphQL med React på:

importere Reagere fra'reagere';
importere { useQuery, gql } fra'@apollo/klient';
konst GET_USERS = gql`
 forespørgsel GetUsers {
 brugere {
 id
 navn
 }
 }
;
fungereBrugere() {
konst { loading, error, data } = useQuery (GET_USERS);
hvis (Indlæser) Vend tilbage<s>Indlæser...s>;
hvis (fejl) Vend tilbage<s>Fejl :(s>;
Vend tilbage (


 {data.users.map(bruger => (
{bruger.navn}</li>
 ))}
 </ul>
 );
}
fungereApp() {
Vend tilbage (


Brugere</h1>

 </div>
 );
}
eksportStandard App;

Denne model kalder useQuery funktion fra @apollo/klient bibliotek for at bringe en gennemgang af klienter fra GraphQL-programmeringsgrænsefladen. Brugerlisten vises derefter i brugergrænsefladen.

4. Styling med CSS-in-JS

CSS-in-JS er en JavaScript-baseret metode til styling af React-komponenter. Det gør det nemmere at administrere komplekse typografiark og lader dig skrive typografier i en modulær og komponentbaseret stil.

Her er en illustration af, hvordan man bruger CSS-in-JS med React:

importere Reagere fra'reagere';
importere stylet fra'stylede-komponenter';
konst Knap = stylet.knap`
 baggrundsfarve: #007bff;
 farve: #fff;
 polstring: 10px 20px;
 grænse-radius: 5px;
 skriftstørrelse: 16px;
 markør: pointer;
 &:hover {
 baggrundsfarve: #0069d9;
 }
;
fungereApp() {
Vend tilbage (


Klik på mig!</Button>
 </div>
 );
}
eksportStandard App;

Dette eksempel skaber en stylet knap komponent ved hjælp af stylet fungere. Den definerer knappens oplevelsestone, teksttone, dæmpning, linjesweep, tekstdimension og markør.

En svævetilstand, der ændrer baggrundsfarven, når brugeren svæver over knappen, er også defineret. Knappen gengives endelig ved hjælp af en React-komponent.

5. Integration med D3 til datavisualisering

D3 er et JavaScript-bibliotek for datamanipulation og visualisering. Du kan lave kraftfulde og interaktive datavisualiseringer ved hjælp af React. En illustration af, hvordan du bruger D3 med React, er som følger:

importere Reager, { useRef, useEffect } fra'reagere';
importere * som d3 fra'd3';
fungereSøjlediagram({ data }) {
konst ref = brugRef();
 useEffect(() => {
konst svg = d3.select (ref.current);
konst bredde = svg.attr('bredde');
konst højde = svg.attr('højde');
konst x = d3.scaleBand()
 .domæne (data.map((d) => d.label))
 .rækkevidde([0, bredde])
 .polstring(0.5);
konst y = d3.scaleLinear()
 .domæne([0, d3.max (data, (d) => d.værdi)])
 .range([højde, 0]);
 svg.selectAll('rigtigt')
 .data (data)
 .gå ind()
 .Tilføj('rigtigt')
 .attr('x', (d) => x (d.label))
 .attr('y', (d) => y (d.værdi))
 .attr('bredde', x.bandwidth())
 .attr('højde', (d) => højde - y (d.værdi))
 .attr('fylde', '#007bff');
 }, [data]);
Vend tilbage (
400}>
 {/* økser går her */}
 </svg>
 );
}
eksportStandard Søjlediagram;

Denne kode definerer en Søjlediagram komponent, der accepterer en data prop i det forrige kodestykke. Det kalder brugRef krog for at lave en reference til SVG-komponenten, der vil bruge den til at tegne omridset.

Derefter gengiver den søjlerne i diagrammet og definerer skalaerne med useEffect() hook, som kortlægger værdierne af dataene til skærmens koordinater.

6. Tilføjelse af realtidsfunktionalitet med WebSockets

Implementering af WebSockets etablerer en fuldt operationel tovejsvej, der muliggør kontinuerlig kommunikation mellem en klient og server. De gør det muligt for React at tilføje kontinuerlig anvendelighed til webapplikationer, for eksempel diskussionsforum, liveopdateringer og advarsler.

Du bruger WebSockets på følgende måde med React:

importere Reager, { useState, useEffect } fra'reagere';
importere io fra'socket.io-client';
fungereChatrum() {
konst [messages, setMessages] = useState([]);
konst [inputValue, setInputValue] = useState('');
konst socket = io(' http://localhost: 3001');
 useEffect(() => {
 socket.on('besked', (besked) => {
 setMessages([...meddelelser, besked]);
 });
 }, [meddelelser, socket]);
konst handleSubmit = (e) => {
 e.preventDefault();
 socket.emit('besked', inputValue);
 setInputValue('');
 };
Vend tilbage (




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


 type="tekst"
 værdi={inputValue}
 onChange={(e) => setInputValue (e.target.value)}
 />
"Indsend">Send</button>
 </form>
 </div>
 );
}
eksportStandard Chatrum;

I dette eksempel definerer du en Chatrum komponent, der bruger socket.io-klient bibliotek for at oprette forbindelse til en WebSocket-server. Du kan bruge useState krog til at håndtere oversigten over beskeder og informationsagtelsen.

Ved modtagelse af en ny besked, useEffect hook registrerer en lytter for at udløse en meddelelsesbegivenhedsopdatering til meddelelseslisten. For at slette og sende en inputværdi for hændelsesmeddelelsen findes der en handleSend fungere.

Efterfølgende vil både formularen med indtastningsfelt og knap samt den opdaterede beskedliste blive vist på skærmen.

Ved hver indsendelse af formularer skal du henvende dig til handleSend funktion er uundgåelig. For at levere beskeden til serveren gør denne metode brug af socket.

7. Integration med React Native til mobiludvikling

React Local er et system til at bygge lokale universelle applikationer ved hjælp af React, som forbinder for at fremme bærbare applikationer til iOS- og Android-stadier.

Ved at bruge integrationen af ​​React Native med React kan du bruge Reacts komponentbaserede design og genanvendelige kode på tværs af mobil- og webplatforme. Dette reducerer mobilapps udviklingscyklusser og tid til markedet. React Native er en populær ramme til udvikling af native mobilapps, der gør brug af React-biblioteket.

Introduktion af vital programmering og biblioteker, som f.eks Node.js, Svar Lokal CLI, og Xcode eller Android Studio, er grundlæggende for designere, der beskæftiger sig med iOS og Android separat. Endelig gør simple React Native-komponenter det muligt for udviklere at skabe robuste og funktionsrige mobilapplikationer til iOS- og Android-platformene.

Kombiner React med andre teknologier

React er et vellidt og effektivt bibliotek til at bygge online apps. React er en fantastisk mulighed for at skabe brugergrænseflader, men den bruges også sammen med andre teknologier for at øge dens muligheder.

Ved at integrere React med disse teknologier kan udviklere skabe mere indviklede og avancerede apps, der tilbyder en bedre brugeroplevelse. React og dets økosystem af værktøjer og biblioteker dækker alt, hvad der er nødvendigt for at skabe et grundlæggende websted eller en kompleks webapplikation.