React ist eine bekannte JavaScript-Bibliothek, mit der Sie Benutzeroberflächen für vielseitige Webanwendungen erstellen können. React ist anpassungsfähig und Sie können es mit anderen Technologien kombinieren, um leistungsfähigere und effektivere Apps zu erstellen.

Erfahren Sie, wie Sie React mit verschiedenen Technologien integrieren und profitieren Sie von mehreren Quellen.

1. Reagieren + Redux

Redux ist eine Zustandsverwaltungsbibliothek, die in Verbindung mit React verwendet wird. Redux erleichtert die zentralisierte Verwaltung des Anwendungsstatus. Beim Erstellen komplexer Anwendungen mit vielen Zuständen arbeiten React und Redux gut zusammen.

Hier ist eine Illustration, wie man Redux mit React verwendet:

importieren Reagieren aus'reagieren';
importieren { Store erstellen } aus'Redux';
importieren { Anbieter } aus'react-redux';
konst initialState = { 

instagram viewer

zählen: 0 };
FunktionReduzierer(Zustand = Anfangszustand, Aktion) {
schalten (Aktionstyp) {
Fall'ZUWACHS':
zurückkehren { zählen: state.count + 1 };
Fall'DEKREMENT':
zurückkehren { zählen: state.count - 1 };
Standard:
zurückkehren Zustand;
 }
}
konstimportieren Reagieren aus'reagieren';
importieren { useQuery, gql } aus'@apollo/kunde';
konst GET_USERS = gql`
 Abfrage GetUsers {
 Benutzer {
 Ausweis
 Name
 }
 }
;
FunktionBenutzer() {
konst {Laden, Fehler, Daten} = useQuery (GET_USERS);
Wenn (Wird geladen) zurückkehren<P>Wird geladen...P>;
Wenn (Fehler) zurückkehren<P>Fehler :(P>;
zurückkehren (
store = createStore (Reduzierer);
FunktionSchalter() {
konst count = useSelector(Zustand => state.count);
konst Versand = useDispatch ();
zurückkehren (


Anzahl: {Anzahl}</p>
 versenden({ Typ: 'ZUWACHS' })}>+</button>
 versenden({ Typ: 'DEKREMENT' })}>-</button>
 </div>
 );
}
FunktionApp() {
zurückkehren (


 </Provider>
 );
}
ExportStandard Anwendung;

Dieses Beispiel erstellt einen Redux-Speicher mit einem Anfangszustand von 0. Eine Reducer-Funktion übernimmt dann das ZUWACHS Und DEKREMENT Operationen. Der Code verwendet die useSelector Und Versand verwenden Hooks, um die laufende Zählung zu erhalten und die Aktivitäten einzeln zu versenden.

Um schließlich den Store für die gesamte Anwendung zugänglich zu machen, schließen Sie die Counter-Komponente in die Provider-Komponente ein.

2. Serverseitiges Rendern mit Next.js

Next.js ist ein Entwicklungsframework, das die Geschwindigkeit von Websites optimiert und SEO Taktiken durch die Übertragung von HTML an Clients und die Verwendung serverseitiges Rendern von React-Komponenten.

Sein leistungsstarkes Toolset arbeitet mit React zusammen und bietet außergewöhnliche Leistung und hohe Platzierungen in Suchmaschinen.

// Seiten/index.js
importieren Reagieren aus'reagieren';
FunktionHeim() {
zurückkehren (


Hallo, Welt!</h1>


Dies ist eine servergerenderte React-Komponente.</p>
 </div>
 );
}
ExportStandard Heim;

In diesem Modell charakterisieren Sie eine sogenannte React-Komponente Heim. Next.js erstellt eine statische HTML-Seite mit dem Inhalt dieser Komponente, wenn sie auf dem Server gerendert wird. Wenn die Seite einen Besuch vom Client erhält, sendet sie den HTML-Code an den Client und hydratisiert die Komponente, sodass sie als dynamische React-Komponente funktionieren kann.

3. Datenabruf mit GraphQL

GraphQL ist eine Abfragesprache für APIs, die eine kompetente, starke und anpassungsfähige Alternative zu REST bietet. Mit GraphQL können Sie Daten schneller abrufen und die Benutzeroberfläche schneller aktualisieren.

Dies ist eine Veranschaulichung der Verwendung von GraphQL mit React:

importieren Reagieren aus'reagieren';
importieren { useQuery, gql } aus'@apollo/kunde';
konst GET_USERS = gql`
 Abfrage GetUsers {
 Benutzer {
 Ausweis
 Name
 }
 }
;
FunktionBenutzer() {
konst {Laden, Fehler, Daten} = useQuery (GET_USERS);
Wenn (Wird geladen) zurückkehren<P>Wird geladen...P>;
Wenn (Fehler) zurückkehren<P>Fehler :(P>;
zurückkehren (


 {data.users.map(Benutzer => (
{Benutzername}</li>
 ))}
 </ul>
 );
}
FunktionApp() {
zurückkehren (


Benutzer</h1>

 </div>
 );
}
ExportStandard Anwendung;

Dieses Modell nennt die useQuery Funktion aus der @apollo/Kunde Bibliothek, um den Überblick über Clients aus der GraphQL-Programmierschnittstelle zu erhalten. Die Benutzerliste wird dann in der Benutzeroberfläche angezeigt.

4. Styling mit CSS-in-JS

CSS-in-JS ist eine JavaScript-basierte Methode zum Gestalten von React-Komponenten. Es vereinfacht die Verwaltung komplexer Stylesheets und lässt Sie Stile in einem modularen und komponentenbasierten Stil schreiben.

Hier ist eine Illustration, wie man CSS-in-JS mit React verwendet:

importieren Reagieren aus'reagieren';
importieren gestylt aus'styled-components';
konst Button = styled.button`
 Hintergrundfarbe: #007beste Freundin;
 Farbe: #fff;
 Polsterung: 10px 20Pixel;
 Grenzradius: 5Pixel;
 Schriftgröße: 16Pixel;
 Cursor: Zeiger;
 &:schweben {
 Hintergrundfarbe: #0069d9;
 }
;
FunktionApp() {
zurückkehren (


Klick mich!</Button>
 </div>
 );
}
ExportStandard Anwendung;

Dieses Beispiel erstellt eine gestylter Knopf Komponente mit der gestylt Funktion. Es definiert den Erlebniston, den Textton, die Dämpfung, die Linienführung, die Textdimension und den Cursor der Schaltfläche.

Ein Hover-Zustand, der die Hintergrundfarbe ändert, wenn der Benutzer mit der Maus über die Schaltfläche fährt, ist ebenfalls definiert. Die Schaltfläche wird schließlich mit einer React-Komponente gerendert.

5. Integration mit D3 zur Datenvisualisierung

D3 ist eine JavaScript-Bibliothek zur Datenmanipulation und -visualisierung. Mit React können Sie leistungsstarke und interaktive Datenvisualisierungen erstellen. Eine Illustration zur Verwendung von D3 mit React ist wie folgt:

importieren Reagieren, { useRef, useEffect } aus'reagieren';
importieren * als d3 aus'd3';
FunktionBalkendiagramm({ Daten }) {
konst ref = useRef();
 useEffect(() => {
konst svg = d3.select (ref.aktuell);
konst Breite = svg.attr ('Breite');
konst Höhe = svg.attr ('Höhe');
konst x = d3.scaleBand()
 .domain (data.map((D) => d.Etikett))
 .Bereich([0, Breite])
 .Polsterung(0.5);
konst y = d3.scaleLinear()
 .Domain([0, d3.max (Daten, (d) => d.Wert)])
 .range([Höhe, 0]);
 svg.selectAll('recht')
 .data (Daten)
 .eingeben()
 .append('recht')
 .attr('X', (d) => x (d.label))
 .attr('y', (d) => y (d.Wert))
 .attr('Breite', x.Bandbreite())
 .attr('Höhe', (d) => Höhe - y (d.Wert))
 .attr('füllen', '#007bff');
 }, [Daten]);
zurückkehren (
400}>
 {/* Achsen gehen hier */}
 </svg>
 );
}
ExportStandard Balkendiagramm;

Dieser Code definiert a Balkendiagramm Komponente, die a akzeptiert Daten prop im vorherigen Codeausschnitt. Es ruft die useRef Hook, um auf die SVG-Komponente zu verweisen, die sie zum Zeichnen des Umrisses verwendet.

Danach werden die Balken des Diagramms gerendert und die Skalen mit definiert useEffect()-Hook, das die Werte der Daten den Koordinaten des Bildschirms zuordnet.

6. Hinzufügen von Echtzeitfunktionen mit WebSockets

Durch die Implementierung von WebSockets wird ein voll funktionsfähiger bidirektionaler Weg geschaffen, der eine kontinuierliche Kommunikation zwischen einem Client und einem Server ermöglicht. Sie ermöglichen es React, Webanwendungen kontinuierlich nützlicher zu machen, z. B. Diskussionsforen, Live-Updates und Warnungen.

Sie verwenden WebSockets auf folgende Weise mit React:

importieren Reagieren, { useState, useEffect } aus'reagieren';
importieren io aus„socket.io-client“;
FunktionChatroom() {
konst [Nachrichten, setMessages] = useState([]);
konst [inputValue, setInputValue] = useState('');
konst Socket = io(' http://localhost: 3001');
 useEffect(() => {
 socket.on('Nachricht', (Nachricht) => {
 setMessages([...Nachrichten, Nachricht]);
 });
 }, [Nachrichten, Socket]);
konst handleSubmit = (e) => {
 e.preventDefault();
 socket.emit('Nachricht', eingegebener Wert);
 setInputValue('');
 };
zurückkehren (




 {nachrichten.map((Nachricht, ich) => (
{Nachricht}</li>
 ))}
 </ul>


 Typ="Text"
 Wert={Eingabewert}
 onChange={(e) => setInputValue (e.target.value)}
 />
"einreichen">Senden</button>
 </form>
 </div>
 );
}
ExportStandard Chatroom;

In diesem Beispiel definieren Sie a Chatroom Komponente, die die verwendet socket.io-client Bibliothek, um eine Verbindung zu einem WebSocket-Server herzustellen. Du kannst den... benutzen useState Haken, um mit dem Ablauf von Nachrichten und der Wertschätzung von Informationen umzugehen.

Beim Empfang einer neuen Nachricht wird die useEffect Hook registriert einen Listener, um eine Nachrichtenereignisaktualisierung in der Nachrichtenliste auszulösen. Um einen Eingabewert für die Ereignismeldung zu löschen und zu senden, gibt es a handleSubmit Funktion.

Anschließend erscheint sowohl das Formular mit Eingabefeld und Schaltfläche als auch die aktualisierte Meldungsliste auf dem Bildschirm.

Bei jeder Formularübermittlung wird der Aufruf an die handleSubmit Funktion ist unvermeidlich. Um die Nachricht an den Server zu übermitteln, nutzt diese Methode den Socket.

7. Integration mit React Native für die mobile Entwicklung

React Local ist ein System zum Erstellen lokaler universeller Anwendungen mit React, die eine Verbindung herstellen, um tragbare Anwendungen für iOS- und Android-Bühnen zu fördern.

Durch die Integration von React Native mit React können Sie das komponentenbasierte Design und den wiederverwendbaren Code von React auf mobilen und Webplattformen verwenden. Dies verkürzt die Entwicklungszyklen für mobile Apps und die Markteinführungszeit. React Native ist ein beliebtes Framework für die Entwicklung nativer mobiler Apps, das die React-Bibliothek nutzt.

Einführung in wichtige Programmierung und Bibliotheken, wie z Node.js, Reagieren Sie auf die lokale CLI, Und Xcode oder Android-Studio, ist von grundlegender Bedeutung für Designer, die sich getrennt mit iOS und Android befassen. Schließlich ermöglichen es einfache React Native-Komponenten Entwicklern, robuste und funktionsreiche mobile Anwendungen für die iOS- und Android-Plattformen zu erstellen.

Kombinieren Sie React mit anderen Technologien

React ist eine beliebte und effektive Bibliothek zum Erstellen von Online-Apps. React ist eine großartige Option zum Erstellen von Benutzeroberflächen, wird aber auch mit anderen Technologien verwendet, um seine Fähigkeiten zu erweitern.

Durch die Integration von React mit diesen Technologien können Entwickler kompliziertere und fortschrittlichere Apps erstellen, die eine bessere Benutzererfahrung bieten. React und sein Ökosystem aus Tools und Bibliotheken decken alles ab, was zum Erstellen einer einfachen Website oder einer komplexen Webanwendung erforderlich ist.