Enhance Readme with code examples
Added example HTML and JavaScript code snippets to illustrate reactive components.
This commit is contained in:
10
Readme.md
10
Readme.md
@@ -27,13 +27,23 @@ While other frameworks "guess" what changed by comparing massive DOM trees (Diff
|
|||||||
|
|
||||||
Create reactive, persistent components with a syntax that feels like Vanilla JS, but works like magic:
|
Create reactive, persistent components with a syntax that feels like Vanilla JS, but works like magic:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div id="app"></div>
|
||||||
|
```
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
const Counter = () => {
|
const Counter = () => {
|
||||||
|
// Simple signal
|
||||||
|
const value = $(100);
|
||||||
// One-line persistence: state survives page reloads automatically
|
// One-line persistence: state survives page reloads automatically
|
||||||
const count = $(0, "user-counter-pref");
|
const count = $(0, "user-counter-pref");
|
||||||
|
// Computed: automatically updated when value changes
|
||||||
|
const doubleValue = (()=> value() *2);
|
||||||
|
|
||||||
|
// Create fast HTML with pure JS
|
||||||
return Div({ class: "card" }, [
|
return Div({ class: "card" }, [
|
||||||
H1(`Count: ${count()}`),
|
H1(`Count: ${count()}`),
|
||||||
|
dobleValue()
|
||||||
P("Atomic updates. Zero re-renders of the parent tree."),
|
P("Atomic updates. Zero re-renders of the parent tree."),
|
||||||
Button({
|
Button({
|
||||||
onclick: () => count(c => c + 1),
|
onclick: () => count(c => c + 1),
|
||||||
|
|||||||
Reference in New Issue
Block a user