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 plus efficaces.
Apprenez à intégrer React à diverses technologies et vous obtiendrez des avantages de sources multiples.
1. React + 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 construction d’applications complexes avec de nombreux états, React et Redux fonctionnent bien ensemble.
Voici une illustration de l’utilisation de Redux avec React :
import React from 'react';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
const initialState = { count: 0 };
function reducer(state = initialState, action) {
switch (action.type) {
case 'INCREMENT':
return { count: state.count + 1 };
case 'DECREMENT':
return { count: state.count - 1 };
default:
return state;
}
}
const import React from 'react';
import { useQuery, gql } from '@apollo/client';
const GET_USERS = gql`
query GetUsers {
users {
id
name
}
}
;
function Users() {
const { loading, error, data } = useQuery(GET_USERS);
if (loading) return <p>Loading...</p>;
if (error) return <p>Error :(</p>;
return (
store = createStore(reducer);
function Counter() {
const count = useSelector(state => state.count);
const dispatch = useDispatch();
return (
<div>
<p>Count: {count}</p>
<button onClick={() => dispatch({ type: 'INCREMENT' })}>+</button>
<button onClick={() => dispatch({ type: 'DECREMENT' })}>-</button>
</div>
);
}
function App() {
return (
<Provider store={store}>
<Counter />
</Provider>
);
}
export default App; Cet exemple crée un magasin Redux avec un état initial de 0. Une fonction de réduction traite ensuite le INCREMENT et DÉCRYPTAGE opérations. Le code utilise le useSelector et useDispatch 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, enveloppez 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 des sites web et la qualité de l’affichage. SEO tactique en transmettant du HTML aux clients et en utilisant le rendu côté serveur des composants React.
Son puissant ensemble d’outils fonctionne aux côtés de React, offrant des performances exceptionnelles et un classement élevé dans les moteurs de recherche.
// pages/index.js
import React from 'react';
function Home() {
return (
<div>
<h1>Hello, World!</h1>
<p>This is a server-rendered React component.</p>
</div>
);
}
export default Home; Dans ce modèle, vous caractérisez un composant React appelé Accueil. 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, il envoie le HTML au client et hydrate le composant, ce qui lui permet 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 efficace, solide et adaptable à REST. Avec GraphQL, vous pouvez obtenir des données plus rapidement et mettre à jour l’interface utilisateur plus rapidement.
Voici une illustration de la manière d’utiliser GraphQL avec React :
import React from 'react';
import { useQuery, gql } from '@apollo/client';
const GET_USERS = gql`
query GetUsers {
users {
id
name
}
}
;
function Users() {
const { loading, error, data } = useQuery(GET_USERS);
if (loading) return <p>Loading...</p>;
if (error) return <p>Error :(</p>;
return (
<ul>
{data.users.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
}
function App() {
return (
<div>
<h1>Users</h1>
<Users />
</div>
);
}
export default App; Ce modèle appelle la fonction useQuery de la fonction @apollo/client pour obtenir la liste des clients à partir de l’interface de programmation GraphQL. La liste des utilisateurs est ensuite affichée dans l’interface utilisateur.
4. Styliser avec CSS-in-JS
CSS-in-JS est une méthode basée sur JavaScript pour styliser les composants React. Elle simplifie la gestion des feuilles de style complexes et vous permet d’écrire des styles de manière modulaire et basée sur les composants.
Voici une illustration de l’utilisation de CSS-in-JS avec React :
import React from 'react';
import styled from 'styled-components';
const Button = styled.button`
background-color: #007bff;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
&:hover {
background-color: #0069d9;
}
;
function App() {
return (
<div>
<Button>Click me!</Button>
</div>
);
}
export default App; Cet exemple crée une page bouton stylé à l’aide du composant stylé . Elle définit le ton de l’expérience du bouton, le ton du texte, l’amortissement, le balayage des lignes, 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égrer D3 pour la visualisation de données
D3 est une bibliothèque JavaScript de manipulation et de visualisation de données. Vous pouvez réaliser des visualisations de données puissantes et interactives à l’aide de React. Voici une illustration de l’utilisation de D3 avec React :
import React, { useRef, useEffect } from 'react';
import * as d3 from 'd3';
function BarChart({ data }) {
const ref = useRef();
useEffect(() => {
const svg = d3.select(ref.current);
const width = svg.attr('width');
const height = svg.attr('height');
const x = d3.scaleBand()
.domain(data.map((d) => d.label))
.range([0, width])
.padding(0.5);
const y = d3.scaleLinear()
.domain([0, d3.max(data, (d) => d.value)])
.range([height, 0]);
svg.selectAll('rect')
.data(data)
.enter()
.append('rect')
.attr('x', (d) => x(d.label))
.attr('y', (d) => y(d.value))
.attr('width', x.bandwidth())
.attr('height', (d) => height - y(d.value))
.attr('fill', '#007bff');
}, [data]);
return (
<svg ref={ref} width={400} height={400}>
{/* axes go here */}
</svg>
);
}
export default BarChart; Ce code définit un BarChart qui accepte un composant données dans l’extrait de code précédent. Il appelle la propriété useRef pour faire référence au composant SVG qui l’utilisera pour dessiner le contour.
Ensuite, il rend les barres du graphique et définit les échelles avec le hook useEffect(), qui fait correspondre les valeurs des données aux coordonnées de l’écran.
6. Ajouter des fonctionnalités en temps réel avec les WebSockets
La mise en œuvre de WebSockets établit une voie bidirectionnelle pleinement opérationnelle qui permet une communication continue entre un client et un serveur. Elles permettent à React d’ajouter une utilité continue aux applications web, par exemple aux forums de discussion, aux mises à jour en direct et aux avertissements.
Vous utilisez les WebSockets de la manière suivante avec React :
import React, { useState, useEffect } from 'react';
import io from 'socket.io-client';
function ChatRoom() {
const [messages, setMessages] = useState([]);
const [inputValue, setInputValue] = useState('');
const socket = io('http://localhost:3001');
useEffect(() => {
socket.on('message', (message) => {
setMessages([...messages, message]);
});
}, [messages, socket]);
const handleSubmit = (e) => {
e.preventDefault();
socket.emit('message', inputValue);
setInputValue('');
};
return (
<div>
<ul>
{messages.map((message, i) => (
<li key={i}>{message}</li>
))}
</ul>
<form onSubmit={handleSubmit}>
<input
type="text"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
/>
<button type="submit">Send</button>
</form>
</div>
);
}
export default ChatRoom; Dans cet exemple, vous définissez un Salon de discussion qui utilise le composant socket.io-client pour se connecter à un serveur WebSocket. Vous pouvez utiliser la bibliothèque useState crochet pour gérer la liste des messages et l’estime de l’information.
Lors de la réception d’un nouveau message, le useEffect hook enregistre un auditeur pour déclencher un événement de mise à jour de la liste des messages. Pour effacer et envoyer une valeur d’entrée pour le message d’événement, il existe une fonction handleSubmit 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.
À chaque soumission de formulaire, l’appel à la fonction handleSubmit est inévitable. Pour transmettre le message au serveur, cette méthode utilise le socket.
7. Intégrer React Native pour le développement mobile
React Local est un système de construction d’applications universelles locales à l’aide de React, qui se connectent pour promouvoir des applications portables pour les scènes iOS et Android.
Grâce à 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 permet de réduire les cycles de développement des applications mobiles et les délais de mise sur le marché. React Native est un cadre populaire pour le développement d’applications mobiles natives qui utilise la bibliothèque React.
Présentation de la programmation et des bibliothèques essentielles, telles que Node.js, Répondre au CLI localet Xcode ou Android Studioest fondamental pour les concepteurs qui travaillent avec iOS et Android séparément. Enfin, les composants simples de React Native permettent aux développeurs de créer des applications mobiles robustes et riches en fonctionnalités pour les plateformes iOS et Android.
Combiner React avec d’autres technologies
React est une bibliothèque très appréciée et efficace pour la création d’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 plus avancées qui offrent une meilleure expérience utilisateur. React et son écosystème d’outils et de bibliothèques couvrent tout ce qui est nécessaire pour créer un site web de base ou une application web complexe.
