Share
In mijn vorige tutorials demonstreerde ik hoe ik prototypen van internet-of-dingen kon prototypen en ook datavisualisaties van hardwaresensoren kon maken met behulp van PubNub's datastroomnetwerk. In deze zelfstudie laat ik je zien hoe PubNub gebruikt kan worden om een real-time samenwerkende webapp te bouwen met React.js, waarmee je de DOM heel efficiënt kunt manipuleren, en de volgende generatie JavaScript, ES6.
Live demo: collaboratieve stickies
Ik heb twee versies van dezelfde Stickie Note-app gemaakt: degene die ik op deze CodePen host, gebruikt door CDN gehoste versies van React en een andere op GitHub, met behulp van pakketbeheerders. In deze zelfstudie gebruik ik de "lite" -versie van de laatste. Ik zal doorlopen hoe ik de app moet bouwen met alle goodies: npm, webpack, Babel voor JSX en ES6!
Om mee te gaan, heb je nodig:
Deze zelfstudie behandelt niet hoe u aan de slag kunt met React. Je kunt echter meer leren van veel andere uitstekende Envato Tuts + tutorials.
Je gaat nu een eenvoudige web-app bouwen met PubNub. PubNub is een Data Stream Network (DSN) dat een wereldwijde infrastructuur biedt waarmee u real-time apps en IoT-apparaten eenvoudig kunt bouwen en schalen. Hier maakt u deelbare "stickie notes". Dit is de gebruikersflow van de app:
Laten we beginnen!
In de directory van uw app uitvoeren npm init om uw package.json-bestand in te stellen en vervolgens deze modules te installeren.
Installeer webpack-modulebouwer, die statische activa compileert, samenvoegt, verkleint en comprimeert voor de front-end:
$ npm installeer webpack --save-dev
Webpack-webserver installeren om een lokale server uit te voeren:$ npm installeert webpack-dev-server --save-dev
Installeer de add-ons voor Reageren, Reageren DOM en CSS: $ npm install react react-dom react-addons-css-transition-group - save
Installeer Babel om JSX en ES6 te gebruiken. We gaan schrijven met ES6 (ES 2015), het JavaScript van de volgende generatie, met de hulp van Babel, een compiler: $ sudo npm install babel-loader babel-core babel-preset-es2015 babel-preset-reageren - opslaan
Installeer PubNub voor real-time communicatie: $ npm install pubnub --save
Accentsconagua
Maak uw app-structuur vergelijkbaar met deze:
├── / app │ ├── app.jsx │ ├── stickie.jsx │ ├── stickieList.jsx ├── / dist ├── / css ├── / images ├── / node_modules ├── index .html ├── package.json └── webpack.config.js
En configureer webpack.config.js:
var webpack = require ('webpack'); module.exports = entry: './app/app.jsx', output: path: './dist', bestandsnaam: 'bundle.js', watch: true, module: ...Bekijk het volledige configuratiebestand op deze GitHub-repo.
Kortom, u stelt een invoerbestand in (bestand op het hoogste niveau) en de uitvoerbestemming waar al uw js (en .jsx) bestanden in een enkel bestand zullen worden ingebouwd, nadat u de webpack-opdracht hebt uitgevoerd. Ook door in te stellen kijk: waar, u zorgt ervoor dat webpack uw bestand zal wijzigen en uw uitvoerbestand automatisch opnieuw opbouwt.
Voeg het script toe bundle.js in uw index.html bestand:
Collaborative Stickies
Merk ook het element op met een id =”container” in het lichaam. Dit is waar je React-app wordt ingevoegd.
U kunt uw dev-server uitvoeren met het commando, $ ./node_modules/.bin/webpack-dev-server
Of u kunt het in uw package.json instellen door deze regel toe te voegen:
"scripts": "start": "webpack-dev-server",
Zodat u de server kunt uitvoeren met de npm start commando in plaats daarvan.
Ga in je browser naar http: // localhost: 8080 / webpack-dev-server / en je zou je applicatie (een lege HTML-pagina tot nu toe) moeten zien die daar loopt.
Open een nieuw app.jsx bestand onder de app-map, zoals u hebt geconfigureerd voor een ingangspunt in uw webpack.config.js. Zoals u kunt zien aan de bestandsextensie, gaan we de JSX JavaScript-syntaxis extensie gebruiken.
Importeer eerst de modules en bestanden die daarvoor nodig zijn app.jsx:
import Reageren van 'reageren'; import ReactDOM van 'react-dom'; importeer StickieList van './stickieList'; import 'pubnub';
De importinstructie, nieuw geïntroduceerd in ES6, wordt gebruikt voor het importeren van functies, objecten of primitieven die zijn geëxporteerd vanuit een externe module of script.
Definieer vervolgens een klasse, CollabStickies, waardoor de React.Component klasse, met behulp van deze ES6-klasseverklaring. Dit is gelijk aan de React.createClass methode met ES5:
class CollabStickies breidt React.Component constructor (props) super (props); this.state = stickieList: [] componentWillMount () ... // zal later uitleggen ... ... render () retourneren ();
In de constructorfunctie stelt u de begintoestand van deze veranderlijke gegevens in, de stickieList matrix. We zullen de array bijwerken elke keer dat we een nieuwe plaknotitie krijgen, met behulp van this.setState ().
Gebruik in de renderfunctie JSX om HTML-sjabloonachtige virtuele DOM-elementen te definiëren. In dit geval de aangepaste componenten StickieWritable en StickieList zijn inbegrepen. U kunt de veranderlijke rekwisieten en statussen doorgeven aan de componenten die u wilt gebruiken. We gaan ze later definiëren.
Wanneer u de app bouwt, zal Babel al deze ES6- en JSX-syntaxis overdragen naar ES5 die browsers prima kunnen renderen.
Met ReactDOM.render (), die wordt geleverd met de reactie-dom pakket, render de CollabStickies component op het DOM-knooppunt in uw HTML.
ReactDOM.render (, document.getElementById ('container'));
Hier ziet u de gebruikersnaam en kleur rekwisieten. Deze gegevens worden gebruikt voor de CollabStickies component en wordt doorgegeven aan de onderliggende componenten.
De waarden moeten worden verkregen via de gebruikersaanmelding; echter, om de app voor deze oefening te vereenvoudigen, laten we gewoon een simpele gebruiken window.prompt () om een gebruikersnaam te krijgen en vervolgens een willekeurige kleur van stickie-notities te geven wanneer de app is geladen.
var gebruikersnaam = window.prompt ('Uw naam'); const kleuren = ['geel', 'roze', 'groen', 'blauw', 'paars']; var kleur = kleuren [~~ (Math.random () * colors.length)];
Hoewel ik hier de browser-native promptdialoog gebruik, raad ik aan om een andere UI-component te maken met aanmeldingsfuncties of de component van een dialoogvenster van een derde partij te gebruiken. Er zijn veel herbruikbare componenten die u kunt vinden, zoals de Modal van de Elemental UI, en de gebruikersinterface van Material UI.
Nu ga je PubNub gebruiken om de app te laten samenwerken.
PubNub is een wereldwijd verspreid datastroomnetwerk waarmee u real-time applicaties eenvoudig kunt bouwen. De belangrijkste functie, pub / sub, verzendt en ontvangt tegelijkertijd gegevens tussen meerdere gebruikers.
In deze app kan iedereen die zich heeft aangemeld berichten op stickie-notities plaatsen en deze met andere gebruikers delen.
Als u PubNub in uw app wilt gebruiken, moet u ervoor zorgen dat de pubnub-module is geïnstalleerd en geïmporteerd boven aan uw bestand.
Eerst moet u het initialiseren om een exemplaar van het Pubnub-object te maken. U hebt uw API-sleutels nodig tijdens de instantiatie, dus meld u aan bij PubNub om uw eigen sleutels te krijgen.
const publish_key = 'pub-c-1d17120 ...'; // uw pub-sleutel const subscribe_key = 'sub-c-85bdc ...'; // uw subsleutel const pubnub = require ('pubnub'). init (publish_key: publication_key, subscribe_key: subscribe_key, ssl: true, uuid: username); const channel = 'stickie-notes';Hier wijst u de gebruikersnaam die is verkregen uit het "login" -proces toe als een uuid, unieke identificatie. (In deze oefening nemen we elke tekenreeks die door een gebruiker als uuid is ingevoerd, maar in werkelijkheid hebt u een echt inlogsysteem nodig, zodat elke uuid feitelijk uniek is, zonder duplicaties!)
Merk ook op dat ik de ES6 gebruik const verklaring, in plaats van var voor deze globale constante waarden. In ES6 a const fungeert als een alleen-lezen variabele en vertegenwoordigt een constante verwijzing naar een waarde. In het latere voorbeeld ziet u ook de nieuw geïntroduceerde laat, wat een lokale variabele van het blokbereik is.
Om de deelbare Notes-app te maken, ga je PubNub's gebruiken publiceren() methode om uw notitie naar iedereen te verzenden, terwijl abonneren () laat andere gebruikers alle notities ontvangen. De abonneren () methode wordt automatisch aangeroepen elke keer dat iemand een nieuwe notitie publiceert.
Laten we in de React-app de abonneren () binnen componentWillMount (), die wordt aangeroepen direct voordat de eerste weergave plaatsvindt in de levenscyclus van de app.
componentWillMount () pubnub.subscribe (channel: channel, restore: true, connect: () => this.connect (), message: (m) => this.success (m));
De abonnemethode is asynchroon en wanneer elke bewerking met succes is voltooid, is de methode bericht terugbellen wordt aangeroepen. Laten we bij de terugroep de stickie-notitielijst bijwerken door de status van de stickieList array, die in het begin in de constructor was gedefinieerd.
In React, het aanpassen van uw gegevens met setstate werkt de weergave automatisch bij.
succes (m) let newList = [m] .concat (this.state.stickieList); this.setState (stickieList: newList);
We maken de weergave (een UI-component) later.
In de subscribe-callbacks heb je waarschijnlijk de grappig uitziende syntax met pijlen opgemerkt, =>. Dit worden pijlfuncties genoemd, die een kortere syntaxis hebben dan de ES5-functie-uitdrukkingen. Ook bindt deze expressie het deze waarde. Nogmaals, met Babel kunnen we alle ES6-awesomeness benutten!
We gebruiken ook de optionele aansluiten terugbellen naar de abonnemethode om "geschiedenis" op te halen. Hiermee worden gegevens uit het verleden opgehaald wanneer de verbinding met PubNub voor de eerste keer tot stand is gebracht.
connect () pubnub.history (channel: channel, count: 50, callback: (m) => m [0] .reverse (); for (var v of m [0]) laat newList = this. state.stickieList.concat (v); this.setState (stickieList: newList););
De geschiedenis() is een onderdeel van PubNub's Opslag en afspelen functie, en in dit geval haalt het de laatste 50 berichten van PubNub op. Bij de succes terugbellen, update de weergave door de staat van de stickieList array hier ook.
Laten we een klas maken, StickieWritable. Het is een stickie-nootcomponent die een gebruikersinvoer gebruikt.
Het wordt als volgt weergegeven:
render () retour ();
In de textarea, luister naar de onkeyup gebeurtenis, en elke keer dat de gebeurtenis wordt geactiveerd, belt u de handleTextChange functie om te controleren of de sleutel een return / enter-toets was. Merk op dat ik dit bindend ben bij het aanroepen van de functie. In tegenstelling tot de React.createClass (), dat is de ES5-methode van React om een klasse te maken, de ES6-klasse schrijft de methoden niet automatisch toe aan de instantie van een object, dus u moet het zelf binden. (Er zijn verschillende manieren om hetzelfde te bereiken.)
In de handleTextChange functie, publiceer de tekst en gebruikersgegevens naar PubNub:
var data = username: this.props.username, color: this.props.color, text: e.target.value, timestamp: Date.now (); pubnub.publish (channel: channel, message: data, callback: e.target.value = "// het tekstveld opnieuw instellen);
Wanneer een gebruiker een tekst in een notitieblok typt en op Return drukt, wordt het bericht naar PubNub verzonden en ontvangen alle andere gebruikers het bericht tegelijkertijd (binnen ¼ sec!).
De gebruikersinterface van de app bestaat uit een paar UI-componenten, die er als volgt uitzien:
1. CollabStickies
2. StickieWritable
3. Stickie
4. StickieList
Componenten 1 en 2 zijn al afgehandeld, dus laten we component 3 maken, een onderdeel met een individuele stickie-noot.
Maak een nieuw bestand stickie.jsx om de gebruikersinterface met JSX weer te geven. In tegenstelling tot de StickieWritable component, dit is een alleen-lezen UI-component zonder UX-functionaliteit. Het heeft alleen een render () functie om een plaknotitie te tekenen met tekst met behulp van propgegevens.
Kortom, elke keer dat de gebruiker een nieuw bericht van een andere gebruiker ontvangt, wordt het bericht weergegeven in een nieuwe stickiecomponent.
import Reageren van 'reageren'; import ReactDOM van 'react-dom'; export standaardklasse Stickie breidt React.Component uit render () return ();This.props.text
This.props.username
Vervolgens gaan we een andere UI-component maken, stickieList.jsx, Dit is een container voor dit onderdeel en bevat een heleboel stickie-opmerkingen bij elkaar.
Importeren Stickie.jsx en alle andere afhankelijkheden in StickieList.jsx. Hier gebruik ik een ReactCSSTransitionGroup addon en een aangepast weblettertype.
import Reageren van 'reageren'; import ReactDOM van 'react-dom'; import ReaganCSSTransitionGroup van 'react / lib / ReactCSSTransitionGroup'; importeer Stickie van './stickie'; importeer webfontloader van 'webfontloader'
U kunt de weblettertype-lader met npm installeren:$ npm installeert webfontloader
Vervolgens kunt u eventuele aangepaste lettertypen van uw keuze laden. U kunt de broncode bekijken om te zien hoe een aangepast Google-lettertype wordt geïmporteerd.
In render (), gebruik een ES6-pijlfunctie en kaart() om de array te herhalen en te gebruiken stickieList om elke Stickie-component die u zojuist hebt gemaakt, weer te geven:
export standaardklasse StickieList breidt React.Component uit render () let items = (this.props.stickieList || []). map ((item) =>
De gedefinieerde componenten kunnen worden geanimeerd met behulp van transitionName, die je in je CSS moet gebruiken om de animatiestijl te definiëren. Let ook op het hoofdkenmerk in . U moet een unieke sleutel gebruiken voor elke lijst om elk onderdeel te animeren wanneer u het gebruikt
React voegt extra klassenamen toe. Bijvoorbeeld wanneer u transitionName is 'animatie', je hebt ook'animatie in te voeren','animatie-enter-actief','animatie-verlof', en'animatie-leave-actief'.
Hier is de code in /css/style.css:
.animatie-invoer dekking: 0,1; transformeren: schaal (1.3); overgang: alle 1s gemak; .animation-enter.animation-enter-active opacity: 1; transformeren: schaal (1); ...
Nu heb je net een real-time samenwerkende app gebouwd met React en PubNub! Ik hoop dat je de tutorial leuk vond!
Je kunt de volledige code, inclusief CSS, in deze GitHub-repo bekijken. Hoewel ik in deze zelfstudie de "lite" -versie gebruikte, app-lite.jsx, je kunt een kijkje nemen app.jsx voor meer functies.
Als je geïnteresseerd bent in het bouwen van meer real-time applicaties, zoals chat-apps, multiplayer-games, handels-apps, enz., Ga dan naar PubNub en vind meer bronnen!
We hebben een cursus die er specifiek op is gericht om uw React-vaardigheden zo veel mogelijk te gebruiken. In deze cursus begint u met het bouwen van moderne web-apps met React en Redux. Uitgaande van niets, zult u deze twee bibliotheken gebruiken om een complete webtoepassing te bouwen.
U begint met de eenvoudigst mogelijke architectuur en bouwt langzaam de app op, functie voor functie. Je leert over basisbegrippen zoals tooling, verloopstukken en routing. Je leert ook over enkele meer geavanceerde technieken, zoals slimme en domme componenten, pure componenten en asynchrone acties. Tegen het einde heb je een complete flashcards-app gemaakt om te leren door gespreide herhaling.
Geïnteresseerd? Bekijken!
