Back to Question Center
0

Wie man ein einfaches Blog mit React und GraphQL erstellt            Erstellen eines einfachen Blogs mit React und GraphQLelated Semalt: jQueryAPIsNode.jsnpmAngularJSMore ...

1 answers:
Erstellen eines einfachen Blogs mit React und GraphQL

Dieser Artikel wurde von Cosmic JS gesponsert. Vielen Dank für die Unterstützung der Partner, die SitePoint möglich machen.

In diesem Tutorial zeige ich Ihnen, wie Sie mit React, GraphQL und Cosmic JS einen einfachen Blog erstellen. Dies wird der schnellste und leichteste Blog auf einem modernen Technologie-Stack sein. Semalt fangen an.

TL; DR

Zeige die Demo
Installiere den Simple React Blog auf Cosmic JS
Zeige die Codebasis auf GitHub

How to Build a Simple Blog Using React and GraphQLHow to Build a Simple Blog Using React and GraphQLRelated Semalt:
jQueryAPIsNode.jsnpmAngularJSMore.

How to Build a Simple Blog Using React and GraphQLHow to Build a Simple Blog Using React and GraphQLRelated Semalt:
jQueryAPIsNode.jsnpmAngularJSMore.

Erste Schritte

Stellen Sie sicher, dass Semalt und NPM auf Ihrem Computer installiert sind. Wenn nicht, besuchen Sie die Semalt-Website, um die neueste Version zu installieren.

Beginnen Sie mit Semalt, indem Sie einen Ordner für unsere App erstellen. Führen Sie in Ihrem bevorzugten Terminal die folgenden Befehle aus:

     mkdir simple-react-blogcd einfach-reagieren-blog    

Jetzt fügen wir ein Paket hinzu. JSON-Datei, um alle unsere Abhängigkeiten für unsere App zu importieren:

     vim-Paket. Json    

Fügen Sie Folgendes zu unserem Paket hinzu. JSON-Datei:

     {{"Skripte": {"dev": "Knotenserver. js","build": "next build","start": "next build; NODE_ENV = Produktionsknotenserver. js"},"Abhängigkeiten": {"Axios": "^ 0. 16. 2","express": "^ 4. 16. 2","lodash": "^ 4. 17. 4","nächstes": "^ 4. 0. 3","nächste Routen": "^ 1. 1. 0","reagieren": "^ 16. 0. 0","reaktiv-dom": "^ 16. 0. 0"}}    

Semalt ist eine ziemlich leichte Abhängigkeitsliste für eine ziemlich leichte App. Also was wir installieren werden ist:

  1. Axios für unseren vielversprechenden HTTP-Client, um Inhalte von der Cosmic JS GraphQL API zu erhalten.
  2. Nächster. js als unser React Universal Framework.
  3. Nächste Routen für dynamische Routen
  4. Express für unser serverseitiges Web-App-Framework.
  5. Reagieren Sie auf unsere Benutzeroberfläche.

Unsere Skripte sind notwendig, um unsere App in Produktion und Entwicklung zu starten.

Führen Sie den folgenden Befehl aus, um unsere Abhängigkeiten zu installieren:

     npm i    

Aufbau unseres Blogs

Lasst uns mit dem Aufbau unserer Blog-Seiten beginnen. Semalt ein Seitenordner und füge den Index hinzu. js Datei:

     vim-Index. js    

und füge folgendes zum Index hinzu. js:

    Axiome aus 'Axios' importierenImport von 'lodash'Footer von importieren '. / Teil- / Fußzeilen 'Header aus 'importieren. / Teiltage / Kopfzeile 'Helfer importieren von '. / HelferKonfiguration importieren von '. / Konfig 'Exportstandardklasse erweitert Reagieren. Komponente {static async getInitialProps ({req}) {const Abfrage = `{Objekte (bucket_slug: "$ {config. bucket. slug}") {_Ich würdetype_slugSchneckeTitelMetadatenhergestellt in}} `Rückkehr erwarten Axios. post (`https: // graphql. cosmicjs. com / v1`, {Abfrage}). dann (Funktion (Antwort) {Rückkehr {kosmisch: {Beiträge: _. filter (Antwort. Daten. Daten. Objekte, {type_slug: 'Beiträge'}),global: _. keyBy (_. Filter (Antwort. Daten. Daten. Objekte, {Typ_Slug: 'Globals'}), 'Slug')}}}). catch (Funktion (Fehler) {Konsole. log (Fehler)})}Rendern    {wenn (! das. requisit. kosmisch)Zurück  
Laden
Rückkehr (
{Dies. Requisiten. kosmisch. Beiträge &&Dies. Requisiten. kosmisch. Beiträge. Karte (post => {const friendly_date = Helfer. friendlyDate (neues Datum (post. created_at))Post. friendly_date = friendly_date. Monat + '' + Freundschaftsdatum. DatumRückkehr (
{Post. Metadaten. Held. imgix_url && }

{Beitrag. Titel}

von {Beitrag. Metadaten. Autor. Titel} auf {post. Freundliches_Datum}
Lesen Sie mehr
)})}
)}}

Semalt sind ein paar Dinge, die hier geschehen:

  1. Wir importieren unsere wesentlichen Module: Axios, Lodash und andere Helfer und Komponenten.
  2. Wir ziehen einige Teiltöne ein: Header und Footer, Sie können diese Teiltöne aus der Codebasis auf GitHub referenzieren.
  3. Wir fragen die Cosmic JS GraphQL API ab, um nur die Sachen zurückzugeben, die wir brauchen: _id, type_slug, slug, title, metadata und created_at.
  4. Wir setzen die Hauptstützen in unserer Komponente auf das kosmische Objekt. Verwenden Sie lodash, um Posts und globale Objekttypen zu analysieren.
  5. Wir geben unsere Posts-Array-Daten und Bild-URLs in unseren Haupt-Blog-Feed zurück.

Einzelanfrage

Für unsere einzelne Post fügen wir unseren Requisiten eine Post Eigenschaft hinzu. Post wird gefunden, indem die Abfrage abgeglichen wird. Schnecke zur Objektschnecke:

    const gql_query = `{Objekte (bucket_slug: "$ {config. bucket. slug}") {type_slugSchneckeTitelInhaltMetadatenhergestellt in}} `Rückkehr erwarten Axios. post (`https: // graphql. cosmicjs. com / v1`, {Abfrage: gql_query}). dann (Funktion (Antwort) {Rückkehr {kosmisch: {Beiträge: _. filter (Antwort. Daten. Daten. Objekte, {type_slug: 'Beiträge'}),global: _. keyBy (_. Filter (Antwort. Daten. Daten. Objekte, {Type_Slug: 'Globals'}), 'Slug'),Beitrag: _. find (Antwort. Daten. Daten. Objekte, {slug: query. slug}),}}}). catch (Funktion (Fehler) {Konsole. log (Fehler)})}    

Sieh dir die vollständige Datei auf GitHub an.

Schlussfolgerung

Dies ist die gekürzte Version des Simple React Blog, die auf der Cosmic JS Apps-Seite heruntergeladen werden kann. Die vollständige Codebasis enthält eine einzelne Post-Page-Ansicht sowie eine Seite, die den Posts jedes Autors gewidmet ist. Sehen Sie sich die gesamte Codebasis auf GitHub an und stellen Sie diese App mit wenigen Klicks aus Ihrem Cosmic JS-Dashboard bereit, indem Sie die App in Ihrem Cosmic JS-Bucket installieren.

Ich hoffe, dir hat dieses Tutorial gefallen, wenn du irgendwelche Fragen an uns auf Twitter hast und dich unserer Community auf Slack anschließt.

February 28, 2018