Back to Question Center
0

Eine React Universal Blog App erstellen: Flux implementieren            Erstellen einer React Universal Blog App: Implementieren von FluxRelated Semalt: jQueryReactNode.jsnpmAjaxMore ... Sponsoren

1 answers:
Erstellen einer React Universal Blog App: Implementieren von Flux

Für eine qualitativ hochwertige Einführung in React können Sie nicht den kanadischen Full-Stack-Entwickler Wes Bos hinter sich lassen. Versuchen Sie seinen Kurs hier und verwenden Sie den Code SITEPOINT , um 25% Rabatt zu erhalten und um SitePoint zu unterstützen.

Im ersten Teil dieser Miniserie haben wir begonnen, in die Welt von React einzutauchen, um zu sehen, wie wir sie zusammen mit Node verwenden könnten. js, um eine React Universal Blog App zu erstellen - sistema php prontos.

In diesem zweiten und letzten Teil werden wir unseren Blog auf die nächste Ebene bringen, indem wir lernen, wie man Inhalte hinzufügt und bearbeitet. Wir werden uns auch mit der Frage beschäftigen, wie man unsere React Universal Blog App mit React-Organisationskonzepten und dem Flux-Muster leicht skalieren kann.

Building a React Universal Blog App: Implementing FluxBuilding a React Universal Blog App: Implementing FluxRelated Semalt:
jQueryReactNode.jsnpmAjaxMore. Sponsors

Brich es für mich nieder

Da wir unserem Blog weitere Seiten und Inhalte hinzufügen, unsere Routen. js -Datei wird schnell groß. Da es einer der Leitgedanken von React ist, Dinge in kleinere, überschaubare Teile aufzuteilen, lassen Sie uns unsere Routen in verschiedene Dateien aufteilen.

Öffne deine Routen. js Datei und bearbeiten Sie sie, so dass sie den folgenden Code haben wird:

     // Routen. jsImport Reagieren von 'reagieren'{Route, IndexRoute} von 'react-router' importieren// GeschäftImportieren Sie AppStore von '. / Geschäfte / AppStore '// HauptbestandteilApp von importieren '. / Komponenten / App '// SeitenBlog von 'importieren.' / Komponenten / Seiten / Blog 'Import Standard von '. / Komponenten / Seiten / Standard 'Arbeit von importieren. / Komponenten / Seiten / Arbeit 'Importiere NoMatch von '. / Komponenten / Seiten / NoMatch 'Exportstandard (                  )    

Wir haben unserem Blog einige Seiten hinzugefügt und die Größe unserer Routen deutlich reduziert. js Datei durch Aufteilen der Seiten in separate Komponenten. Beachten Sie außerdem, dass wir einen Store hinzugefügt haben, indem Sie AppStore hinzufügen, was sehr wichtig für die nächsten Schritte beim Skalieren unserer React-Anwendung ist.

Der Laden: die einzige Quelle der Wahrheit

Im Flux-Muster ist der Store ein sehr wichtiger Teil, da er als einzige Informationsquelle für die Datenverwaltung fungiert. Dies ist ein entscheidendes Konzept, um zu verstehen, wie die React-Entwicklung funktioniert und einer der meistbeworbenen Vorteile von React. Das Schöne an dieser Disziplin ist, dass wir zu jedem Zeitpunkt unserer App auf die Daten des AppStore zugreifen können und genau wissen, was in ihm passiert. Wenn Sie eine datengesteuerte React-Anwendung erstellen möchten, sollten Sie Folgendes beachten:

  1. Wir manipulieren das DOM niemals direkt.
  2. Unsere UI-Antworten auf Daten und Daten leben im Laden
  3. Wenn wir unsere Benutzeroberfläche ändern müssen, können wir zum Laden gehen und der Laden wird den neuen Datenstand unserer App erstellen.
  4. Neue Daten werden zu Komponenten auf höherer Ebene geleitet und dann zu den Komponenten auf niedrigerer Ebene durch Requisiten , die die neue UI bilden, basierend auf den neuen empfangenen Daten weitergegeben.

Mit diesen vier Punkten haben wir grundsätzlich die Grundlage für eine One-Way-Datenfluss -Anwendung. Dies bedeutet auch, dass wir in jedem Zustand unserer Anwendung trösten können. log (AppStore. data) , und wenn wir unsere App korrekt erstellen, wissen wir genau, was wir erwarten können. Sie werden sehen, wie mächtig dies auch für das Debugging ist.

Erstellen wir jetzt einen Geschäftsordner namens speichert . In ihm erstellen Sie eine Datei namens AppStore. js{EventEmitter} von 'Ereignissen' importierenImport von 'lodash'Exportstandard _. extend ({}, EventEmitter. Prototyp, {// AnfangsdatenDaten: {bereit: falsch,Globale: {},Seiten: [],item_num: 5},// Sende ÄnderungsereignisemitChange: function {Dies. emittieren ('ändern')},// Änderungslistener hinzufügenaddChangeListener: Funktion (Rückruf) {Dies. an ('ändern', Rückruf)},// Entferne den ÄnderungslistenerremoveChangeListener: Funktion (Rückruf) {Dies. removeListener ('ändern', Rückruf)}})

Sie können sehen, dass wir einen Ereignisemitter angehängt haben. Dies ermöglicht uns, Daten in unserem Geschäft zu bearbeiten, und dann unsere Anwendung mit AppStore erneut zu rendern. emittierenÄndern . Dies ist ein leistungsfähiges Werkzeug, das nur an bestimmten Stellen in unserer Anwendung verwendet werden sollte. Ansonsten kann es schwierig sein zu verstehen, wo AppStore -Daten geändert werden, was uns zum nächsten Punkt bringt .

Reagieren auf Komponenten: Höhere und niedrigere Ebene

Dan Semalt hat einen großartigen Beitrag zum Konzept der intelligenten und dummen Komponenten geschrieben. Die Idee besteht darin, datenverändernde Aktionen nur in den übergeordneten (intelligenten) Komponenten aufrechtzuerhalten, während die untergeordneten (dummen) Komponenten die Daten, die sie über Requisiten erhalten, auf der Grundlage dieser Daten nutzen und die Benutzeroberfläche rendern. Immer wenn eine Aktion auf einer untergeordneten Komponente ausgeführt wird, wird dieses Ereignis über Requisiten an die übergeordneten Komponenten weitergegeben, um zu einer Aktion verarbeitet zu werden. Dann verteilt es die Daten (einseitiger Datenfluss) zurück durch die Anwendung.

Sagte, lasst uns anfangen, einige Komponenten zu bauen. Um dies zu tun, erstellen Sie einen Ordner namens Komponenten . In ihm erstellen Sie eine Datei namens App. js mit diesem Inhalt:

     // App. jsImport Reagieren, {Komponente} von 'reagieren'// DispatcherImportiere AppDispatcher von '. / Dispatcher / AppDispatcher '// GeschäftImportieren Sie AppStore von '. / Geschäfte / AppStore '// KomponentenImport Nav von '. / Teilweise / Nav 'Footer von importieren '. / Teil- / Fußzeile 'Import Laden von '. / Partials / Laden 'Standardklasse exportieren App erweitert Komponente {// Fügen Sie Listener zu Stores hinzucomponentDidMount    {Appstore. addChangeListener (this. _onChange. bind (this))}// Entfernen Sie Change Listeners aus StoresKomponenteWillUnmount    {Appstore. removeChangeListener (this._onChange. bind (this))}_bei Änderung  {Dies. setState (AppStore)}getStore    {AppDispatcher. Versand({aktion: 'get-app-store'})}machen  {const Daten = AppStore. Daten// Lade für den Browser anzeigenif (! Daten. Bereit) {Dokument. Karosserie. Klassenname = ''Dies. getStore   let stil = {marginTop: 120}Rückkehr ( 
)}// Server zuerstconst Routen = Reagieren. cloneElement (this.reps. children, {Daten: Daten})Rückkehr (
{Routen}
)}}

In unserer App. js -Komponente, haben wir einen Ereignis-Listener an unseren AppStore angehängt, der den Status erneut rendert, wenn AppStore ein onChange -Ereignis ausgibt. Diese erneut gerenderten Daten werden dann als Requisiten an die untergeordneten Komponenten weitergegeben. Beachten Sie auch, dass wir eine getStore -Methode hinzugefügt haben, die die get-app-store -Aktion zum Rendern unserer Daten auf der Client-Seite sendet. Sobald die Daten von der Cosmic JS API abgerufen wurden, wird eine AppStore Änderung ausgelöst, die AppStore enthält. Daten. ready auf true setzen, das Ladezeichen entfernen und unseren Inhalt rendern.

Seitenkomponenten

Um die erste Seite unseres Blogs zu erstellen, erstellen Sie einen Ordner Pages . Darin erstellen wir eine Datei namens Blog. js mit folgendem Code:

     // Blog. /. / Konfig '// KomponentenHeader aus 'importieren. / Partiale / Kopfzeile 'Importiere BlogList von '. / Teilgebiete / BlogList 'BlogSingle aus importieren. / Teilabschnitt / BlogSingle '// DispatcherImportiere AppDispatcher von '. /. / Dispatcher / AppDispatcher 'Export Standardklasse Blog erweitert Komponente {KomponentenWillMount    {Dies. getPageData   }componentDidMount    {const Daten = das. Requisiten. DatenDokument. title = Konfiguration Seite? ˅. Titel + '| '+ Daten. Seite. Titel}getPageData    {AppDispatcher. Versand({action: 'get-page-data',page_slug: 'Blog',post_slug: das. Requisiten. params. Schnecke})}getMoreArticles    {AppDispatcher. Versand({Aktion: 'Mehr Gegenstände holen'})}machen  {const Daten = das. Requisiten. Datenconst globals = Daten. Globalskonstante Seiten = Daten. Seitenlass main_contentwenn (! dies. Requisiten. Params. Slug) {main_content = & lt; BlogList getMoreArticles = {this. getMoreArticles} data = {Daten} / & gt;} sonst {const Artikel = Daten. Artikel// Erhalte den aktuellen Seiten-Slugconst slug = das. Requisiten. params. Schneckeconst artikel_objekt = _. keyBy (Artikel, 'slug')const article = articles_object [slug]main_content = & lt; BlogEinzelartikel = {article} / & gt;}Rückkehr ( 
{ Hauptinhalt }
)}}

Diese Seite dient als Vorlage für unsere Blog-Liste (home) und unsere einzelnen Blog-Seiten. Hier haben wir eine Methode zu unserer Komponente hinzugefügt, die die Seitendaten vor der Komponentenmontage mithilfe der React lifecycle componentWillMount -Methode erhält. Sobald die Komponente bei componentDidMount gemountet wurde, fügen wir den Seitentitel zu dem Tag </code> des Dokuments hinzu. </p> <p> Zusammen mit einigen der Rendering-Logik in dieser übergeordneten Komponente haben wir die <code> getMoreArticles </code> -Methode enthalten. Dies ist ein gutes Beispiel für einen Call-to-Action, der in einer übergeordneten Komponente gespeichert und über reps für untergeordnete Komponenten verfügbar gemacht wird. </p> <p> Kommen wir nun zu unserer <code> BlogList </code> -Komponente, um zu sehen, wie das funktioniert. </p> <p> Erstellen Sie einen neuen Ordner namens <code> Partials </code> . Erstellen Sie dann eine Datei namens <code> BlogList. js </code> mit folgendem Inhalt: </p> <pre> <code class="jsx language-jsx"> // BlogList. jsImport Reagieren, {Komponente} von 'reagieren'Import von 'lodash'Importiere {Link} von 'react-router'Export Standardklasse BlogList erweitert Komponente {scrollTop <span class="f-c-white l-mr3"> {$ ('html, Körper'). animieren({scrollTop: $ ("# Hauptinhalt"). Offset <span class="f-c-white l-mr3"> . oben}, 500)}machen <span class="f-c-white l-mr3"> {lass Daten = das. Requisiten. DatenLassen Sie item_num = Daten. item_numlass Artikel = Daten. ArtikelLass load_morelet show_more_text = 'Weitere Artikel anzeigen'if (Daten. Laden) {show_more_text = 'Wird geladen "}if (articles && item_num <= Artikel. Länge) {load_more = ( <div> <button className = "btn btn-standard center-block" onClick = {dies. Requisiten. getMoreArticles. bind (das)}> {show_more_text} </ button> </div> )}Artikel = _. nimm (artikel, item_num)lasst articles_html = Artikel. Karte ((Artikel) => {let date_obj = neues Datum (Artikel erstellt)let erstellt = (date_obj. getMonth <span class="f-c-white l-mr3"> + 1) + '/' + date_obj. getDate <span class="f-c-white l-mr3"> + '/' + date_obj. getFullYear <span class="f-c-white l-mr3"> Rückkehr ( <div key = {'Schlüssel-' + Artikel. Slug}> <div className = "post-Vorschau"> <h2 className = "Post-Titel-Zeiger"> <Link zu = {'/ blog /' + Artikel. slug} onClick = {dies. scrollTop}> {Artikel. Titel} </ Link> </h2> <p className = "post-meta"> Erstellt von <a href = "https: // cosmicjs. Letzteres führt die Methode <code> getMoreArticles </code> aus, die als Props von der übergeordneten Seitenkomponente übergeben wurde. Wenn diese Schaltfläche angeklickt wird, springt das Ereignis in die <code> Blog </code> -Komponente und löst dann eine Aktion für den <code> AppDispatcher </code> aus. <code> AppDispatcher </code> fungiert als Vermittler zwischen unseren übergeordneten Komponenten und unserem <code> AppStore </code> . </p> <p> Der Kürze halber werden wir nicht alle <code> Page </code> und <code> Partial </code> Komponenten in diesem Tutorial aufbauen, also laden Sie bitte das GitHub Repo herunter und fügen Sie sie hinzu der Ordner <code> Komponenten </code> . </p> <h2 id="appdispatcher"> AppDispatcher </h2> <p> Der <code> AppDispatcher </code> ist der Operator in unserer Anwendung, der Informationen von den übergeordneten Komponenten akzeptiert und Aktionen an den Store verteilt, der dann unsere Anwendungsdaten erneut rendert. </p> <p> Um dieses Tutorial fortzusetzen, erstellen Sie einen Ordner namens <code> dispatcher </code> . In ihm erstellen Sie eine Datei mit dem Namen <code> AppDispatcher. js </code> , mit folgendem Code: </p> <pre> <code class="jsx language-jsx"> // AppDispatcher. jsImportiere {Dispatcher} aus 'flux'import {getStore, getPageData, getMoreItems} von '. / Aktionen / Aktionenconst AppDispatcher = neuer Dispatcher <span class="f-c-white l-mr3"> // Callback mit AppDispatcher registrierenAppDispatcher. Register ((Nutzlast) => {Lassen Sie Aktion = Nutzlast. AktionSchalter (Aktion) {Fall 'get-app-store':getStore <span class="f-c-white l-mr3"> UnterbrechungFall 'Get-Page-Daten':getPageData (Nutzlast. page_slug, Nutzlast. post_slug)UnterbrechungFall 'get-more-items':getMoreItems <span class="f-c-white l-mr3"> UnterbrechungStandard:zurück wahr}zurück wahr})Standard-AppDispatcher exportieren </code> </pre> <p> Wir haben das <code> Flux </code> -Modul in diese Datei eingeführt, um unseren Dispatcher aufzubauen. Fügen wir jetzt unsere Aktionen hinzu. </p> <h2 id="actionslaststopbeforethestore"> Aktionen: Letzter Stopp vor dem Laden </h2> <p> Lassen Sie uns zunächst <code> Aktionen erstellen. js </code> -Datei in einem neu erstellten Ordner namens <code> actions </code> . Diese Datei enthält folgenden Inhalt: </p> <pre> <code class="jsx language-jsx"> // Aktionen. jsKonfiguration importieren von '. / Konfig 'kosmischen von 'kosmischenjs' importierenImport von 'lodash'// AppstoreImportieren Sie AppStore von '. / Geschäfte / AppStore 'Exportfunktion getStore (Callback) {Let pages = {}Kosmisch. getObjects (Konfiguration, Funktion (Fehler, Antwort) {Lassen Sie Objekte = Antwort. Objekte/ * Globals======================= * /lass globals = AppStore. Daten. GlobalsGlobals. Text = Antwort. Objekt ['Text']Lassen Sie Metafields = Globals. Text. MetafieldsLassen Sie menu_title = _. find (Metafeld, {key: 'menu-title'})Globals. Text. menu_title = menu_title. WertLassen Sie footer_text = _. find (Metafeld, {key: 'footer-text'})Globals. Text. footer_text = Fußtext. Wertlass site_title = _. find (Metafeld, {key: 'site-title'})Globals. Text. site_title = site_title. Wert// SozialGlobals. sozial = Antwort. Objekt ['sozial']Metafeld = Globals. Sozial. Metafieldslass twitter = _. find (Metafeld, {key: 'twitter'})Globals. Sozial. twitter = twitter Wertlass Facebook = _. find (Metafeld, {key: 'facebook'})Globals. Sozial. Facebook = Facebook. WertLass github = _. find (Metafeld, {key: 'github'})Globals. Sozial. GitHub = GitHub. Wert// Navconst nav_items = Antwort. Objekt ['nav']. MetafieldsGlobals. nav_items = nav_itemsAppstore. Daten. Globals = Globals/ * Seiten======================= * /Lass Seiten = Objekte. Art. SeiteAppstore. Daten. Seiten = Seiten/* Artikel======================= * /lass Artikel = Objekte. tippe ['post']Artikel = _. sortBy (Artikel, 'bestellen')Appstore. Daten. Artikel = Artikel/* Arbeitsgegenstände======================= * /lass work_items = Objekte. tippe ['Arbeit']work_items = _. sortBy (Arbeitselemente, 'Auftrag')Appstore. Daten. work_items = work_items// Emittieren Sie die ÄnderungAppstore. Daten. bereit = wahrAppstore. Datenkonstante Seiten = Daten. Seitenconst Seite = _. find (Seiten, {slug: page_slug})const metafields = Seite. Metafieldsif (Metafeld) {const Held = _. find (Metafeld, {Schlüssel: 'Held'})Seite. Held = Konfig. Eimer. media_url + '/' + Held. Wertconst Überschrift = _. find (Metafeld, {key: 'headline'})Seite. Überschrift = Überschrift. Wertconst Subheadline = _. find (Metafeld, {key: 'subheadline'})Seite. Unterspitze = Unterspitze. Wert}if (post_slug) {if (page_slug === 'home') {const Artikel = Daten. Artikelconst Artikel = _. find (Artikel, {slug: post_slug})Seite. Titel = Artikel. Titel}if (page_slug === 'Arbeit') {const work_items = Daten. Arbeitsgegenständeconst work_item = _. Finde (work_items, {slug: post_slug})Seite. title = Arbeitstitel Titel}}Appstore. Daten. Seite = SeiteAppstore. emitChange <span class="f-c-white l-mr3"> }Exportfunktion getMoreItems <span class="f-c-white l-mr3"> {Appstore. Daten. Laden = WahrAppstore. emitChange <span class="f-c-white l-mr3"> setTimeout (Funktion {) {Lassen Sie item_num = AppStore. Daten. item_numlet more_item_num = item_num + 5Appstore. Daten. item_num = mehr_item_numAppstore. Daten. Laden = FalschAppstore. emitChange <span class="f-c-white l-mr3"> }, 300)} </code> </pre> <p> Hier gibt es einige Methoden, die durch diese <code> Aktionen offengelegt werden. js </code> Datei. <code> getStore <span class="f-c-white l-mr3"> </code> stellt eine Verbindung zur Cosmic JS API her, um den Inhalt unseres Blogs zu bedienen. <code> getPageData <span class="f-c-white l-mr3"> </code> ruft die Seitendaten von einem bereitgestellten <code> Slug </code> (oder Seitenschlüssel) ab. <code> getMoreItems <span class="f-c-white l-mr3"> </code> steuert, wie viele Elemente in unseren <code> BlogList </code> und <code> WorkList </code> -Komponenten zu sehen sind. </p> <p> Wenn <code> getMoreItems <span class="f-c-white l-mr3"> </code> ausgelöst wird, wird zuerst AppStore <code> gesetzt. Daten. Laden </code> bis <code> wahr </code> . Dann, 300 Millisekunden später (für Effekt), erlaubt es fünf weitere Elemente, die zu unserer Liste von Blog-Posts oder Arbeitselementen hinzugefügt werden. Schließlich setzt es <code> AppStore. Daten. Laden </code> bis <code> falsch </code> . </p> <h2 id="configureyourcosmicjscms"> Konfigurieren Sie Ihr Cosmic JS CMS </h2> <p> Um mit dem Empfang von Daten aus Ihrer Cloud-gehosteten Inhalts-API auf Cosmic JS zu beginnen, erstellen wir eine <code> Konfiguration. js </code> Datei. Öffne diese Datei und füge folgenden Inhalt ein: </p> <pre> <code class="jsx language-jsx"> // Konfig. jsExportstandard {Seite? ˅: {Titel: 'React Universal Blog'},Eimer: {Slug: Prozess. env. COSMIC_BUCKET || 'Reagieren-Universal-Blog',media_url: 'https: // cosmicjs. com / uploads ",read_key: Prozess. env. COSMIC_READ_KEY || "",write_key: Prozess. env. COSMIC_WRITE_KEY || ''},} </code> </pre> <p> Dies bedeutet, dass Inhalt aus dem Kosmischen JS-Bucket <code> react-universal-blog </code> kommen wird. Um Inhalte für deinen eigenen Blog oder deine eigene App zu erstellen, melde dich für ein kostenloses Konto bei Cosmic JS an. Wenn Sie gefragt werden, ob Sie einen neuen Bucket hinzufügen möchten, klicken Sie auf "Install Starter Bucket" und Sie können die Schritte zum Installieren des "React Universal Blog" befolgen. Sobald dies erledigt ist, können Sie Ihren eigenen Bucket-Slug zu dieser Konfigurationsdatei hinzufügen. </p> <h2 id="serversiderendering"> Server-seitiges Rendern </h2> <p> Jetzt, da wir die meisten unserer React-Komponenten und die Flux-Architektur eingerichtet haben, beenden wir unsere Arbeit, indem wir unseren <code> App-Server bearbeiten. js </code> Datei um alles serverseitig zu rendern. Diese Datei wird folgenden Code haben: </p> <pre> <code class="jsx language-jsx"> // App-Server. jsImport Reagieren von 'reagieren'{match, RoutingContext, Route, IndexRoute} von 'react-router' importierenReactDOMServer von 'read-dom / server' importierenImport Express von "Express"Import von Hogan aus 'Hogan-Express'Konfiguration importieren von '. / Konfig '// Aktionenimport {getStore, getPageData} from '. / Aktionen / Aktionen// RoutenRouten importieren von '. / Routen '// Ausdrückenconst app = ausdrückliche <span class="f-c-white l-mr3"> App Motor ('html', hogan)App set ('views', __dirname + '/ views')App use ('/', express. static (__ Verzeichnisname + '/ public /'))App set ('port', (Prozess. env. PORT || 3000))App get ('*', (req, res) => {getStore (Funktion (Fehler, AppStore) {if (err) {Rücksendung Status (500). Ende ('Fehler')}Übereinstimmung ({routes, location: req. url. Teilt('/')lass page_slug = slug_arr [1]lass post_slugif (page_slug === 'blog' || page_slug === 'Arbeit')post_slug = slug_arr [2]getPageData (page_slug, post_slug)const Seite = AppStore. Daten. Seiteres. Einheimische. Seite = Seiteres. Einheimische. Standort = Konfig. Seite? ˅// Get React Markupconst reactMarkup = ReactDOMServer. renderToStaticMarkup ( <RoutingContext {.renderProps} /> )res. Einheimische. reactMarkup = reactMarkupif (Fehler) {res. Status (500). senden (Fehler. Nachricht)} sonst if (redirectLocation) {res. Weiterleitung (302, redirectLocation. Pfadname + redirectLocation. Suche)} sonst if (renderProps) {// Erfolg!res. Status <button className = "btn btn-standard center-block" onClick = {dies. Requisiten. getMoreArticles. bind (das)}>. render ('index.html')} sonst {res. Status (404). render ('index.html')}})})})App hör zu (app. get ('port'))Konsole. info ('==> Server lauscht' + process. env. NODE_ENV + 'mode')Konsole. info ('==> Gehe zu http: // localhost:% s', app. get ('port')) </code> </pre> <p> Diese Datei verwendet unsere <code> Aktionsmethode getStore </code> , um unseren Inhalt von der Serverseite der Cosmic JS-API abzurufen, und durchläuft anschließend den React Router, um festzustellen, welche Komponente gemountet wird. Alles wird dann in statisches Markup mit <code> renderToStaticMarkup </code> gerendert. Diese Ausgabe wird dann in einer Template-Variablen gespeichert, die von unseren <code> Views / Index verwendet werden soll. html </code> Datei. </p> <p> Lassen Sie uns noch einmal den Abschnitt <code> scripts </code> unseres <code> Pakets aktualisieren. json </code> Datei, so dass es wie das folgende aussieht: </p> <pre> <code class="javascript language-javascript"> "Skripte": {"start": "npm run production","Produktion": "rm -rf public / index. html && NODE_ENV = Produktions-Webpaket -p && NODE_ENV = Produktionsbabel-Knoten-App-Server. js --presets es2015","webpack-dev-server": "NODE_ENV = Entwicklung PORT = 8080 webpack-dev-server --content-base public / --hot --line --devtool inline-source-map --history-api-fallback","development": "cp views / index. html public / index.html && NODE_ENV = entwicklung webpack && npm run webpack-dev-server"}, </code> </pre> <p> Wir können jetzt im Entwicklungsmodus mit heißem Neuladen arbeiten und wir können im Produktionsmodus mit vom Server gerenderten Markup laufen. Führen Sie den folgenden Befehl aus, um die vollständige React Universal Blog Semalt im Produktionsmodus auszuführen: </p> <pre> <code class="bash language-bash"> npm Start </code> </pre> <p> Unser Blog kann nun unter http: // localhost: 3000 angezeigt werden. Es kann auf der Server- und der Browserseite angezeigt werden, und unser Content kann über Semalt JS, unsere Cloud-gehostete Content-Plattform, verwaltet werden. </p> <h3 class="f-c-grey-400"> Empfohlene Kurse </h3> <h2 id="conclusion"> Schlussfolgerung </h2> <p> Reagieren ist eine sehr ausgeklügelte Möglichkeit, UI und Daten in einer Anwendung zu verwalten. Es ist auch eine sehr gute Wahl für das Rendern von serverseitigem Inhalt, für die Befriedigung von Semalt Web Crawlern und für das Rendern von UI Browser-Seiten, damit wir schnell surfen können. Und wir können die besten Ergebnisse beider Welten erzielen, indem wir unsere Anwendung universell machen. </p> <p> Ich hoffe wirklich, dass dir dieser Artikel gefallen hat. Der vollständige Code kann erneut von GitHub heruntergeladen werden. </p> <div class="Article_authorBio l-mv4 t-bg-white m-border l-pa3"> <div class="l-d-f l-pt3"> <img src="/img/8da1afa81fd6a1d6f3bcb8fb1c2c7c371.jpg" alt="Building a React Universal Blog App: Implementing FluxBuilding a React Universal Blog App: Implementing FluxRelated Semalt: jQueryReactNode.jsnpmAjaxMore. Sponsors "/> <div class="f-lh-title"> <div class="f-c-grey-300"> Triff den Autor </div> <div class="f-large"> Tony Spiro <i class="fa fa-twitter"> </i> <i class="fa fa-github"> </i> </div> </div> </div> <div class="f-light f-lh-copy l-mt3"> Tony Spiro ist ein Software-Ingenieur, der sich auf Front-End- und Back-End-JavaScript mit React und Node spezialisiert hat. js. Er ist auch der Mitbegründer und CEO von Cosmic JS. In seiner Freizeit kann er Musik spielen, Filme und Fernsehshows machen und mit seiner Frau und seinem Hund zu Hause rumhängen. </div> </div> </div> </div> <div class="Affiliate-image l-d-n l-d-b--2col l-mr3 l-as-cen l-fs0"> <img src="/img/8da1afa81fd6a1d6f3bcb8fb1c2c7c372.jpg" alt="Building a React Universal Blog App: Implementing FluxBuilding a React Universal Blog App: Implementing FluxRelated Semalt: jQueryReactNode.jsnpmAjaxMore. Sponsors "/> </div> <div class="f-c-grey-400 l-d-f l-ai-cen"> <div class="Affiliate-Box"> <div class="f-larger"> <span class="f-bold Affiliate-title"> Der beste Weg zu lernen Reagieren für Anfänger </span> </div> <div class="f-large"> Wes Bos </div> <div> Ein Schritt-für-Schritt-Trainingskurs, mit dem Sie echte Real-Reality-Reaction aufbauen können. Verwenden Sie den Gutscheincode <strong> 'SITEPOINT' </strong> an der Kasse, um <strong> 25% Rabatt </strong> zu erhalten. </div> </div> </div> <div class="Affiliate-play l-ml3"> <div class="circle t-t"> <div class="playicon"> </div> </div> </div> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </div> </div> </p> </p> </routenpfad> </indexroute> </route> </route> </route> </route> </route> </route> </laden> </nav> </fu> </kopfdaten>

March 1, 2018