# Začíname s jComponent 20

> Načítaj balík jComponent, ulož hodnotu do globálneho stavu a zobraz ju elementom ui-bind.

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

jComponent 20 je jediný súbor (`spa.min@20.js`), ktorý už obsahuje jQuery. Udržiava globálny objekt **stavu**: zapisuješ cez `SET(path, value)`, čítaš cez `GET(path)` a elementy reagujú na zmeny. Balík obsahuje aj štýly `spa.min@20.css` s ikonovým fontom Total.js.

`<ui-bind>` viaže element na cestu v stave. Atribút `config` obsahuje príkazy oddelené bodkočiarkou; `text:value` nastaví text elementu na hodnotu cesty. Načítajte oba súbory z CDN, ako to robí každý príklad na tomto webe: `<script src="//cdn.componentator.com/spa.min@20.js"></script>` a `<link rel="stylesheet" href="//cdn.componentator.com/spa.min@20.css" />`. Ak chcete iba ikony, načítajte len `//cdn.componentator.com/icons.min.css` (skript nie je potrebný). Kontroly na tomto webe odpovedajú na požiadavky na `spa.min@20.js` a `spa.min@20.css` lokálnou kópiou rovnakej verzie a súbor s ikonami nenačítavajú.

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

Zavolaj znova `SET('user.name', 'Louis')` a nadpis sa zmení bez toho, aby si napísal akýkoľvek kód pre DOM.
