# Első lépések a jComponent 20-szal

> Töltsd be a jComponent csomagot, állíts be egy értéket a globális állapotban, és jelenítsd meg egy ui-bind elemmel.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: hu
Content-SHA256: 5aee69e6baa9275519ecd28273031bc8ed554237217a98cdde61040d0b0f8c79
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: jcomponent20@3fedd009a277f50fddc608b97afbec553b67c51b
Review: not-recorded

A jComponent 20 egyetlen fájl (`spa.min@20.js`), amely már tartalmazza a jQuery-t. Globális **állapot** objektumot tart: az `SET(path, value)`-vel írsz bele, a `GET(path)`-tel olvasod, és az elemek reagálnak a változásokra. A csomagban van egy stíluslap is, a `spa.min@20.css`, a Total.js ikonbetűtípussal.

A `<ui-bind>` egy elemet köt az állapot egy útvonalához. A `config` attribútum pontosvesszővel tagolt parancsokat sorol fel; a `text:value` az elem szövegét az útvonal értékére állítja. Tölts be mindkettőt a CDN-ről, ahogy az oldal minden példája teszi: `<script src="//cdn.componentator.com/spa.min@20.js"></script>` és `<link rel="stylesheet" href="//cdn.componentator.com/spa.min@20.css" />`. Ha csak az ikonokat szeretnéd, csak ezt töltsd be: `//cdn.componentator.com/icons.min.css` (szkript nem kell hozzá). Az oldal ellenőrzései a `spa.min@20.js` és a `spa.min@20.css` kéréseire ugyanannak a verziónak a helyi másolatával válaszolnak, és az ikonfájlt nem töltik be.

```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>
```

Hívd meg újra a `SET('user.name', 'Louis')`-t, és a címsor megváltozik a te DOM-kódod nélkül.