Getting started with Preact and the Preact CLI
For the past couple of weeks now I have been getting familiar with Preact and the Preact CLI.
It’s great, it’s similar to React
The { h } isn’t needed
I was quite hung up on the { h } import, I use the VSCode setting to
organise the imports on save.
1"editor.codeActionsOnSave": {2 "source.organizeImports": true3},That stripped out the { h } I was concerned that it would break but
then found out it worked fine without it.
preact-cliautomatically importshfor you in any files that have JSX, so you can safely remove those imports.
Local fonts added to the assets folder
The way I got local fonts into the project was by creating a
fonts.css file and importing that into the template.html file as a
link <link rel="stylesheet" href="./assets/fonts/fonts.css" />
1@font-face {2 font-family: 'My Local Font';3 src: url('./MyLocalFont.ttf') format('truetype');4}As I only have the .ttf font file that is all that I have imported.
If you’re using multiple font files then take a look at the CSS Tricks post on it.
1<!DOCTYPE html>2<html lang="en">3 <head>4 <meta charset="utf-8" />5 <title><% preact.title %></title>6 <meta7 name="viewport"8 content="width=device-width,initial-scale=1"9 />10 <meta name="mobile-web-app-capable" content="yes" />11 <meta name="apple-mobile-web-app-capable" content="yes" />12 <link rel="stylesheet" href="./assets/fonts/fonts.css" />13 <% preact.headEnd %>14 </head>15 <body>16 <% preact.bodyEnd %>17 </body>18</html>This can also do this with Google fonts, something like this:
1<!DOCTYPE html>2<html lang="en">3 <head>4 <meta charset="utf-8" />5 <title><% preact.title %></title>6 <meta7 name="viewport"8 content="width=device-width,initial-scale=1"9 />10 <meta name="mobile-web-app-capable" content="yes" />11 <meta name="apple-mobile-web-app-capable" content="yes" />12 <link13 href="https://fonts.googleapis.com/css2?family=Baloo+Tamma+2:wght@400;700&family=BioRhyme+Expanded:wght@400;700&display=swap"14 rel="stylesheet"15 />16 <% preact.headEnd %>17 </head>18 <body>19 <% preact.bodyEnd %>20 </body>21</html>Back to Top