React to dobrze znana biblioteka JavaScript, której można używać do tworzenia interfejsów użytkownika dla wszechstronnych aplikacji internetowych. React jest elastyczny i można go łączyć z innymi technologiami, aby tworzyć potężniejsze i skuteczniejsze aplikacje.

Dowiedz się, jak zintegrować React z różnymi technologiami, a zyskasz korzyści z wielu źródeł.

1. Reaguj + Redux

Redux to biblioteka zarządzania stanem używana w połączeniu z React. Redux ułatwia scentralizowane zarządzanie stanem aplikacji. Podczas budowania złożonych aplikacji z wieloma stanami React i Redux dobrze ze sobą współpracują.

Oto ilustracja, jak używać Redux z Reactem:

import Reagować z'reagować';
import { utwórzSklep} z„podwójny”;
import { Dostawca } z„reakcja-redux”;
konst stan początkowy = { liczyć: 0 };
funkcjonowaćreduktor(stan = stan początkowy, akcja) {
przełącznik (Rodzaj działania) {





instagram viewer

sprawa'PRZYROST':
powrót { liczyć: stan.liczba + 1 };
sprawa„ZMNIEJSZENIE”:
powrót { liczyć: stan.liczba - 1 };
domyślny:
powrót państwo;
 }
}

konstimport Reagować z'reagować';
import { useQuery, gql } z'@apollo/klient';
konst GET_USERS = gql`
 zapytanie GetUsers {
 użytkownicy {
 ID
 nazwa
 }
 }
;
funkcjonowaćUżytkownicy() {
konst { ładowanie, błąd, dane } = useQuery (GET_USERS);
Jeśli (Ładowanie) powrót<P>Ładowanie...P>;
Jeśli (błąd) powrót<P>Błąd :(P>;
powrót (
store = createStore (reduktor);
funkcjonowaćLada() {
konst liczba = użyjSelektor(państwo => stan.liczba);
konst wysyłka = useDispatch();
powrót (


Liczba: {liczba}</p>
 załatwić({ typ: 'PRZYROST' })}>+</button>
 załatwić({ typ: „ZMNIEJSZENIE” })}>-</button>
 </div>
 );
}
funkcjonowaćAplikacja() {
powrót (


 </Provider>
 );
}
eksportdomyślny Aplikacja;

Ten przykład tworzy magazyn Redux ze stanem początkowym równym 0. Następnie funkcja reduktora obsługuje PRZYROST I SPADEK operacje. Kod wykorzystuje tzw użyjSelektora I użyjWysyłka hooks, aby uzyskać bieżące zliczanie i wysyłać działania indywidualnie.

Na koniec, aby sklep był dostępny dla całej aplikacji, opakuj komponent licznika w komponent dostawcy.

2. Renderowanie po stronie serwera za pomocą Next.js

Next.js to platforma programistyczna, która optymalizuje szybkość i szybkość witryny SEO taktykę poprzez przesyłanie HTML do klientów i używanie renderowanie komponentów React po stronie serwera.

Jego potężny zestaw narzędzi współpracuje z React, zapewniając wyjątkową wydajność i wysokie pozycje w wyszukiwarkach.

// strony/index.js
import Reagować z'reagować';
funkcjonowaćDom() {
powrót (


Witaj świecie!</h1>


To jest renderowany przez serwer komponent React.</p>
 </div>
 );
}
eksportdomyślny Dom;

W tym modelu scharakteryzujesz komponent React o nazwie Dom. Next.js tworzy statyczną stronę HTML z zawartością tego komponentu podczas renderowania jej na serwerze. Gdy strona zostanie odwiedzona przez klienta, wyśle ​​kod HTML do klienta i uwodni komponent, umożliwiając mu działanie jako dynamiczny komponent React.

3. Pobieranie danych za pomocą GraphQL

GraphQL to język zapytań dla interfejsów API, który oferuje sprawną, silną i elastyczną alternatywę dla REST. Dzięki GraphQL możesz szybciej uzyskiwać dane i szybciej aktualizować interfejs użytkownika.

To jest ilustracja sposobu użycia GraphQL z Reactem:

import Reagować z'reagować';
import { useQuery, gql } z'@apollo/klient';
konst GET_USERS = gql`
 zapytanie GetUsers {
 użytkownicy {
 ID
 nazwa
 }
 }
;
funkcjonowaćUżytkownicy() {
konst { ładowanie, błąd, dane } = useQuery (GET_USERS);
Jeśli (Ładowanie) powrót<P>Ładowanie...P>;
Jeśli (błąd) powrót<P>Błąd :(P>;
powrót (


 {data.users.map(użytkownik => (
{user.name}</li>
 ))}
 </ul>
 );
}
funkcjonowaćAplikacja() {
powrót (


Użytkownicy</h1>

 </div>
 );
}
eksportdomyślny Aplikacja;

Ten model nazywa użyjZapytanie funkcja od @apollo/klient biblioteka, aby wyświetlić listę klientów z interfejsu programowania GraphQL. Lista użytkowników jest następnie wyświetlana w interfejsie użytkownika.

4. Stylizacja za pomocą CSS-in-JS

CSS-in-JS to oparta na JavaScript metoda stylizowania komponentów React. Ułatwia zarządzanie złożonymi arkuszami stylów i umożliwia pisanie stylów w stylu modułowym i opartym na komponentach.

Oto ilustracja, jak używać CSS-in-JS z Reactem:

import Reagować z'reagować';
import stylizowany z„stylizowane komponenty”;
konst Przycisk = stylizowany przycisk`
 kolor tła: #007najlepsza przyjaciółka;
 kolor: #fff;
 wyściółka: 10piks 20piks;
 promień granicy: 5piks;
 rozmiar czcionki: 16piks;
 kursor: wskaźnik;
 &:unosić się {
 kolor tła: #0069d9;
 }
;
funkcjonowaćAplikacja() {
powrót (


Kliknij mnie!</Button>
 </div>
 );
}
eksportdomyślny Aplikacja;

Ten przykład tworzy plik przycisk w stylu składnik za pomocą stylizowany funkcjonować. Definiuje ton przycisku, ton tekstu, amortyzację, przeciągnięcie linii, wymiar tekstu i kursor.

Zdefiniowany jest również stan najechania kursorem, który zmienia kolor tła, gdy użytkownik najedzie kursorem na przycisk. Przycisk jest ostatecznie renderowany przy użyciu komponentu React.

5. Integracja z D3 w celu wizualizacji danych

D3 to biblioteka JavaScript do manipulacji i wizualizacji danych. Możesz tworzyć potężne i interaktywne wizualizacje danych za pomocą React. Ilustracja użycia D3 z Reactem jest następująca:

import Zareaguj, { useRef, useEffect } z'reagować';
import * Jak d3 z„d3”;
funkcjonowaćWykres słupkowy({ dane }) {
konst ref = useRef();
 użyjEfekt(() => {
konst svg = d3.select (ref.current);
konst szerokość = svg.attr('szerokość');
konst wysokość = svg.attr('wysokość');
konst x = d3.scaleBand()
 .domena (dane.map((D) => d. etykieta))
 .zakres([0, szerokość])
 .wyściółka(0.5);
konst y = d3.skalaLiniowa()
 .domena([0, d3.max (dane, (d) => wartość d)])
 .zakres([wysokość, 0]);
 svg.selectAll(„wyprostuj”)
 .dane (dane)
 .Wchodzić()
 .dodać(„wyprostuj”)
 .attr('X', (d) => x (d.etykieta))
 .attr(„y”, (d) => y (wartość d))
 .attr('szerokość', x.przepustowość())
 .attr('wysokość', (d) => wysokość - y (wartość d))
 .attr('wypełnić', „#007bff”);
 }, [dane]);
powrót (
400}>
 {/* osie idą tutaj */}
 </svg>
 );
}
eksportdomyślny Wykres słupkowy;

Ten kod definiuje a Wykres słupkowy składnik, który akceptuje a dane prop w poprzednim fragmencie kodu. Nazywa się użyjRef hook, aby utworzyć odniesienie do komponentu SVG, który użyje go do narysowania konturu.

Następnie renderuje słupki wykresu i definiuje skale za pomocą useEffect() hak, który odwzorowuje wartości danych na współrzędne ekranu.

6. Dodawanie funkcjonalności w czasie rzeczywistym za pomocą WebSockets

Wdrożenie WebSockets ustanawia w pełni operacyjną dwukierunkową ścieżkę, która umożliwia ciągłą komunikację między klientem a serwerem. Umożliwiają React ciągłe dodawanie użyteczności do aplikacji internetowych, na przykład forów dyskusyjnych, aktualizacji na żywo i ostrzeżeń.

Używasz WebSockets w następujący sposób z React:

import Reaguj, { useState, useEffect } z'reagować';
import ja z„socket.io-klient”;
funkcjonowaćPokój rozmów() {
konst [wiadomości, ustawWiadomości] = useState([]);
konst [wartośćwejściowa, ustawwartośćwejściowa] = useState('');
konst gniazdo = io(' http://localhost: 3001');
 użyjEfekt(() => {
 gniazdo.wł.('wiadomość', (wiadomość) => {
 setMessages([...wiadomości, wiadomość]);
 });
 }, [wiadomości, gniazdo]);
konst uchwyt Prześlij = (mi) => {
 e.preventDefault();
 gniazdo.emisja('wiadomość', wartość wejściowa);
 setInputValue('');
 };
powrót (




 {wiadomości.map((wiadomość, I) => (
{wiadomość}</li>
 ))}
 </ul>


 typ="tekst"
 wartość={wartość wejściowa}
 onChange={(e) => setInputValue (e.target.value)}
 />
"składać">Wyślij</button>
 </form>
 </div>
 );
}
eksportdomyślny pokój rozmów;

W tym przykładzie zdefiniujesz a Pokój rozmów składnik korzystający z klient socket.io biblioteka do łączenia się z serwerem WebSocket. Możesz użyć stan użycia hak, aby poradzić sobie z podsumowaniem wiadomości i szacunkiem informacji.

Po otrzymaniu nowej wiadomości, UżyjEfekt hak rejestruje nasłuchiwania, aby wyzwolić aktualizację zdarzenia wiadomości na liście wiadomości. Aby wyczyścić i wysłać wartość wejściową dla komunikatu o zdarzeniu, istnieje a uchwytPrześlij funkcjonować.

Następnie na ekranie pojawi się zarówno formularz z polem i przyciskiem wprowadzania, jak i zaktualizowana lista wiadomości.

Przy każdym przesłaniu formularza, wzywając uchwytPrześlij funkcja jest nieunikniona. Aby dostarczyć wiadomość do serwera, ta metoda wykorzystuje gniazdo.

7. Integracja z React Native dla programowania mobilnego

React Local to system do budowania lokalnych aplikacji uniwersalnych za pomocą React, które łączą się w celu promowania przenośnych aplikacji na iOS i Androida.

Korzystając z integracji React Native z React, możesz korzystać z opartego na komponentach projektu i kodu wielokrotnego użytku React na platformach mobilnych i internetowych. Zmniejsza to cykle tworzenia aplikacji mobilnych i czas wprowadzania ich na rynek. React Native to popularny framework do tworzenia natywnych aplikacji mobilnych, który korzysta z biblioteki React.

Przedstawiamy ważne programy i biblioteki, takie jak Node.js, Odpowiedz lokalnie CLI, I Xcode Lub Studio Androida, ma fundamentalne znaczenie dla projektantów zajmujących się osobno iOS i Androidem. Wreszcie, proste komponenty React Native umożliwiają programistom tworzenie solidnych i bogatych w funkcje aplikacji mobilnych na platformy iOS i Android.

Połącz React z innymi technologiami

React to popularna i wydajna biblioteka do tworzenia aplikacji internetowych. React jest świetną opcją do tworzenia interfejsów użytkownika, ale jest również używany z innymi technologiami w celu zwiększenia jego możliwości.

Integrując React z tymi technologiami, programiści mogą tworzyć bardziej skomplikowane i zaawansowane aplikacje, które zapewniają lepsze wrażenia użytkownika. React i jego ekosystem narzędzi i bibliotek obejmują wszystko, co jest potrzebne do stworzenia podstawowej strony internetowej lub złożonej aplikacji internetowej.