L'une des forces de React est sa capacité à jouer avec les autres. Découvrez quelques-uns des meilleurs outils à intégrer au framework.

React est une bibliothèque JavaScript bien connue que vous pouvez utiliser pour créer des interfaces utilisateur pour des applications Web polyvalentes. React est adaptable et vous pouvez le combiner avec d'autres technologies pour créer des applications plus puissantes et efficaces.

Apprenez à intégrer React à diverses technologies et vous bénéficierez des avantages de plusieurs sources.

1. Réagir + Redux

Redux est une bibliothèque de gestion d'état utilisée conjointement avec React. Redux facilite la gestion centralisée de l'état des applications. Lors de la création d'applications complexes avec de nombreux états, React et Redux fonctionnent bien ensemble.

Voici une illustration de la façon d'utiliser Redux avec React :

importer Réagir depuis'réagir';
importer { créerStore } depuis'redux';
importer { Fournisseur } depuis'réagir-redux';
constante état initial = { 





instagram viewer


compter: 0 };
fonctionréducteur(état = état initial, action) {
changer (type d'action) {
cas'INCRÉMENT':
retour { compter: état.compte + 1 };
cas'DÉCRÉMENT':
retour { compter: état.compte - 1 };
défaut:
retour État;
 }
}


constanteimporter Réagir depuis'réagir';
importer { useQuery, gql } depuis'@apollon/client';
constante GET_USERS = gql`
 requête GetUsers {
 utilisateurs {
 identifiant
 nom
 }
 }
;
fonctionUtilisateurs() {
constante { chargement, erreur, données } = useQuery (GET_USERS);
si (chargement) retour<p>Chargement...p>;
si (erreur) retour<p>Erreur :(p>;
retour (
store = createStore (réducteur);
fonctionComptoir() {
constante compter = useSelector(État => state.count);
constante dispatch = useDispatch();
retour (


Compte: {count}</p>

Cet exemple crée un magasin Redux avec un état initial de 0. Une fonction de réduction gère alors la INCRÉMENT et DÉCRÉMENT opérations. Le code utilise le useSelector et utiliserDispatch crochets pour obtenir le décompte en cours et répartir les activités individuellement.

Enfin, pour rendre le magasin accessible à l'ensemble de l'application, encapsulez le composant compteur dans le composant fournisseur.

2. Rendu côté serveur avec Next.js

Next.js est un cadre de développement qui optimise la vitesse du site Web et référencement tactiques en transmettant HTML aux clients et en utilisant rendu côté serveur des composants React.

Son puissant ensemble d'outils fonctionne avec React, offrant des performances exceptionnelles et un classement élevé dans les moteurs de recherche.

// pages/index.js
importer Réagir depuis'réagir';
fonctionMaison() {
retour (


Bonjour, Monde! </h1>




Il s'agit d'un composant React rendu par le serveur.</p>
 </div>
 );
}
exporterdéfaut Maison;

Dans ce modèle, vous caractérisez un composant React appelé Maison. Next.js crée une page HTML statique avec le contenu de ce composant lorsqu'il le rend sur le serveur. Lorsque la page reçoit une visite du client, elle envoie le code HTML au client et hydrate le composant, lui permettant de fonctionner comme un composant React dynamique.

3. Récupération de données avec GraphQL

GraphQL est un langage de requête pour les API qui offre une alternative compétente, solide et adaptable à REST. Avec GraphQL, vous pouvez obtenir des données plus rapidement et mettre à jour l'interface utilisateur plus rapidement.

Ceci est une illustration de la façon d'utiliser GraphQL avec React :

importer Réagir depuis'réagir';
importer { useQuery, gql } depuis'@apollon/client';
constante GET_USERS = gql`
 requête GetUsers {
 utilisateurs {
 identifiant
 nom
 }
 }
;
fonctionUtilisateurs() {
constante { chargement, erreur, données } = useQuery (GET_USERS);
si (chargement) retour<p>Chargement...p>;
si (erreur) retour<p>Erreur :(p>;
retour (
    

     {data.users.map(utilisateur => (
  • {user.name}</li>
     ))}
     </ul>
     );
    }
    fonctionApplication() {
    retour (
    

    Utilisateurs</h1>

     </div>
     );
    }
    exporterdéfaut application ;
    

    

    •

Ce modèle appelle le useQuery fonction de la @apollon/client bibliothèque pour apporter la liste des clients de l'interface de programmation GraphQL. La liste des utilisateurs s'affiche alors dans l'interface utilisateur.

4. Style avec CSS-in-JS

CSS-in-JS est une méthode basée sur JavaScript pour styliser les composants React. Il simplifie la gestion des feuilles de style complexes et vous permet d'écrire des styles dans un style modulaire et basé sur des composants.

Voici une illustration de la façon d'utiliser CSS-in-JS avec React :

importer Réagir depuis'réagir';
importer stylé depuis'composants stylés';
constante Bouton = style.bouton`
 Couleur de l'arrière plan: #007bff ;
 couleur: #fff ;
 rembourrage: 10pixels 20px ;
 border-radius: 5px ;
 taille de police: 16px ;
 curseur: pointeur ;
 &: survolez {
 Couleur de l'arrière plan: #0069d9;
 }
;
fonctionApplication() {
retour (

Cet exemple crée un bouton stylé composant utilisant le stylé fonction. Il définit la tonalité d'expérience du bouton, la tonalité du texte, l'amorti, le balayage de ligne, la dimension du texte et le curseur.

Un état de survol qui modifie la couleur d'arrière-plan lorsque l'utilisateur survole le bouton est également défini. Le bouton est finalement rendu à l'aide d'un composant React.

5. Intégration avec D3 pour la visualisation des données

D3 est une bibliothèque JavaScript de manipulation et de visualisation de données. Vous pouvez créer des visualisations de données puissantes et interactives à l'aide de React. Voici une illustration de l'utilisation de D3 avec React :

importer Réagir, { useRef, useEffect } depuis'réagir';
importer * comme d3 depuis'd3';
fonctionDiagramme à bandes({ données }) {
constante ref = useRef();
 useEffet(() => {
constante svg = d3.select (réf.actuel);
constante largeur = svg.attr('largeur');
constante hauteur = svg.attr('hauteur');
constante x = d3.scaleBand()
 .domaine (data.map((d) => d.étiquette))
 .gamme([0, largeur])
 .rembourrage(0.5);
constante y = d3.scaleLinear()
 .domaine([0, d3.max (données, (d) => d.valeur)])
 .range([hauteur, 0]);
 svg.selectAll('rectifier')
 .data (données)
 .entrer()
 .ajouter('rectifier')
 .attr('X', (d) => x (d.étiquette))
 .attr('y', (d) => y (d.valeur))
 .attr('largeur', x.bande passante())
 .attr('hauteur', (d) => hauteur - y (d.value))
 .attr('remplir', '#007bff');
 }, [données]);
retour (
400} hauteur={400}>
 {/* les axes vont ici */}
 </svg>
 );
}
exporterdéfaut Diagramme à bandes;

Ce code définit un Diagramme à bandes composant qui accepte un données prop dans l'extrait de code précédent. Il appelle le useRef crochet pour faire référence au composant SVG qui l'utilisera pour dessiner le contour.

Après cela, il rend les barres du graphique et définit les échelles avec le crochet useEffect(), qui mappe les valeurs des données aux coordonnées de l'écran.

6. Ajout de fonctionnalités en temps réel avec WebSockets

La mise en œuvre de WebSockets établit une voie bidirectionnelle entièrement opérationnelle qui permet une communication continue entre un client et un serveur. Ils permettent à React d'ajouter une utilité continue aux applications Web, par exemple, les forums de discussion, les mises à jour en direct et les avertissements.

Vous utilisez WebSockets de la manière suivante avec React :

importer Réagir, { useState, useEffect } depuis'réagir';
importer io depuis'socket.io-client';
fonctionTchat() {
constante [messages, setMessages] = useState([]);
constante [inputValue, setInputValue] = useState('');
constante prise = io(' http://localhost: 3001');
 useEffet(() => {
 prise.on('message', (message) => {
 setMessages([...messages, message]);
 });
 }, [messages, socket]);
constante handleSubmit = (e) => {
 e.preventDefault();
 socket.emit('message', valeur d'entrée);
 setInputValue('');
 };
retour (


    

     {messages.map((message, je) => (
  • {message}/li>
     ))}
     </ul>
    

     taper="texte"
     valeur={inputValue}
     onChange={(e) => setInputValue (e.target.value)}
     />
    

    

    •

Dans cet exemple, vous définissez un Tchat composant qui utilise le socket.io-client bibliothèque pour se connecter à un serveur WebSocket. Vous pouvez utiliser le useState crochet pour faire face à l'épuisement des messages et l'estime de l'information.

A la réception d'un nouveau message, le utiliserEffet hook enregistre un écouteur pour déclencher une mise à jour d'événement de message dans la liste de messages. Pour effacer et envoyer une valeur d'entrée pour le message d'événement, il existe un gérerSoumettre fonction.

Par la suite, le formulaire avec un champ de saisie et un bouton ainsi que la liste de messages mise à jour s'afficheront à l'écran.

A chaque soumission de formulaire, faire appel au gérerSoumettre fonction est inévitable. Pour livrer le message au serveur, cette méthode utilise le socket.

7. Intégration avec React Native pour le développement mobile

React Local est un système permettant de créer des applications universelles locales à l'aide de React, qui se connectent pour promouvoir des applications portables pour les étapes iOS et Android.

En utilisant l'intégration de React Native avec React, vous pouvez utiliser la conception basée sur les composants et le code réutilisable de React sur les plateformes mobiles et Web. Cela réduit les cycles de développement d'applications mobiles et le temps de mise sur le marché. React Native est un framework populaire pour le développement d'applications mobiles natives qui utilise la bibliothèque React.

Présentation de la programmation et des bibliothèques vitales, comme Node.js, Répondre à la CLI locale, et Code X ou Studio Android, est fondamental pour les concepteurs qui traitent iOS et Android séparément. Enfin, de simples composants React Native permettent aux développeurs de créer des applications mobiles robustes et riches en fonctionnalités pour les plates-formes iOS et Android.

Combinez React avec d'autres technologies

React est une bibliothèque appréciée et efficace pour créer des applications en ligne. React est une excellente option pour créer des interfaces utilisateur, mais il est également utilisé avec d'autres technologies pour augmenter ses capacités.

En intégrant React à ces technologies, les développeurs peuvent créer des applications plus complexes et avancées qui offrent une meilleure expérience utilisateur. React et son écosystème d'outils et de bibliothèques couvrent tout le nécessaire pour créer un site Web de base ou une application Web complexe.