React is een bekende JavaScript-bibliotheek die u kunt gebruiken om UI's te maken voor veelzijdige webapplicaties. React is aanpasbaar en je kunt het combineren met andere technologieën om krachtigere en effectievere apps te maken.

Leer hoe u React kunt integreren met verschillende technologieën en profiteer van meerdere bronnen.

1. Reageren + Redux

Redux is een staatsbeheerbibliotheek die wordt gebruikt in combinatie met React. Redux maakt gecentraliseerd applicatiestatusbeheer mogelijk. Bij het bouwen van complexe applicaties met veel statussen werken React en Redux goed samen.

Hier is een illustratie van het gebruik van Redux met React:

importeren Reageer van'Reageer';
importeren { createStore } van'redux';
importeren { Aanbieder } van'reageer-redux';
const beginStatus = { graaf: 0 };
functieverloopstuk(state = initialState, actie) {
schakelaar (actie type) {





instagram viewer

geval'VERHOGING':
opbrengst { graaf: staat.telling + 1 };
geval'VERMINDERING':
opbrengst { graaf: state.count - 1 };
standaard:
opbrengst staat;
 }
}

constimporteren Reageer van'Reageer';
importeren {gebruikQuery, gql} van'@apollo/klant';
const GET_USERS = gql`
 vraag GetUsers {
 gebruikers {
 ID kaart
 naam
 }
 }
;
functieGebruikers() {
const { laden, fout, data } = useQuery (GET_USERS);
als (bezig met laden) opbrengst<P>Bezig met laden...P>;
als (fout) opbrengst<P>Fout :(P>;
opbrengst (
store = createStore (verkleiner);
functieBalie() {
const aantal = gebruikSelector(staat => staat.telling);
const verzending = useDispatch();
opbrengst (


Tellen: {count}</p>
 verzenden({ type: 'VERHOGING' })}>+</button>
 verzenden({ type: 'VERMINDERING' })}>-</button>
 </div>
 );
}
functieapp() {
opbrengst (


 </Provider>
 );
}
exporterenstandaard App;

In dit voorbeeld wordt een Redux-winkel gemaakt met een beginstatus van 0. Een reducer-functie verwerkt vervolgens de VERHOGING En VERLAGING activiteiten. De code maakt gebruik van de gebruikSelector En gebruikVerzending hooks om de lopende telling te krijgen en de activiteiten afzonderlijk te verzenden.

Om de winkel tot slot toegankelijk te maken voor de hele applicatie, wikkelt u de tellercomponent in de providercomponent.

2. Server-side weergave met Next.js

Next.js is een ontwikkelraamwerk dat de snelheid en snelheid van websites optimaliseert SEO tactieken door HTML naar klanten te verzenden en te gebruiken server-side weergave van React-componenten.

De krachtige toolset werkt samen met React en biedt uitzonderlijke prestaties en hoge posities in zoekmachines.

// pagina's/index.js
importeren Reageer van'Reageer';
functieThuis() {
opbrengst (


Hallo wereld!</h1>


Dit is een door de server gerenderde React-component.</p>
 </div>
 );
}
exporterenstandaard Thuis;

In dit model karakteriseer je een React component genaamd Thuis. Next.js maakt een statische HTML-pagina met de inhoud van deze component wanneer deze op de server wordt weergegeven. Wanneer de pagina een bezoek van de klant ontvangt, stuurt deze de HTML naar de klant en hydrateert de component, waardoor deze kan functioneren als een dynamische React-component.

3. Gegevens ophalen met GraphQL

GraphQL is een querytaal voor API's die een bekwaam, sterk en aanpasbaar alternatief biedt voor REST. Met GraphQL kunt u sneller gegevens verkrijgen en de gebruikersinterface sneller bijwerken.

Dit is een illustratie van de manier om GraphQL met React te gebruiken:

importeren Reageer van'Reageer';
importeren {gebruikQuery, gql} van'@apollo/klant';
const GET_USERS = gql`
 vraag GetUsers {
 gebruikers {
 ID kaart
 naam
 }
 }
;
functieGebruikers() {
const { laden, fout, data } = useQuery (GET_USERS);
als (bezig met laden) opbrengst<P>Bezig met laden...P>;
als (fout) opbrengst<P>Fout :(P>;
opbrengst (


 {gegevens.gebruikers.map(gebruiker => (
{gebruikersnaam}</li>
 ))}
 </ul>
 );
}
functieapp() {
opbrengst (


Gebruikers</h1>

 </div>
 );
}
exporterenstandaard App;

Dit model noemt de gebruikQuery functie uit de @apollo/klant bibliotheek om het overzicht van clients uit de GraphQL-programmeerinterface te halen. De gebruikerslijst wordt vervolgens weergegeven in de gebruikersinterface.

4. Styling met CSS-in-JS

CSS-in-JS is een op JavaScript gebaseerde methode voor het stylen van React-componenten. Het maakt het eenvoudiger om complexe stylesheets te beheren en stelt u in staat stijlen te schrijven in een modulaire en op componenten gebaseerde stijl.

Hier is een illustratie van het gebruik van CSS-in-JS met React:

importeren Reageer van'Reageer';
importeren gestileerd van'stijl-componenten';
const Knop = gestileerde.knop`
 Achtergrond kleur: #007bff;
 kleur: #fff;
 opvulling: 10px 20px;
 border-radius: 5px;
 lettertypegrootte: 16px;
 cursor: aanwijzer;
 &: zweef {
 Achtergrond kleur: #0069d9;
 }
;
functieapp() {
opbrengst (


Klik mij!</Button>
 </div>
 );
}
exporterenstandaard App;

Dit voorbeeld maakt een gestileerde knop onderdeel met behulp van de gestileerd functie. Het definieert de ervaringstoon, teksttoon, demping, lijnveeg, tekstdimensie en cursor van de knop.

Er is ook een zweefstatus gedefinieerd die de achtergrondkleur verandert wanneer de gebruiker over de knop beweegt. De knop wordt uiteindelijk weergegeven met behulp van een React-component.

5. Integratie met D3 voor gegevensvisualisatie

D3 is een JavaScript-bibliotheek voor gegevensmanipulatie en visualisatie. Met React maak je krachtige en interactieve datavisualisaties. Een illustratie van het gebruik van D3 met React is als volgt:

importeren Reageer, { useRef, useEffect } van'Reageer';
importeren * als d3 van'd3';
functieStaafdiagram({ gegevens }) {
const ref = gebruikRef();
 gebruikEffect(() => {
const svg = d3.select (ref.stroom);
const breedte = svg.attr('breedte');
const hoogte = svg.attr('hoogte');
const x = d3.schaalBand()
 .domein (data.map((D) => d.label))
 .bereik([0, breedte])
 .opvulling(0.5);
const y = d3.schaalLineair()
 .domein([0, d3.max (gegevens, (d) => d.waarde)])
 .bereik([hoogte, 0]);
 svg.selectAll('rect')
 .gegevens (gegevens)
 .binnenkomen()
 .toevoegen('rect')
 .attr('X', (d) => x (d.label))
 .attr('j', (d) => y (d.waarde))
 .attr('breedte', x.bandbreedte())
 .attr('hoogte', (d) => hoogte - y (d.waarde))
 .attr('vullen', '#007bff');
 }, [gegevens]);
opbrengst (
400}>
 {/* assen komen hier */}
 </svg>
 );
}
exporterenstandaard staafdiagram;

Deze code definieert een Staafdiagram onderdeel dat a accepteert gegevens prop in het vorige codefragment. Het noemt de gebruikRef hook om een ​​verwijzing te maken naar de SVG-component die deze zal gebruiken om de omtrek te tekenen.

Daarna worden de staven van de grafiek weergegeven en worden de schalen gedefinieerd met de gebruikEffect() haak, waarmee de waarden van de gegevens worden toegewezen aan de coördinaten van het scherm.

6. Realtime functionaliteit toevoegen met WebSockets

Het implementeren van WebSockets zorgt voor een volledig operationeel tweerichtingsverkeer dat continue communicatie tussen een client en server mogelijk maakt. Ze stellen React in staat om continu nut toe te voegen aan webapplicaties, bijvoorbeeld discussieborden, live updates en waarschuwingen.

Je gebruikt WebSockets op de volgende manier met React:

importeren Reageren, { useState, useEffect } van'Reageer';
importeren io van'socket.io-client';
functieChat room() {
const [berichten, setBerichten] = useState([]);
const [invoerwaarde, setinvoerwaarde] = useState('');
const stopcontact = io(' http://localhost: 3001');
 gebruikEffect(() => {
 stopcontact.aan('bericht', (bericht) => {
 setMessages([...berichten, bericht]);
 });
 }, [berichten, socket]);
const handleSubmit = (e) => {
 e.preventDefault();
 socket.emit('bericht', invoerwaarde);
 setInputValue('');
 };
opbrengst (




 {berichten.map((bericht, ik) => (
{bericht}</li>
 ))}
 </ul>


 type="tekst"
 waarde={invoerwaarde}
 onChange={(e) => setInputValue (e.target.value)}
 />
"indienen">Verzenden</button>
 </form>
 </div>
 );
}
exporterenstandaard Chat room;

In dit voorbeeld definieert u een Chat room onderdeel dat gebruik maakt van de socket.io-client bibliotheek om verbinding te maken met een WebSocket-server. U kunt de gebruikState haak om te gaan met het overzicht van berichten en de informatiewaardering.

Na ontvangst van een nieuw bericht, de gebruikEffect hook registreert een luisteraar om een ​​update van een berichtgebeurtenis naar de berichtenlijst te activeren. Om een ​​invoerwaarde voor het gebeurtenisbericht te wissen en te verzenden, bestaat er een handvatVerzenden functie.

Vervolgens verschijnt zowel het formulier met invoerveld en knop als de bijgewerkte berichtenlijst op het scherm.

Bij het indienen van elk formulier, een beroep doen op de handvatVerzenden functie is onvermijdelijk. Om het bericht aan de server te bezorgen, maakt deze methode gebruik van de socket.

7. Integratie met React Native voor mobiele ontwikkeling

React Local is een systeem voor het bouwen van lokale universele applicaties met behulp van React, die verbinding maken om draagbare applicaties voor iOS- en Android-podia te promoten.

Door de integratie van React Native met React te gebruiken, kunt u het op componenten gebaseerde ontwerp en de herbruikbare code van React gebruiken op mobiele en webplatforms. Dit verkort de ontwikkelcycli van mobiele apps en verkort de time-to-market. React Native is een populair framework voor het ontwikkelen van native mobiele apps dat gebruik maakt van de React-bibliotheek.

Introductie van vitale programmering en bibliotheken, zoals Node.js, Reageer lokale CLI, En Xcode of Android-studio, is van fundamenteel belang voor ontwerpers die afzonderlijk met iOS en Android te maken hebben. Ten slotte stellen eenvoudige React Native-componenten ontwikkelaars in staat om robuuste en feature-rijke mobiele applicaties voor de iOS- en Android-platforms te maken.

Combineer React met andere technologieën

React is een populaire en effectieve bibliotheek voor het bouwen van online apps. React is een geweldige optie voor het maken van gebruikersinterfaces, maar het wordt ook gebruikt met andere technologieën om de mogelijkheden ervan te vergroten.

Door React met deze technologieën te integreren, kunnen ontwikkelaars complexere en geavanceerdere apps maken die een betere gebruikerservaring bieden. React en zijn ecosysteem van tools en bibliotheken dekken alles wat nodig is om een ​​eenvoudige website of een complexe webapplicatie te maken.