Share
Nelle mie precedenti esercitazioni, ho dimostrato come prototipare i dispositivi di Internet of Things e ho anche creato visualizzazioni di dati da sensori hardware, utilizzando la rete di flusso di dati di PubNub. In questo tutorial, ti mostrerò come utilizzare PubNub per creare un'app web collaborativa in tempo reale utilizzando React.js, che ti consente di manipolare il DOM in modo molto efficiente e la prossima generazione di JavaScript, ES6.
Demo dal vivo: Stickies collaborativi
Ho creato due versioni della stessa app Stickie Note: quella che ho ospitato su questo CodePen utilizza versioni ospitate da CDN di React, e un'altra è su GitHub, usando i gestori di pacchetti. In questo tutorial, utilizzo la versione "lite" di quest'ultimo. Vedrò come costruire l'app, usando tutti gli extra: npm, webpack, Babel per JSX ed ES6!
Per seguire, avrai bisogno di:
Questo tutorial non tratta come iniziare con React. Tuttavia, puoi imparare di più da molti altri eccellenti tutorial Envato + tutorials.
Ora costruirai una semplice web app usando PubNub. PubNub è una rete di flussi di dati (DSN) che fornisce un'infrastruttura globale che consente di creare e scalare facilmente applicazioni e dispositivi IoT in tempo reale. Qui creerai "note adesive" condivisibili. Questo è il flusso di utenti dell'app:
Ora, iniziamo!
Nella directory della tua app, esegui npm init per impostare il file package.json e quindi installare questi moduli.
Installa il builder del modulo webpack, che compila, concatena, minimizza e comprime le risorse statiche per il front-end:
$ npm install webpack --save-dev
Installa il web server webpack per eseguire un server locale:$ npm installa webpack-dev-server --save-dev
Installa componenti aggiuntivi di animazione React, React DOM e CSS: $ npm install react react-dom react-addons-css-transition-group --save
Installa Babel per usare JSX ed ES6. Scriveremo con ES6 (ES 2015), che è JavaScript di prossima generazione, con l'aiuto di Babel, un compilatore: $ sudo npm installa babel-loader babel-core babel-preset-es2015 babel-preset-react --save
Installa PubNub per comunicazioni in tempo reale: $ npm installa pubnub --save
Accentsconagua
Crea la tua struttura di app simile a questa:
├── / app │ ├── app.jsx │ ├── stickie.jsx │ ├── stickieList.jsx ├── / dist ├── / css ├── / images ├── / node_modules ├── index .html ├── package.json └── webpack.config.js
E configurare webpack.config.js:
var webpack = require ('webpack'); module.exports = entry: './app/app.jsx', output: percorso: './dist', nomefile: 'bundle.js', watch: true, module: ...Vedi l'intero file di configurazione su questo repository GitHub.
In sostanza, si imposta un file di immissione (file di livello superiore) e la destinazione di output in cui tutti i file js (e .jsx) verranno incorporati in un singolo file, dopo aver eseguito il comando webpack. Inoltre, impostando guarda: vero, assicurati che il webpack guardi le modifiche ai tuoi file e ricostruisca automaticamente il tuo file di output.
Includi lo script bundle.js nel tuo file index.html:
Promemoria collaborativi
Inoltre, nota l'elemento con un id =”container” nel corpo. Qui è dove verrà inserita la tua app React.
È possibile eseguire il proprio server di sviluppo con il comando, $ ./node_modules/.bin/webpack-dev-server
Oppure puoi configurarlo nel pacchetto package.json aggiungendo questa riga:
"script": "start": "webpack-dev-server",
In modo che è possibile eseguire il server con il inizio di npm comando invece.
Nel tuo browser, vai a http: // localhost: 8080 / webpack-dev-server /, e dovresti vedere la tua applicazione (una pagina HTML vuota fino ad ora) in esecuzione lì.
Apri un nuovo app.jsx file nella directory dell'app, come configurato per un punto di ingresso nel tuo webpack.config.js. Come puoi vedere dall'estensione del file, useremo l'estensione della sintassi JavaScript JSX.
Innanzitutto, importa i moduli e i file richiesti app.jsx:
import Reagire da "reagire"; importare ReactDOM da 'react-dom'; import StickieList da './stickieList'; importare "pubnub";
L'istruzione import, introdotta di recente in ES6, viene utilizzata per importare funzioni, oggetti o primitive esportate da un modulo o script esterno.
Quindi definire una classe, CollabStickies, che estende il React.Component classe, usando questa dichiarazione di classe ES6. Questo è equivalente al React.createClass metodo con ES5:
class CollabStickies estende React.Component costruttore (oggetti di scena) super (oggetti di scena); this.state = stickieList: [] componentWillMount () ... // spiegherà più tardi ... render () return ();
Nella funzione di costruzione, si sta impostando lo stato iniziale di questi dati mutabili, il stickieList array. Aggiorneremo l'array ogni volta che otterremo una nuova nota adesiva, usando this.setState ().
Nella funzione di rendering, utilizzare JSX per definire elementi DOM virtuali simili a modelli HTML. In questo caso, i componenti personalizzati StickieWritable e StickieList sono inclusi. È possibile passare i sostegni e gli stati mutabili ai componenti da utilizzare. Li definiremo più tardi.
Quando costruisci l'app, Babel traspone tutta la sintassi ES6 e JSX in ES5 che i browser possono riprodurre bene.
Con ReactDOM.render (), che viene con il reagire-dom pacchetto, renderizza il CollabStickies componente sul nodo DOM nel tuo HTML.
ReactDOM.render (, document.getElementById ('container'));
Qui, si nota il nome utente e il colore oggetti di scena. Questi dati sono usati per CollabStickies componente e viene passato ai suoi componenti figlio.
I valori dovrebbero essere ottenuti dal login utente; tuttavia, per semplificare l'app per questo esercizio, usiamo solo un semplice window.prompt () per ottenere un nome utente, e quindi dare un colore casuale di note stickie quando l'app viene caricata.
var username = window.prompt ('Il tuo nome'); const colors = ['giallo', 'rosa', 'verde', 'blu', 'viola']; var color = colors [~~ (Math.random () * colors.length)];
Sebbene io stia utilizzando la finestra di dialogo del prompt nativo del browser qui, in realtà, ti consiglio di creare un altro componente dell'interfaccia utente con funzioni di accesso o utilizzare il componente della finestra di dialogo di terze parti. Ci sono molti componenti riutilizzabili che puoi trovare, come Modal UI elementale e Finestra di dialogo UI materiale.
Ora utilizzerai PubNub per rendere l'app collaborativa.
PubNub è una rete di flussi di dati distribuiti a livello globale che consente di creare facilmente applicazioni in tempo reale. La sua caratteristica principale, pub / sub, invia e riceve dati tra più utenti contemporaneamente.
In questa app, chiunque "ha effettuato l'accesso" può pubblicare messaggi su note adesive e condividerli con altri utenti.
Per utilizzare PubNub nella tua app, assicurati che il modulo pubnub sia stato installato e importato nella parte superiore del tuo file.
Innanzitutto, è necessario inizializzarlo per creare un'istanza dell'oggetto Pubnub. Hai bisogno delle tue chiavi API durante l'istanziazione, quindi registrati su PubNub per ottenere le tue chiavi.
const publish_key = 'pub-c-1d17120 ...'; // la tua chiave di pub const subscribe_key = 'sub-c-85bdc ...'; // la tua chiave secondaria const pubnub = require ('pubnub'). init (publish_key: publish_key, subscribe_key: subscribe_key, ssl: true, uuid: username); const channel = 'stickie-notes';Qui, stai assegnando il nome utente ottenuto dal processo di "accesso" come a uuid, identificativo unico. (In questo esercizio, prendiamo qualsiasi stringa inserita da un utente come uuid, ma in realtà, hai bisogno di un vero sistema di login in modo che ogni uuid sia effettivamente unico, senza duplicazioni!)
Inoltre, nota che sto usando l'ES6 const dichiarazione, invece di var per questi valori costanti globali. In ES6 a const funge da variabile di sola lettura e rappresenta un riferimento costante a un valore. Nell'esempio successivo, vedrai anche la nuova introduzione permettere, che è una variabile locale dell'ambito di blocco.
Per creare l'app delle note condivisibili, utilizzerai PubNub pubblicare() metodo per inviare la nota a tutti, mentre sottoscrivi() lascia che altri utenti ricevano tutte le note. Il sottoscrivi() il metodo viene chiamato automaticamente ogni volta che qualcuno pubblica una nuova nota.
Nella tua app React, chiamiamo il sottoscrivi() entro componentWillMount (), che viene richiamato immediatamente prima del rendering iniziale nel ciclo di vita dell'app.
componentWillMount () pubnub.subscribe (channel: channel, restore: true, connect: () => this.connect (), message: (m) => this.success (m));
Il metodo subscribe è asincrono e quando ciascuna operazione viene completata correttamente, il Messaggio il callback è chiamato. Alla richiamata, aggiorniamo l'elenco delle note stickie impostando lo stato di stickieList array, che è stato definito nel costruttore all'inizio.
In React, modifica i tuoi dati con setState aggiorna automaticamente la vista.
success (m) let newList = [m] .concat (this.state.stickieList); this.setState (stickieList: newList);
Stiamo creando la vista (un componente dell'interfaccia utente) in seguito.
Nei callback di sottoscrizione, probabilmente hai notato la sintassi dall'aspetto divertente con le frecce, =>. Questo è chiamato funzioni di freccia, che ha una sintassi più breve rispetto alle espressioni di funzione ES5. Inoltre, questa espressione lega lessicalmente il Questo valore. Ancora una volta, con Babel, possiamo sfruttare tutta la suggestione di ES6!
Inoltre, stiamo usando l'opzionale Collegare richiamata al metodo di iscrizione per recuperare "cronologia". Questo recupererà i dati passati quando la connessione a PubNub viene stabilita per la prima volta.
connect () pubnub.history (channel: channel, count: 50, callback: (m) => m [0] .reverse (); for (var v of m [0]) let newList = this. state.stickieList.concat (v); this.setState (stickieList: newList););
Il storia() è una parte di PubNub Archiviazione e riproduzione funzione, e in questo caso, recupera gli ultimi 50 messaggi da PubNub. Al successo callback, aggiorna la vista impostando lo stato del stickieList array anche qui.
Creiamo una classe, StickieWritable. È un componente di stickie note che accetta l'utente.
Rende così:
render () return ();
Nel textarea, ascoltare il onKeyUp evento, e ogni volta che viene attivato l'evento, chiamare il handleTextChange funzione per verificare se la chiave era una chiave di ritorno / invio. Si noti che lo sto vincolando quando si chiama la funzione. non mi piace il React.createClass (), che è il metodo ES5 di React per creare una classe, la classe ES6 non esegue l'autobind dei metodi sull'istanza di un oggetto, quindi è necessario associarla da solo. (Esistono diversi modi per ottenere la stessa cosa).
Nel handleTextChange funzione, pubblica il testo e i dati dell'utente su PubNub:
var data = username: this.props.username, color: this.props.color, text: e.target.value, timestamp: Date.now (); pubnub.publish (canale: canale, messaggio: dati, callback: e.target.value = "// reimpostazione del campo di testo);
Ora, quando un utente digita del testo in un blocco note e preme Invio, il messaggio verrà inviato a PubNub e tutti gli altri utenti riceveranno il messaggio simultaneamente (entro ¼ di secondo!).
L'interfaccia utente dell'app è costituita da alcuni componenti dell'interfaccia utente, che assomigliano a questo:
1. CollabStickies
2. StickieWritable
3. Stickie
4. StickieList
I componenti 1 e 2 sono già stati presi in considerazione, quindi creiamo il componente 3, un componente di stick note individuale.
Crea un nuovo file stickie.jsx per rendere l'interfaccia utente usando JSX. non mi piace il StickieWritable componente, questo è un componente UI di sola lettura senza funzionalità UX. Ha solo un render () funzione per disegnare una nota adesiva con testo usando i dati dell'elica.
Fondamentalmente, ogni volta che l'utente riceve un nuovo messaggio da un altro utente, il messaggio viene reso in un nuovo componente Stickie.
import Reagire da "reagire"; importare ReactDOM da 'react-dom'; Esporta la classe predefinita Stickie estende React.Component render () return ();This.props.text
This.props.username
Successivamente, creeremo un altro componente dell'interfaccia utente, stickieList.jsx, che è un contenitore per questo componente e contiene un insieme di note adesive.
Importare Stickie.jsx e tutte le altre dipendenze in StickieList.jsx. Qui, sto usando un ReactCSSTransitionGroup addon e un font web personalizzato.
import Reagire da "reagire"; importare ReactDOM da 'react-dom'; importare ReactCSSTransitionGroup da 'react / lib / ReactCSSTransitionGroup'; importare Stickie da './stickie'; importare webfontloader da 'webfontloader'
È possibile installare il caricatore di font Web con npm:$ npm installa webfontloader
Quindi puoi caricare qualsiasi carattere personalizzato di tua scelta. Puoi dare un'occhiata al codice sorgente per vedere come viene importato un carattere personalizzato di Google.
Nel render (), utilizzare una funzione freccia ES6 e carta geografica() per iterare l'array e usarlo stickieList per rendere ogni componente Stickie appena creato:
Esporta la classe predefinita StickieList estende React.Component render () let items = (this.props.stickieList || []). map ((item) =>
I componenti definiti possono essere animati utilizzando transitionName, che devi usare nel tuo CSS per definire lo stile di animazione. Inoltre, notare l'attributo chiave in . È necessario utilizzare una chiave univoca per ogni elenco per animare ciascun componente quando si utilizza
React aggiunge nomi di classe extra. Ad esempio, quando il tuo transitionName è 'animazione', avrai anche'Animazione di entrare','Animazione-entrare-attiva','Animazione di congedo', e 'Animazione-leave-attiva'.
Ecco il codice in /css/style.css:
.animation-enter opacity: 0.1; transform: scale (1.3); transizione: tutti gli anni di relax; .animation-enter.animation-enter-active opacity: 1; transform: scale (1); ...
Ora hai appena creato un'app collaborativa in tempo reale con React e PubNub! Spero ti sia piaciuto il tutorial!
È possibile visualizzare l'intero codice, incluso il CSS, in questo repository GitHub. Anche se, in questo tutorial, stavo usando la versione "lite", app-lite.jsx, puoi dare un'occhiata a app.jsx per più funzionalità.
Se sei interessato a sviluppare più applicazioni in tempo reale, come app di chat, giochi multiplayer, applicazioni di trading, ecc., Vai su PubNub e trova più risorse!
Abbiamo un corso specifico per prendere le tue abilità di React il più lontano possibile. In questo corso, inizierai a creare moderne app Web con React e Redux. A partire dal nulla, utilizzerai queste due librerie per creare un'applicazione web completa.
Inizierai con l'architettura più semplice possibile e creerai lentamente l'app, funzione per caratteristica. Imparerai concetti di base come strumenti, riduttori e routing. Scoprirai anche alcune tecniche più avanzate come componenti intelligenti e stupidi, componenti puri e azioni asincrone. Alla fine, avrai creato un'app completa per le flashcard per l'apprendimento tramite ripetizione spaziale.
Interessato? Controlla!
