Integrazione Parse React Hook per Real-Time in App React

iniziare con il parse react hook per aggiornamenti in tempo reale utilizzando parse introduzione il modo più semplice per integrare parse/back4app nel tuo progetto basato su javascript è attraverso il parse javascript sdk questa libreria funziona in più ambienti javascript come nodejs, reactjs, vuejs, angularjs, react native, e ti dà accesso alle funzionalità di back4app l'obiettivo del hook di parse react è rendere questa esperienza ancora migliore per gli sviluppatori reactjs fornendo uno strato leggero e facile da usare che offre una configurazione minima e riutilizzabilità del codice utilizzare questo pacchetto garantirà che elementi come la configurazione delle credenziali, le richieste http, la sincronizzazione in tempo reale e l'interazione offline first siano automaticamente disponibili per la tua app react la libreria è scritta interamente in typescript, sopra il parse javascript sdk , ed è attualmente nella versione alpha in questa guida iniziale, installerai e configurerai la @parse/react @parse/react libreria nel tuo progetto react @parse/react @parse/react è attualmente nella versione alpha la libreria è in fase di test, quindi ti consigliamo di procedere con cautela il tuo feedback è molto apprezzato, quindi sentiti libero di utilizzare la libreria e inviarci le tue domande e prime impressioni inviando un'email a community\@back4app com requisiti per completare questo tutorial, avrai bisogno di un app creato su back4app; segui il tutorial per abilitare live query npm o yarn installati; npx pacchetto runner installato 1 installazione installa @parse/react @parse/react e la sua dipendenza peer parse parse nella tua applicazione react 2 configurazione dell'applicazione per consentire all'app di connettersi in modo sicuro ai server di back4app, devi fornire al parse javascript sdk le credenziali dell'app nel tuo app js app js (o app tsx app tsx ) file ricorda di utilizzare il tuo sottodominio back4app creato quando hai abilitato la tua app per eseguire live queries app js or app tsx 1 import { initializeparse } from '@parse/react'; 2&#x9; 3 initializeparse( 4 'your back4app subdomain', // e g your app name b4a io 5 'your application id', 6 'your javascript key' 7 ); nota che il initializeparse initializeparse metodo sostituisce il solito parse initialize parse initialize uno puoi trovare il tuo app id app id e javascript key javascript key credenziali aprendo la tua app dashboard dashboard su sito web di back4app https //www back4app com/ e cliccando su core settings core settings , sotto server settings server settings 3 creare la tua prima query successivamente, costruirai la tua prima query e la visualizzerai nella tua app la @parse/react @parse/react libreria esporta un useparsequery useparsequery hook, quindi non devi perdere tempo a cercare come implementare funzionalità come il supporto offline, le modifiche in tempo reale e così via richiede un parse query parse query e restituisce un oggetto con alcune proprietà che puoi utilizzare per accedere ai dati restituiti dalle query app js or app tsx 1 import react from 'react'; 2 import parse from 'parse'; 3 import { initializeparse, useparsequery } from '@parse/react'; 4&#x9; 5 initializeparse( 6 'your back4app subdomain', // e g your app name b4a io 7 'your application id', 8 'your javascript key' 9 ); 10&#x9; 11 export default function app() { 12 //make sure your class is enabled for real time notifications (live query) checking the menu > app settings > server settings > server url and live query 13 const parsequery = new parse query('your class name here'); 14 const { 15 islive, 16 isloading, 17 issyncing, 18 results, 19 count, 20 error, 21 reload 22 } = useparsequery(parsequery); 23&#x9; 24 return ( 25 \<div> 26 {isloading && ( 27 \<p>loading \</p> 28 )} 29 {islive && ( 30 \<p>live!\</p> 31 )} 32 {issyncing && ( 33 \<p>syncing \</p> 34 )} 35 {results && ( 36 \<ul> 37 {results map(result => ( 38 \<li key={result id}> 39 {result get('class column name here')} 40 \</li> 41 ))} 42 \</ul> 43 )} 44 \<p>{count}\</p> 45 {error && ( 46 \<p>{error message}\</p> 47 )} 48 \<button 49 onclick={reload} 50 > 51 reload 52 \</button> 53 \</div> 54 ); 55 } quando si passa una query al hook, cercherà prima i risultati memorizzati nella cache che potrebbe aver salvato poi, crea una connessione websocket per comunicare con il server livequery di back4app, che si sincronizza automaticamente in altre parole, l'approccio offline first e le modifiche in tempo reale sono abilitati per impostazione predefinita per controllare lo stato della query, usa il props props restituito dal hook islive islive se true true , indica che la query è iscritta agli aggiornamenti in tempo reale isloading isloading se true true , la query sta recuperando i risultati issyncing issyncing se true true , la query sta ottenendo risultati aggiornati dai server di back4app results results questi sono i dati restituiti dalla query count count indica il numero di oggetti che corrispondono alla query error error quando qualcosa va storto con la query, restituisce un errore reload reload ricarica i risultati della tua query puoi vedere la documentazione completa per ulteriori dettagli su come configurare e utilizzare la @parse/react @parse/react libreria 4 testa l'app hook ora dovresti essere in grado di eseguire la tua app react e vedere i risultati tieni presente che dovresti aggiungere alcuni dati al tuo progetto back4app per vedere alcuni elementi nella tua app è fatto! a questo punto, hai installato @parse/react @parse/react nel tuo progetto, configurato le connessioni con back4app e scritto la tua prima query nella prossima guida, vedrai una delle principali caratteristiche di questa libreria e come usarla creando un'app di chat dal vivo