Kuidas umbes 10 minutiga luua Reacti ja Gatsby toega ajaveeb

Sõbrad / Foto: Genevieve Perron-Migneron saidil Unsplash
Kohustustest loobumine: see oli kirjutatud Gatsby versiooni 1 jaoks, versioon 2 ilmus just välja ja selles on tehtud mõned muudatused. Töötan selle jaoks välja veel ühe õpetuse.

Gatsby on lõõmav kiire staatilise saidi generaator, mis põhineb ReactJS-il.

Staatiline saitide generaator (SSG) on kompromiss kõvakodeeritud HTML-i staatilise saidi ja täispuhutud CMS-i (sisuhaldussüsteem) vahel, nagu näiteks Wordpress.

SSG-d saab kasutada HTML-lehtede genereerimiseks sisupõhiste veebisaitide jaoks (näiteks ajaveebid). Vaja on ainult andmeid lehe sisu kohta ja malli sisu täitmiseks.

See postitus jaguneb viieks osaks:

  1. Alustamine.
  2. Paigutuskomponentide loomine.
  3. Blogipostituste loomine.
  4. Uute lehtede loomine ajaveebi postituste andmetest.
  5. Looge avalehel meie saidi märgistusfailide loend.

Uurime sügavalt Gatsbysse ja selle mõnesse funktsiooni, luues kujuteldava staatilise ajaveebi nimega CodeStack. Allpool on näidatud makett. Lähme! ️

Blogipäevikute leht / üksik blogipostitus

1. Alustamine

Eeltingimused

Kõigepealt kontrollige, kas teie süsteemi on installitud Node.js. Kui ei, minge saidile nodejs.org ja installige oma operatsioonisüsteemi uusim versioon.

Samuti eeldatakse selles artiklis, et teil on ReactJS-ist arusaamist.

Installige CLI

Gatsbyl on käsurida, mis pakub selliseid kasulikke käske nagu:

  • gatsby new: uue Gatsby projekti tellingute jaoks.
  • gatsby development: kuuma uuesti laadimisega veebiarendusserveri käivitamiseks.
  • gatsby build: projekti valmis versiooni ehitamiseks.

Installimiseks tippige oma terminali järgmine teave ja klõpsake sisestusklahvi:

npm install - globaalne gatsby-cli

Võimaldab luua projekti kausta kooditabeli ajaveebi ja navigeerida terminalis sellele.

gatsby uus kooditabel-ajaveeb ja&d cd $ _

Kui käivitate projekti kaustas rakenduse gatsby arenduse, peaks tellitud sait välja nägema järgmine:

Pistikprogrammide lisamine

Gatsby-l on suur ja kasvav pistikprogrammide komplekt. Need on sisuliselt Node.js paketid, mis liidestavad Gatsby API-dega.

Neid saab terminalile NPM (Node Package Manager) kaudu installida ja üldiselt on neil kolm kategooriat: funktsionaalsed, lähte- ja trafo pluginad.

Funktsionaalsed pistikprogrammid

Need pistikprogrammid pakuvad Gatsby saidil või selle arenduskeskkonnas lisafunktsioone. Rakenduse jaoks vajame:

  • gatsby-plugin-reageeri-kiiver: võimaldab muuta päisesilte. Pange tähele, et see on juba meie tellingute projekti installitud.
  • gatsby-plugin-catch-links: katkestab märgistamise ja muude mitte reageerivate lehtede kohalikud lingid ning teeb kliendi poolt pushState'i, et brauser ei peaks lehte värskendama.

Installige pistikprogrammid või ainult teine ​​pistikprogramm.

npm installida gatsby-plugin-reageeri-kiiver gatsby-plugin-catch-links

Iga kord, kui lisame uue pistikprogrammi, peame värskendama faili gatsby-config.js uue pistikprogrammiga, et Gatsby selle ära tunneks ja kasutaks. Me kasutame tagakülgi.

moodul.exports = {
  saidi metaandmed: {
    pealkiri: "Gatsby vaikimisi starter",
  },
  pistikprogrammid: [
    "Gatsby-plugin-reageeri-kiiver",
    "gatsby-plugin-catch-links",
  ],
}

Allika pluginad

Need pistikprogrammid „hangivad” andmeid kaugetest või kohalikest asukohtadest sinna, kuhu Gatsby helistab. Oma kohaliku ketta Markdownis postituste kirjutamiseks vajame:

  • gatsby-source-failisüsteem: hangib andmeid teie arvuti failisüsteemis olevate failide kohta.
npm install gatsby-source-failisüsteemi

Värskendage faili gatsby-config.js:

moodul.exports = {
  saidi metaandmed: {
    pealkiri: "Gatsby vaikimisi starter",
  },
  pistikprogrammid: [
    "Gatsby-plugin-reageeri-kiiver",
    "gatsby-plugin-catch-links",
    {
      lahenda: "gatsby-source-failisüsteem",
      valikud: {
        tee: `$ {__ dirname} / src / pages",
        nimi: 'lehed',
      },
    }
  ],
}

Mis siin toimub? Valikute objekti saab edasise konfigureerimise jaoks edastada pistikprogrammile. Me edastame failisüsteemi tee (st kus asuvad meie Markdown-failid) ja seejärel lähtefailide nime, et Gatsby teaks meie lähtefailidest ja sellest, kus trafo pistikprogramme rakendada.

Trafo pistikprogrammid

Need pistikprogrammid muudavad töötlemata andmed sõlmedest kasutatavaks andmevorminguks. Näiteks vajame:

  • gatsby-transformer-remark: see muudab kohaliku ketta märkimise .md-failides kirjutatud ajaveebi postitused renderdamiseks HTML-ideks.
npm install gatsby-transformer-remark

Värskendage faili gatsby-config.js uuesti.

moodul.exports = {
  saidi metaandmed: {
    pealkiri: "Gatsby vaikimisi starter",
  },
  pistikprogrammid: [
    "Gatsby-plugin-reageeri-kiiver",
    "gatsby-plugin-catch-links",
    {
      lahenda: "gatsby-source-failisüsteem",
      valikud: {
        tee: `$ {__ dirname} / src / pages",
        nimi: 'lehed',
      },
    },
    "gatsby-trafo-märkus",
  ],
}
Hästi tehtud! / Krediit: Nigel Payne

2. Paigutuse komponentide loomine

Gatsby abil saate hõlpsalt luua paigutuse komponente. Paigutuse komponendid on teie saidi jaotised, mida soovite jagada mitmele lehele. Ehitatava ajaveebi jaoks on need päised ja külgribad.

Juurkaustast vaadake src / paigutusi. Avate faili index.js, kus määratleme paigutuse komponendid. index.css tuli juba stiilidega.

Pärast faili index.js uurimist näete, et kaks komponenti on juba loodud: Header ja TemplateWrapper. Pakime TemplateWrapperis oma saidi sisu küljenduskomponentidega, mida soovime mitmele lehele esindada.

Selle teevad võimalikuks laste () rekvisiidid. See muudab meie saidi kõik paigutuseta komponendid, kuhu see paigutatakse. Pange tähele, et erinevalt React laste rekvisiitidest on paigutuskomponentidele edastatud laste tugipostid funktsioon ja neid tuleb täita.

Kõigepealt looge uus kaust ja CSS-fail aadressil src / stiilid / layout-overide.css. Lisage faili index.js impordiloendisse. Mõne olemasoleva stiilireegli alistamiseks peame selle pärast index.css importima.

importida reageeri 'reageerima'
impordi PropTypes 'prop-tüüpi'
impordi link 'gatsby-link'
impordi kiiver 'reageeri-kiivrist'
import './index.css'
import "../styles/layout-overide.css";

Avage layout-overide.css ja kleepige järgmised stiilireeglid. Neid pole vaja välja mõelda.

* {
    taust: # f5f5f5;
    värv: must;
}
html {
    kõrgus: 100%;
}
keha {
    kõrgus: 100%;
    ääris: 5 px tahke # ffdb3a;
}
h1 {
    kirjasuurus: 1,5rem;
    joone kõrgus: 0,5rem;
}
p, div {
    kirjasuurus: 16 pikslit;
}

Värskendage päise komponenti.

const Header = () => (
  
    
     

                   CodeStack                

    
  
);

Samuti looge külgriba komponent.

const Külgriba = (rekvisiidid) => (
     {props.title}. {props.description}
);

Soovime, et külgriba ja renderdatud {children ()} komponendid käituksid reageerival viisil järgmiselt:

Kuna meediumipäringuid pole Reakty'is lihtne määratleda, leidsin raamatukogu nimega react-media, mis on CSS-i meediumipäringu komponent Reakty jaoks. Installige see.

npm install - salvestage reageerimiskandja

See pakub komponenti , mis kuulab CSS-i meediumipäringu vasteid ja pakub asju vastavalt sellele, kas päring sobib või mitte.

Lisage see meie faili impordiloendisse.

impordi meediat 'reageeri meediumist'

Võimaldab paigutada kõik (päised, külgriba ja lapsed () komponendid) viisil, mida me TemplateWrapperis soovime. Tehke järgmised muudatused (vabandage minu nime häbitut pistikut):

const TemplateWrapper = ({lapsed}) => (
  
              
               {vasted =>           tikud ? (             
              
{lapsed ()}
            
          ): (             
              
                {lapsed ()}               
                                                
            
          )         }            
  
);Sa said selle!  / Krediit: Levon

Mis juhtub selles monoliitses koodiplokis? React meedium kasutab ternaarset operatsiooni, et teha kindlaks, mida renderdada, maksimaalse laiuse 848px põhjal. Kui ekraan vastab laiusele, renderdatakse ainult päise- ja alamkomponendid.


        {vasted =>
          tikud ? (
            ... renderdatavad asjad ...
          ): (
            ... renderdatavad asjad ...
          )
        }
      
Ternaariumi värskendaja. Kui tingimus on tõene, tagastab operaator väärtuse expr1; vastasel juhul tagastab väärtus expr2.

Kui märkasite, kasutasime laste () ja külgriba komponentide paigutuse jaoks ka Flexboxi.

Käivitage gatsby arendus terminalis ja meie staatiline ajaveeb peaks nüüd välja nägema järgmine:

Kuju võtmine

3. Blogipostituste loomine

Nüüd saame asuda tegelike blogipostituste loomisse. Gatsby kasutab GraphQL-i andmete hankimiseks ühest või mitmest allikast, näiteks teie kohalik ketas, Wordpress API jne.

Mulle isiklikult meeldib see, et saan luua staatilist ajaveebi ja tuua sisu WordPressi API-st. Minu kliendil on juurdepääs Wordpressi redigeerijale, kus ta loob postitusi, ja ma väldin Wordpressi saidi arendamise kõigi probleemidega tegelemist.

Selles postituses laadime andmed Markdowni failidest, mille loome oma kohalikule kettale. Varem konfigureeritud plugina gatsby-source-failisüsteem eeldab, et meie sisu on src / lehtedes, nii et see on täpselt sinna, kuhu me selle paneme!

Tüüpiline praktika ajaveebipostituste korral on nimetada kausta nimega MM-PP-AAAA-pealkiri. Saate seda nimetada mis iganes soovite või lihtsalt paigutada märgistusfail kausta / pages.

Loome kausta src / pages / 12–22–2017-esimene postitus ja asetage index.md selle sisse. Kirjutage:

---
tee: "/ tere-maailm"
kuupäev: "2017-07-12T17: 12: 33.962Z"
pealkiri: "Minu esimene Gatsby postitus"
---
Oooooh-weeee, mu esimene blogipostitus!
Esimene postitus Ipsum on peamine edu võti. Palju õnne, mängisite ise. Ümbritse end inglitega. Tähistage edu õigesti, ainus viis, õun.
 
Põhiline on juua kookospähklit, värsket kookospähklit, usalda mind. Munavalged, kalkunivorsti, nisukast, vesi. Muidugi ei taha nad, et me hommikusööki sööksime, nii et hakkame hommikusööki nautima.

Kriipsudega ümbritsetud plokki nimetatakse esiküljeks. Siin täpsustatud andmed, aga ka muud Markdown-failid tunnevad ära gatsby-transformer-remark plugin.

Pistikprogramm teisendab teie märgistusfaili esmatasandi metaandmete osa esmatähtsaks ja sisu osa (Yippeeee, minu esimene ajaveebi postitus!) HTML-i.

Kui hakkame ajaveebi lehti genereerima otse jaotises 4 (järgmine jaotis) märgistusfailidest, kasutatakse faili renderdamiseks URL-i tee täpsustamiseks tee. Näiteks renderdatakse ülalolev fail failil localhost: 8000 / hello-world.

Enne seda laseme luua malli, mis renderdab kõik märgistusfailid oma ajaveebilehele. Looge fail src / templates / blog-post.js (palun looge kaust thesrc / templates).

importida reageeri "reageeri" alt;
importida kiiver "reageeri kiivrist";
eksporti vaikefunktsiooni mall ({
  andmed
}) {
  const post = data.markdownRemark;
  tagasi (
    
            
        

{post.frontmatter.title}

        
      
    
  ); }

Oleme loonud komponendi Malli andmesideobjekti vastuvõtmiseks, mis pärineb selle graafiku päringust, mida me kirjutame.

Taas on vaja andmete komponendisse toomiseks GraphQL päringut. Gatsby süstib päringu tulemuse malli komponendisse andmete ja markdownRemarki kaudu.

Leiame, et omadus markdownRemark sisaldab kõiki Markdown-faili üksikasju.

Võimaldab nüüd päringu tegelikult teha. See tuleks paigutada malli komponendi alla:

eksport const pageQuery = graphql`
  päring BlogPostByPath ($ path: String!) {
    markdownRemark (esikülg: {tee: {eq: $ path}}) {
      html
      esikülg {
        kuupäev (formatString: "KKPM PP, AAAA")
        tee
        pealkiri
      }
    }
  }
`
;

Kui te pole GraphQL-iga tuttav, proovin kirjeldada, mis siin toimub. GraphQL-i kohta lisateabe saamiseks kaaluge seda suurepärast ressurssi.

GraphQL on lihtsalt Facebooki idee teatud tüüpi serverist. Nad on kirjutanud spetsifikatsiooni, milliseid päringuid saab sellele serverile saata ja kuidas server peaks reageerima. GraphQL API on parem kui REST, kuna kirjeldate täpseid andmeid, mida klient-pool vajab, nii et pole vaja andmeid enam ala tõmmata ega üle tõmmata.

See tähendab, et peate looma oma GraphQL-serveri. Meie õnneks tuleb GatsbyJS koos oma GraphQL serveriga karbist välja.

Ülaltoodud koodi korral on BlogPostByPath päring, mille tulemuseks on ajaveebi postituse tagastamine. See tagastatakse mallikomponendisse süstimise andmetena.

Me edastame ajakirja BlogPostByPath argumendi $, et saada tagasi blogipostitus, mis on seotud praegu vaadatava rajaga.

Lisaks muutis markdownRemark meie tagasivõtmise faile ümber. Seda käsitletakse atribuutina, mille sisu on saadaval saidil data.markdownRemark.

HTML-ile pääsesime data.markdownRemark.html kaudu. Samuti võib esiletõstuki sisule, mille lõime kriipsuploki abil, pääseda juurde aadressil data.markdownRemark.title jne.

Kogu ajaveeb-mall.js peaks välja nägema selline:

importida reageeri "reageeri" alt;
importida kiiver "reageeri kiivrist";
eksporti vaikefunktsiooni mall ({
  andmed
}) {
  const post = data.markdownRemark;
  tagasi (
    
            
        

{post.frontmatter.title}

        
      
    
  ); }
eksport const pageQuery = graphql`
  päring BlogPostByPath ($ path: String!) {
    markdownRemark (esikülg: {tee: {eq: $ path}}) {
      html
      esikülg {
        kuupäev (formatString: "KKPM PP, AAAA")
        tee
        pealkiri
      }
    }
  }
`
;

Sel hetkel:

Magus!

4. Uute lehtede loomine ajaveebi postituste andmetest.

Gatsby pakub sõlme API-d, mis pakub funktsioone dünaamiliste lehtede loomiseks blogipostitustest. See API on avatud projekti juurkataloogi failis thegatsby-node.js. See fail võib eksportida mitut sõlme API-d, kuid meid huvitab createPages API.

Kasutage järgmist koodilõigu plokki, nagu on ette nähtud ametlikes dokumentides (Pange tähele, et blogPostTemplate tee oli seatud kajastama meie oma):

const path = nõuda ('tee');
export.createPages = ({robeActionCreators, graphql}) => {
  const {createPage} = tiedActionCreators;
const blogPostTemplate = path.resolve (`src / templates / blog-post.js`);
tagasi graafql (`{
    allMarkdownRemark (
      sortimine: {tellimus: DESC, väljad: [eesmine mall__kuupäev]}
      piir: 1000
    ) {
      servad {
        sõlme {
          katkend (prunePikkus: 250)
          html
          id
          esikülg {
            kuupäev
            tee
            pealkiri
          }
        }
      }
    }
  } `)
    . seejärel (tulemus => {
      if (tulemus.vead) {
        tagastage Promise.reject (tulemus.vead);
      }
tulemus.data.allMarkdownRemark.edges
        .forEach (({{node}) = = {
          createPage ({
            tee: node.frontmatter.path,
            komponent: blogPostTemplate,
            kontekst: {} // täiendavaid andmeid saab konteksti kaudu edastada
          });
        });
    });
}

Kontrollige, kas see töötab. Soovitan sulgeda oma ristsüsteemi akna ja peatada serveri arendamise terminalist, kasutades ctrl c. Nüüd käivitage gatsby arendus uuesti ja avage http: // localhost: 8000 / hello-world.

jah

Looge veel üks fail src / pages / 24–12–2017-learning-grid / index.md

---
tee: "/ veel üks"
kuupäev: "2017-07-12T17: 12: 33.962Z"
pealkiri: "Minu teine ​​Gatsby postitus"
---
Elus on küll blokeeringuid, kuid tuleme sellest üle. Spetsiaalne riidehoiatus. Ärge kunagi mängige ennast. Suurema edu võti on massaaži saamine kord nädalas, väga oluline, peamine võti, riidejutt.
  // mõni css-ruutkood  

Jällegi sulgege oma põrkeakna aken, peatage gatsby serveri arendamine. Käivitage gatsby arenema uuesti ja avage http: // localhost: 8000 / other-one. Seda näidatakse:

Jätkake soovi korral ja looge oma lehed.

5. Koostage sihtlehel meie saidi märgistusfailide loend.

Tellingutega Gatsby saidiga kaasas olev vaikimisi maandumisleht asub aadressil src / pages / index.js. Siin määratleksime malli ja teeksime päringu selle sisestamiseks .md-failide loendi andmetega. Tee seda:

importida reageeri "reageeri" alt;
impordi link saidist "gatsby-link";
importida kiiver "reageeri kiivrist";
import '../styles/blog-listing.css';
eksporti vaikefunktsioon Indeks ({andmed}) {
  const {servad: postitused} = data.allMarkdownRemark;
  tagasi (
    
      {postitused         .filter (post => post.node.frontmatter.title.length> 0)         .map (({sõlm: post}) => {           tagasi (             
              

                 {post.frontmatter.title}               

              

{post.frontmatter.date}

              

{post.excerpt}

            
          );         })}     
  ); }
eksport const pageQuery = graphql`
  päring IndexQuery {
    allMarkdownRemark (sort: {järjekord: DESC, väljad: [frontmatter___date]})) {
      servad {
        sõlme {
          katkend (prunePikkus: 250)
          id
          esikülg {
            pealkiri
            kuupäev (formatString: "KKPM PP, AAAA")
            tee
          }
        }
      }
    }
  }
`;

Ma usun, et olete praegusel hetkel armetu ja juba toimuvaga tuttav. Pange tähele, et me kirjutasime impordi ülalpool, mida pole olemas. Nüüd looge fail /styles/blog-listing.css:

div.blog-eelvaade {
    ääris-alt: 2xx tahke # e6e6e6;
    polsterdus: 1rem;
    polster-põhi: 1rem;
    veerise põhi: 1rem;
}
h1> * {
    kirjasuurus: 1,2rem;
    teksti kaunistamise rida: puudub;
}
h2 {
    fondi suurus: 0,8rem! oluline;
    kirjasuurus: 100! oluline;
}

Taaskäivitage server, külastage maandumislehte ja te peaksite nägema kirjet tööl:

Järeldus

Oleme jõudnud selle õpetuse lõpuni. Täname, et lugesite siiani.

See postitus on vaid jäämäe tipp, arvestades, kui palju asju võiksite Gatsbyga teha. Uurige, kuidas saaksite rakendusi rakendada:

Lõpliku lähtekoodi saate haarata siit. Toetage mind julgelt (devapparel.co) ja vaadake seda vaadates hea välja. Samuti kommenteerige või jagage seda postitust. Täname, et lugesite!

P.S Ma töötan koos Rehangi raamatuga Ohans Emmanueli juures, mis annaks teile Reafati kapteniks, ehitades 30 päeva jooksul 30 väikest projekti. Kui soovite selles osas end kursis hoida, liituge meililistiga. Aitäh!

Vaata ka

Kuidas luua tehnoloogiahuvilistele ja visionääridele varase turutoote müügiplaanKuidas lennukit süüa: pilkupüüdmiskursusICO-dele suur Google'i keeld. Kuidas ellu jääda?Kuidas kirjutada õigeid sõnuKuidas luua ühisteksti redaktorit Swifti abil?