HTML e CSS in napoletano
Nel JSX i tag si scrivono in napoletano: core (main), cascett (div), chiacchier (p), luccolone (h1), citofono (button), list (ul), voce (li), cartulin (img), vattenn (a)… Il compilatore li traduce in HTML, quindi nella pagina e negli strumenti del browser trovi i tag standard. I nomi inglesi restano validi: div resta div.
Anche gli attributi e gli eventi dei tag hanno un nome napoletano: classe (className), chiave (key), tipo (type), valore (value), esempio (placeholder), da (src), addo (href), stutato (disabled), e per gli eventi quanno-tuocche (onClick), quanno-scrive (onInput), quanno-cagne (onChange), quanno-manne (onSubmit), quanno-premi (onKeyDown)… Valgono solo sui tag HTML: le props dei tuoi componenti restano come le scrivi. I nomi di React restano validi.
stile…` scrive il CSS in napoletano e lo traduce anche lui a compilazione: culore diventa color, sfunno-culore diventa background-color, spazio diventa padding, russo diventa red, :passanno diventa :hover, @quanno diventa @media`. Come nel resto del linguaggio il punto e virgola è opzionale: basta andare a capo.
stile restituisce il CSS e, nel browser, lo aggiunge una volta sola alla pagina. I valori possono arrivare dal codice con ${…} e restano come sono. Per usare Tailwind basta classe con le sue classi: fratm nuovo --tailwind prepara il progetto.
// 'O CSS napulitano: stile`…` se traduce quanno 'o codice se compila
chiamm { stile } da "fratm"
chist è css = stile`
core.pizzeria {
sfunno-culore: janco
spazio: 16px
mostra: flessibile
}
citofono:passanno {
culore: russo
cursore: manella
}
@quanno (larghezza-massima: 600px) {
core.pizzeria { spazio: 8px }
}
`
stamm a dì(css)
// 'E valori ponno arrivà d'o codice
tien culore = "#1d4ed8"
stamm a dì(stile`luccolone { culore: ${culore} }`)Output
main.pizzeria {
background-color: white;
padding: 16px;
display: flex
}
button:hover {
color: red;
cursor: pointer
}
@media (max-width: 600px) {
main.pizzeria { padding: 8px }
}
h1 { color: #1d4ed8 }