React è una nota libreria JavaScript che puoi utilizzare per creare interfacce utente per applicazioni web versatili. React è adattabile e puoi combinarlo con altre tecnologie per creare app più potenti ed efficaci.

Scopri come integrare React con varie tecnologie e otterrai vantaggi da più fonti.

1. Reagisci + Redux

Redux è una libreria di gestione dello stato utilizzata insieme a React. Redux facilita la gestione centralizzata dello stato dell'applicazione. Quando si creano applicazioni complesse con molti stati, React e Redux funzionano bene insieme.

Ecco un'illustrazione di come utilizzare Redux con React:

importare Reagire da'reagire';
importare {creaStore} da'riduzione';
importare { Fornitore } da'reazione redux';
cost stato iniziale = { contare: 0 };
funzioneriduttore(stato = stato iniziale, azione) {
interruttore (azione.tipo) {
caso'INCREMENTO':
ritorno





instagram viewer
 { contare: state.count + 1 };
caso'DECREMENTO':
ritorno { contare: state.count - 1 };
predefinito:
ritorno stato;
 }
}

costimportare Reagire da'reagire';
importare {usaQuery, gql} da'@apollo/cliente';
cost GET_USERS = gql`
 query GetUsers {
 utenti {
 id
 nome
 }
 }
;
funzioneUtenti() {
cost { caricamento, errore, dati } = useQuery (GET_USERS);
Se (caricamento) ritorno<P>Caricamento...P>;
Se (errore) ritorno<P>Errore :(P>;
ritorno (
store = createStore (riduttore);
funzioneContatore() {
cost conta = usaSelettore(stato => state.count);
cost spedizione = useDispatch();
ritorno (


Conteggio: {conteggio}</p>
 spedizione({ tipo: 'INCREMENTO' })}>+</button>
 spedizione({ tipo: 'DECREMENTO' })}>-</button>
 </div>
 );
}
funzioneApp() {
ritorno (


 </Provider>
 );
}
esportarepredefinito Applicazione;

Questo esempio crea un archivio Redux con uno stato iniziale pari a 0. Una funzione di riduzione gestisce quindi il INCREMENTO E DECREMENTO operazioni. Il codice utilizza il useSelector E useDispatch ganci per ottenere il conteggio in corso e inviare le attività individualmente.

Infine, per rendere lo store accessibile all'intera applicazione, avvolgere il componente counter nel componente provider.

2. Rendering lato server con Next.js

Next.js è un framework di sviluppo che ottimizza la velocità del sito web e SEO tattiche trasmettendo HTML ai client e utilizzando rendering lato server dei componenti React.

Il suo potente set di strumenti funziona insieme a React, fornendo prestazioni eccezionali e un posizionamento elevato nei motori di ricerca.

// pagine/index.js
importare Reagire da'reagire';
funzioneCasa() {
ritorno (


Ciao, Mondo!</h1>


Questo è un componente React reso dal server.</p>
 </div>
 );
}
esportarepredefinito Casa;

In questo modello, caratterizzi un componente React chiamato Casa. Next.js crea una pagina HTML statica con il contenuto di questo componente quando ne esegue il rendering sul server. Quando la pagina riceve una visita dal client, invierà l'HTML al client e idraterà il componente, consentendogli di funzionare come un componente React dinamico.

3. Recupero dati con GraphQL

GraphQL è un linguaggio di query per le API che offre un'alternativa valida, forte e adattabile a REST. Con GraphQL, puoi ottenere i dati più velocemente e aggiornare l'interfaccia utente più rapidamente.

Questa è un'illustrazione del modo di utilizzare GraphQL con React:

importare Reagire da'reagire';
importare {usaQuery, gql} da'@apollo/cliente';
cost GET_USERS = gql`
 query GetUsers {
 utenti {
 id
 nome
 }
 }
;
funzioneUtenti() {
cost { caricamento, errore, dati } = useQuery (GET_USERS);
Se (caricamento) ritorno<P>Caricamento...P>;
Se (errore) ritorno<P>Errore :(P>;
ritorno (


 {dati.utenti.mappa(utente => (
{nome.utente}</li>
 ))}
 </ul>
 );
}
funzioneApp() {
ritorno (


Utenti</h1>

 </div>
 );
}
esportarepredefinito Applicazione;

Questo modello chiama il useQuery funzione dal @apollo/cliente libreria per portare il riepilogo dei client dall'interfaccia di programmazione GraphQL. L'elenco degli utenti viene quindi visualizzato nell'interfaccia utente.

4. Stile con CSS-in-JS

CSS-in-JS è un metodo basato su JavaScript per lo styling dei componenti React. Semplifica la gestione di fogli di stile complessi e consente di scrivere stili in uno stile modulare e basato su componenti.

Ecco un'illustrazione di come utilizzare CSS-in-JS con React:

importare Reagire da'reagire';
importare stile da'componenti in stile';
cost Button = styled.button`
 colore di sfondo: #007migliore amica;
 colore: #fff;
 imbottitura: 10px 20px;
 raggio del bordo: 5px;
 dimensione del font: 16px;
 cursore: puntatore;
 &:passa il mouse {
 colore di sfondo: #0069d9;
 }
;
funzioneApp() {
ritorno (


Cliccami!</Button>
 </div>
 );
}
esportarepredefinito Applicazione;

Questo esempio crea a pulsante in stile componente utilizzando il stile funzione. Definisce il tono dell'esperienza del pulsante, il tono del testo, l'ammortizzazione, lo sweep della linea, la dimensione del testo e il cursore.

Viene definito anche uno stato al passaggio del mouse che altera il colore di sfondo quando l'utente passa sopra il pulsante. Il pulsante viene infine renderizzato utilizzando un componente React.

5. Integrazione con D3 per la visualizzazione dei dati

D3 è una libreria JavaScript per la manipolazione e la visualizzazione dei dati. Puoi creare visualizzazioni di dati potenti e interattive utilizzando React. Un'illustrazione di come utilizzare D3 con React è la seguente:

importare Reagisci, {useRef, useEffect} da'reagire';
importare * COME d3 da'd3';
funzioneGrafico a barre({ dati }) {
cost ref = usaRif();
 usaEffetto(() => {
cost svg = d3.select (ref.current);
cost larghezza = svg.attr('larghezza');
cost altezza = svg.attr('altezza');
cost x = d3.scaleBand()
 .dominio (data.map((D) => d.etichetta))
 .allineare([0, larghezza])
 .imbottitura(0.5);
cost y = d3.scaleLinear()
 .dominio([0, d3.max (data, (d) => d.value)])
 .range([altezza, 0]);
 svg.selectAll('retto')
 .dati (dati)
 .accedere()
 .aggiungere('retto')
 .attr('X', (d) => x (d.label))
 .attr('si', (d) => y (d.valore))
 .attr('larghezza', x.larghezza di banda())
 .attr('altezza', (d) => altezza - y (d.value))
 .attr('riempire', '#007bff');
 }, [dati]);
ritorno (
400}>
 {/* gli assi vanno qui */}
 </svg>
 );
}
esportarepredefinito Grafico a barre;

Questo codice definisce a Grafico a barre componente che accetta a dati prop nel frammento di codice precedente. Chiama il usoRif hook per fare riferimento al componente SVG che lo utilizzerà per disegnare il contorno.

Successivamente, esegue il rendering delle barre del grafico e definisce le scale con il useEffect() hook, che mappa i valori dei dati alle coordinate dello schermo.

6. Aggiunta di funzionalità in tempo reale con WebSocket

L'implementazione di WebSocket stabilisce una via bidirezionale completamente operativa che consente la comunicazione continua tra un client e un server. Consentono a React di aggiungere utilità continua alle applicazioni Web, ad esempio forum di discussione, aggiornamenti in tempo reale e avvisi.

Usi WebSockets nel modo seguente con React:

importare Reagire, {useState, useEffect} da'reagire';
importare io da'socket.io-client';
funzioneChatRoom() {
cost [messaggi, setMessaggi] = useState([]);
cost [inputValue, setInputValue] = useState('');
cost presa = io(' http://localhost: 3001');
 usaEffetto(() => {
 socket.on('Messaggio', (messaggio) => {
 setMessages([...messaggi, messaggio]);
 });
 }, [messaggi, socket]);
cost handleSubmit = (e) => {
 e.preventDefault();
 socket.emit('Messaggio', inputValue);
 setInputValue('');
 };
ritorno (




 {messaggi.mappa((messaggio, I) => (
{messaggio}</li>
 ))}
 </ul>


 tipo="testo"
 valore={inputValue}
 onChange={(e) => setInputValue (e.target.value)}
 />
"invia">Invia</button>
 </form>
 </div>
 );
}
esportarepredefinito chatroom;

In questo esempio, definisci a ChatRoom componente che utilizza il socket.io-client libreria per connettersi a un server WebSocket. Puoi usare il useState gancio per affrontare la carrellata di messaggi e la stima delle informazioni.

Alla ricezione di un nuovo messaggio, il useEffect hook registra un listener per attivare un aggiornamento dell'evento del messaggio nell'elenco dei messaggi. Per cancellare e inviare un valore di input per il messaggio di evento, esiste a handleSubmit funzione.

Successivamente, sullo schermo verranno visualizzati sia il modulo con un campo di immissione e un pulsante, sia l'elenco dei messaggi aggiornato.

Con ogni invio di modulo, invitando il handleSubmit funzione è inevitabile. Per consegnare il messaggio al server, questo metodo fa uso del socket.

7. Integrazione con React Native per lo sviluppo mobile

React Local è un sistema per la creazione di applicazioni universali locali utilizzando React, che si connettono per promuovere applicazioni portatili per fasi iOS e Android.

Utilizzando l'integrazione di React Native con React, puoi utilizzare la progettazione basata su componenti e il codice riutilizzabile di React su piattaforme mobili e web. Ciò riduce i cicli di sviluppo delle app mobili e il time-to-market. React Native è un framework popolare per lo sviluppo di app mobili native che utilizza la libreria React.

Presentazione della programmazione e delle librerie vitali, come Node.js, Rispondi alla CLI locale, E Xcode O Studio Android, è fondamentale per i progettisti che si occupano separatamente di iOS e Android. Infine, i semplici componenti React Native consentono agli sviluppatori di creare applicazioni mobili robuste e ricche di funzionalità per le piattaforme iOS e Android.

Combina React con altre tecnologie

React è una libreria popolare ed efficace per la creazione di app online. React è un'ottima opzione per creare interfacce utente, ma viene utilizzato anche con altre tecnologie per aumentarne le capacità.

Integrando React con queste tecnologie, gli sviluppatori possono creare app più complesse e avanzate che offrono una migliore esperienza utente. React e il suo ecosistema di strumenti e librerie coprono tutto il necessario per creare un sito Web di base o un'applicazione Web complessa.