Welcome to the Svelte reference documentation! This is intended as a resource for people who already have some familiarity with Svelte and want to learn more about using it.
Bienvenue sur la documentation Svelte de référence ! Ces pages sont pensées comme une ressource utile pour des personnes ayant déjà une certaine familiarité avec Svelte, et souhaitant en apprendre davantage.
If that's not you (yet), you may prefer to visit the [interactive tutorial](https://learn.svelte.dev) or the [examples](/examples) before consulting this reference. You can try Svelte online using the [REPL](/repl). Alternatively, if you'd like a more fully-featured environment, you can try Svelte on [StackBlitz](https://sveltekit.new).
Si ce n'est pas (encore) le cas pour vous, vous préférerez probablement jeter un oeil au [tutoriel interactif](/tutorial) ou aux [exemples](/examples) avant de consulter cette section. Vous pouvez essayez Svelte en ligne en utilisant le [REPL](/repl), ou bien sur [StackBlitz](https://sveltekit.new) si vous préférez un environnement de développement plus complet.
## Start a new project
Cette documentation en français, ainsi que l'intégralité du contenu en français de ce site est une **traduction bénévole et non officielle** de la [documentation et du site officiels](https://svelte.dev) (en anglais). N'hésitez pas à y jeter un oeil. Vous pouvez aussi [nous faire part de vos suggestions de traduction](https://github.com/Svelte-Society-Fr/svelte/issues) si celles que vous trouverez dans ces pages ne vous conviennent pas.
We recommend using [SvelteKit](https://kit.svelte.dev/), the official application framework from the Svelte team:
## Démarrer un nouveau projet
Nous recommandons d'utiliser [SvelteKit](https://kit.svelte.dev/), le framework d'application officiel créé par l'équipe Svelte :
```
npm create svelte@latest myapp
@ -17,18 +19,18 @@ npm install
npm run dev
```
SvelteKit will handle calling [the Svelte compiler](https://www.npmjs.com/package/svelte) to convert your `.svelte` files into `.js` files that create the DOM and `.css` files that style it. It also provides all the other pieces you need to build a web application such as a development server, routing, deployment, and SSR support. [SvelteKit](https://kit.svelte.dev/) uses [Vite](https://vitejs.dev/) to build your code.
SvelteKit se charge d'exécuter [le compilateur Svelte](https://www.npmjs.com/package/svelte) pour convertir vos fichiers `.svelte` en fichiers `.js` qui créent le DOM, et en fichiers `.css` qui le stylisent. Il fournit également tout ce dont vous avez besoin pour créer une application web, comme un serveur de développement, du routage, et des outils de déploiement. [SvelteKit](https://kit.svelte.dev/) utilise [Vite](https://vitejs.dev/) pour empaqueter votre code.
### Alternatives to SvelteKit
### Alternatives à SvelteKit
If you don't want to use SvelteKit for some reason, you can also use Svelte with Vite (but without SvelteKit) by running `npm init vite` and selecting the `svelte` option. With this, `npm run build` will generate HTML, JS and CSS files inside the `dist` directory. In most cases, you will probably need to [choose a routing library](/faq#is-there-a-router) as well.
Si vous ne souhaitez pas utiliser SvelteKit, vous pouvez aussi utiliser Svelte (sans SvelteKit) avec Vite en exécutant `npm init vite`, puis en choisissant l'option `svelte`. De cette manière, `npm run build` génèrera les fichiers HTML, JS et CSS dans le dossier `dist`. Dans la plupart des cas, vous aurez aussi probablement besoin de [choisir une librairie de routing](/faq#is-there-a-router).
Alternatively, there are [plugins for all the major web bundlers](https://sveltesociety.dev/tools#bundling) to handle Svelte compilation — which will output `.js` and `.css` that you can insert into your HTML — but most others won't handle SSR.
Il existe également des [plugins pour les bundlers web majeurs](https://sveltesociety.dev/tools#bundling) pour gérer la compilation Svelte — qui génèreront les `.js` et `.css` à insérer dans votre HTML — mais la plupart ne gèreront pas pas le rendu côté serveur (SSR).
## Editor tooling
## Outillage d'éditeur
The Svelte team maintains a [VS Code extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) and there are integrations with various other [editors](https://sveltesociety.dev/tools#editor-support) and tools as well.
L'équipe Svelte maintient une extension [VS Code](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode), et des intégrations existent également pour d'autres [éditeurs](https://sveltesociety.dev/tools#editor-support) ou outils.
## Getting help
## Obtenir de l'aide
Don't be shy about asking for help in the [Discord chatroom](https://svelte.dev/chat)! You can also find answers on [Stack Overflow](https://stackoverflow.com/questions/tagged/svelte).
Si vous rencontrez des difficultés, vous trouverez de l'aide sur le [Discord officiel](https://svelte.dev/chat) ou sur le [Discord francophone](/chat). Vous trouverez également des réponses sur [StackOverflow](https://stackoverflow.com/questions/tagged/svelte).
description: 'Svelte components are built on top of HTML. Just add data.'
description:
"Les composants Svelte sont construits en se basant sur du HTML. Vous n'avez qu'à ajouter de la donnée."
},
{
id: 'nested-components',
title: 'Scoped CSS',
title: 'CSS scopé',
description:
'CSS is component-scoped by default — no more style collisions or specificity wars. Or you can<ahref="/blog/svelte-css-in-js">use your favourite CSS-in-JS library</a>.'
'Votre CSS est par défaut scopé à votre composant — plus aucune collision de style ou guerre de spécificité. Vous pouvez aussi<ahref="/blog/svelte-css-in-js">utiliser votre librairie CSS-in-JS préférée</a>.'
},
{
id: 'reactive-assignments',
title: 'Reactivity',
title: 'Réactivité',
description:
'Trigger efficient, granular updates by assigning to local variables. The compiler does the rest.'
"Déclenchez des mises à jour granulaires en assignant à des variables locales. Le compilateur s'occupe du reste."
},
{
id: 'svg-transitions',
title: 'Transitions',
description:
'Build beautiful UIs with a powerful, performant transition engine built right into the framework.'
"Construisez de superbes interfaces à l'aide d'un moteur de transition puissant et performant intégré dans le framework."
Romain l'Ourson
3 years ago
committed by
Romain Crestey