# Démarrer avec jComponent 20

> Chargez le bundle jComponent, définissez une valeur dans l'état global et affichez-la avec un élément ui-bind.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: fr
Content-SHA256: 67e6d27473c0c7fc1d2e03acc7f1a46b8682d6c36ba7af20c6b071650eff86fe
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: jcomponent20@3fedd009a277f50fddc608b97afbec553b67c51b
Review: not-recorded

jComponent 20 est un seul fichier (`spa.min@20.js`) qui contient déjà jQuery. Il garde un objet d'**état** global : vous y écrivez avec `SET(path, value)`, vous le lisez avec `GET(path)`, et les éléments réagissent aux changements. Le bundle comprend aussi une feuille de style, `spa.min@20.css`, avec la police d'icônes Total.js.

`<ui-bind>` lie un élément à un chemin de l'état. L'attribut `config` liste des commandes séparées par des points-virgules ; `text:value` définit le texte de l'élément avec la valeur du chemin. Chargez les deux depuis le CDN, comme le fait chaque exemple de ce site : `<script src="//cdn.componentator.com/spa.min@20.js"></script>` et `<link rel="stylesheet" href="//cdn.componentator.com/spa.min@20.css" />`. Si vous ne voulez que les icônes, chargez seulement `//cdn.componentator.com/icons.min.css` (aucun script n'est nécessaire). Les vérifications de ce site répondent aux requêtes de `spa.min@20.js` et `spa.min@20.css` avec une copie locale de la même version et ne chargent pas le fichier d'icônes.

```html public/index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>jComponent</title>
	<link rel="stylesheet" href="//cdn.componentator.com/spa.min@20.css" />
	<script src="//cdn.componentator.com/spa.min@20.js"></script>
</head>
<body>

	<h1>Hello <ui-bind path="user.name" config="text:value"></ui-bind></h1>

	<script>
		SET('user.name', 'Peter');
	</script>

</body>
</html>
```

Appelez à nouveau `SET('user.name', 'Louis')` et le titre change sans aucun code DOM de votre part.