FrontMaster - Apprendre le Front-end Avance

Configuration et Structure

Initialisation via CLI et organisation stricte du code.

L'initialisation d'un projet front-end moderne suit des etapes precises :

1CLI d'initialisation : npx create-next-app@latest, npx nuxi init, npm create svelte@latest
2Configuration TypeScript : tsconfig.json avec paths aliases
3Qualite du code : ESLint, Prettier, git hooks (Husky + lint-staged)

Structure recommandee : - app/ ou pages/ : routes et pages - components/ : composants reutilisables - lib/ ou utils/ : fonctions utilitaires - hooks/ : hooks personnalises (React) - types/ : types TypeScript partages - services/ : appels API et logique metier - stores/ : gestion d'etat

Exemple de code

tsconfig.json

json

{
  "compilerOptions": {
    "target": "ES2022",
    "lib": ["dom", "dom.iterable", "esnext"],
    "module": "esnext",
    "moduleResolution": "bundler",
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "paths": {
      "@/*": ["./src/*"],
      "@/components/*": ["./src/components/*"],
      "@/lib/*": ["./src/lib/*"],
      "@/types/*": ["./src/types/*"],
      "@/hooks/*": ["./src/hooks/*"]
    },
    "jsx": "preserve",
    "incremental": true,
    "plugins": [{ "name": "next" }]
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

A retenir

1Toujours initialiser avec le CLI officiel du framework
2Configurer les paths aliases dans tsconfig.json
3Mettre en place ESLint + Prettier des le debut
4Suivre une architecture modulaire et coherente

Exercice pratique

Configurer les paths aliases

Completez le fichier tsconfig.json pour configurer les paths aliases suivants :

@/components/* pointe vers ./src/components/*

@/lib/* pointe vers ./src/lib/*

@/hooks/* pointe vers ./src/hooks/*

@/types/* pointe vers ./src/types/*