Home-theater-designers
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.
UTILISEZ LA VIDÉO DU JOUR FAITES DÉFILER POUR CONTINUER AVEC LE CONTENU
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 :
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 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 CE 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
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é 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 :
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 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 :
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 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 :
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 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 :
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 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.
combien coûte la famille premium spotify
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.