[Parte 4] Styling e Layout #66

gabacode · 2021-12-20T18:24:00Z

gabacode
Dec 20, 2021
Maintainer

Parte 4: Styling e Layout

In questa guida cominceremo a dare una forma omogenea al nostro progetto, creando il nostro primo componente riutilizzabile: Layout.js

Questo componente è molto utile perchè fa da contenitore per tutti gli altri componenti che vogliamo canalizzare. Una specie di wrapper "genitore" che contenga tutti gli altri componenti "figli". E' molto utile perchè ad esempio possiamo stabilire un'header, un footer, eventuali scripts che vanno caricati in ogni pagina etc. E' essenzialmente il nostro "tema".

1. Il primo Component

Creando un nuovo file ./src/components/Layout.js andremo ad inserire una semplice logica canalizzante.

./src/components/Layout.js

import React from 'react'

export default function Layout({children}){
    return(
        <div>
            {children}
        </div>
    )
}

Praticamente questa funzione Layout, prende degli argomenti, e li restituisce all'interno di una sua div.

Questo significa che adesso possiamo "wrappare" le nostre pagine, e i nostri templates, all'interno di questo nuovo componente, che funzionerà come un aggregatore, una volta che inseriremo piu elementi al suo interno.

Ad esempio, la nostra homepage potrà essere "wrappata" dal nostro nuovo componente sostituendo il tag <div> con il nostro nuovo <Layout> in questo modo:

./src/pages/index.js

import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/Layout"

export const query = graphql`
  query{
    allWpPost(limit: 10){
      nodes {
        title
        slug
      }
    }
  }
`

export default function Index({data}){
  const posts = data.allWpPost.nodes
  return(
    <Layout>
      {
        posts.map(post => (
          <div>
            <a href={post.slug}>
              {post.title}
            </a>
          </div>
        ))
      }
    </Layout>
  )
}

Notare l'import all'inizio del file, stiamo importando un nuovo componente e lo stiamo usando all'interno di altre pagine (il famoso frullatore).

2. Now do it with style

Un package molto utile su React e simili è react-helmet.
Installiamolo con il comando:

npm install gatsby-plugin-react-helmet react-helmet

Avendo anche installato un nuovo plugin per gatsby, questo andrà inserito all'interno del gatsby-config.js file seguendo queste istruzioni

React-helmet ci consente di "iniettare" tags all'interno del tag <head> di ogni pagina, permettendoci di farlo sia in maniera statica, che in maniera dinamica.

In questo caso, possiamo usare il componente <Helmet> anche per caricare .css esterni, in questo caso potremmo utilizzarlo per importare bootstrap in maniera "tradizionale".

Adesso il nostro Layout.js potrebbe essere ad esempio:

./src/components/Layout.js

import React from 'react'
import { Helmet } from 'react-helmet'

export default function Layout({children}){
    return(
        <>
            <Helmet>
                <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"/> 
            </Helmet>
            <div className="container mt-5">
                {children}
            </div>
        </>
    )
}

Ed ecco Bootstrap sul nostro tema!

Da notare: in JSX si usa className al posto di class, e cosa sono quei tag vuoti? React può restituire solo un componente alla volta a partire dalle sue funzioni, per questo si usano quei tag vuoti, chiamati Fragments. Se React ci scopre a mandare piu di un figlio dalla stessa funzione non la prende bene, quindi vengono usati spesso se una funzione ritorna piu children. Helmet può essere usato anche con tutti gli altri metatags, vedremo piu avanti come "iniettare" titoli dinamici, opengraph etc.

3. Header e Footer

Possiamo creare altri 2 componenti: Header.js e Footer.js da includere all'interno del nostro Layout.js
I contenuti di Header e Footer sono solitamente statici, possiamo prenderli direttamente da WordPress tramite query.

{work in progress...}

Alla fine, possiamo includere i nuovi componenti all'interno del Layout.js, semplicemente importandoli e inserendoli all'interno del fragment.

./src/components/Layout.js

import React from 'react'
import { Helmet } from 'react-helmet'
import Header from './Header'
import Footer from './Footer'

export default function Layout({children}){
    return(
        <>
            <Helmet>
                <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"/> 
            </Helmet>
            <Header/>
            <div className="container mt-5">
                {children}
            </div>
            <Footer/>
        </>
    )
}

Da ora in poi possiamo modificare il nostro template usando le classi native di bootstrap, e/o creando un nostro foglio di stile personalizzato.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Parte 4] Styling e Layout #66

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 0 comments

Select a reply

[Parte 4] Styling e Layout #66

gabacode Dec 20, 2021 Maintainer