ورقة غش مكتبة Riot.js

Riot.js هي مكتبة واجهة مستخدم أنيقة وخفيفة تعتمد على المكونات، وتقدم تصيير Virtual DOM بأقل قدر ممكن من الكود المكرر.

تعريف المكون (my-component.riot)

<user-card>
  <div class="card">
    <h3>{ state.name }</h3>
    <p>Role: { props.role }</p>
    <button onclick="{ handleIncrement }">Likes: { state.likes }</button>
  </div>

  <script>
    export default {
      onBeforeMount(props, state) {
        this.state = {
          name: props.initialName || 'Anonymous',
          likes: 0
        };
      },
      handleIncrement() {
        this.update({
          likes: this.state.likes + 1
        });
      }
    }
  </script>
</user-card>

---

أحداث دورة الحياة (Lifecycle Events)

---

الحلقات والشروط (Loops & Conditionals)

<!-- الشروط الشرطية -->
<p if="{ state.isLoggedIn }">مرحباً بعودتك!</p>
<button if="{ !state.isLoggedIn }">تسجيل الدخول</button>

<!-- الحلقات التكرارية -->
<ul>
  <li each="{ item in state.items }">
    { item.title }
  </li>
</ul>

---

مراجع مفيدة

• التوثيق الرسمي لمكتبة Riot.js