← Wiki personnel

Apprendre à créer un site

30 décembre 2023

Créer un site rapidement

Astro

Tuto dans la doc.

Hugo

Article tutoriel : Créer un portfolio ou un blog sans programmer avec Hugo

La documentation de Hugo Book propose ces 4 lignes pour setup rapidement le site et copier le thème à la racine.

React 

npm install -g yarn
yarn create vite
# choisir react puis react-ts
cd site
yarn
yarn dev

Bons moyens d’apprendre à développer

  1. HTML & CSS
  2. JavaScript/TypeScript
  3. React
Trucs à expliquer

📝 JSX is actually closer to JavaScript, not HTML, so there are a few key differences to note when writing it. - className is used instead of class for adding CSS classes, as class is a reserved keyword in JavaScript. - Properties and methods in JSX are camelCase – onclick will become onClick. - Self-closing tags must end in a slash – e.g. <img />

We capitalize custom components to differentiate them from regular HTML elements.

Almost everything in React consists of components, which can be class components, or simple components (which are functions).

📝 A class component must include render(), and the return can only return one parent element.

📝 If the return is contained to one line, it does not need parentheses.

Most React apps have many small components, and everything loads into the main App component.

var Function scope let Block scope const Block scope, cannot be redeclared or reassigned

Tutoriels favoris

https://egghead.io/courses/build-static-pages-dynamically-using-next-js-and-the-notion-api-34849fc4

nextjs + api sqlite :

https://www.youtube.com/watch?v=PxiQDo0CmDE

à voir : nextjs + db avec prisma

https://www.youtube.com/watch?v=FMnlyi60avU

SQL 

create table Person (
	id integer primary key autoincrement,
	name text
);
create table Vehicle (
	id integer primary key autoincrement,
	brand text,
	ownerId integer references Person(id)
);

db.all : receive array of objects

db.get : juste une ligne, un objet

SWR (Next) handles refetching on interval