diff --git a/README.CN.md b/README.CN.md index b26f908b2..3a2f78e5f 100644 --- a/README.CN.md +++ b/README.CN.md @@ -5,6 +5,36 @@

Omi - 前端跨框架跨平台框架

基于 Web Components 并支持 IE8+(omio),小程序(omip) 和 任意前端框架集成

+## 快速概览 + +整个组件树共享数据,并且数据变更自动更新视图。 + +```jsx +import { define, render } from 'omi' + +class Store { + data = { + count: 1 + } + sub = () => { + this.data.count-- + } + add = () => { + this.data.count++ + } +} + +define('my-counter', ['count'], _ => ( +
+ + {_.store.data.count} + +
+)) + +render(, 'body', new Store) +``` + ## Omi 生态 [→ Omi 生态学习路线图](https://github.com/Tencent/omi/tree/master/assets/rm.md) diff --git a/README.md b/README.md index e51afe8bf..42b68a1ee 100644 --- a/README.md +++ b/README.md @@ -5,6 +5,36 @@ English | [简体中文](./README.CN.md)

Omi - Front End Cross-Frameworks Framework

Merge Web Components, JSX, HTM, Virtual DOM, Functional style and Proxy into one framework with tiny size and high performance. Write components once, using in everywhere, such as Omi, React, Preact, Vue or Angular.

+## Quick Preview + +Pass data through the component tree without having to pass props down manually at every level by store, auto update the view on demand. + +```jsx +import { define, render } from 'omi' + +class Store { + data = { + count: 1 + } + sub = () => { + this.data.count-- + } + add = () => { + this.data.count++ + } +} + +define('my-counter', ['count'], _ => ( +
+ + {_.store.data.count} + +
+)) + +render(, 'body', new Store) +``` + ## Ecosystem of Omi [→ Omi Developer Roadmap](https://github.com/Tencent/omi/tree/master/assets/rm.md) diff --git a/packages/omi/README.md b/packages/omi/README.md index 701313357..9adb40c98 100644 --- a/packages/omi/README.md +++ b/packages/omi/README.md @@ -5,6 +5,37 @@ English | [简体中文](https://github.com/Tencent/omi/blob/master/README.CN.md

Omi - Front End Cross-Frameworks Framework

Merge Web Components, JSX, HTM, Virtual DOM, Functional style and Proxy into one framework with tiny size and high performance. Write components once, using in everywhere, such as Omi, React, Preact, Vue or Angular.

+ +## Quick Preview + +Pass data through the component tree without having to pass props down manually at every level by store, auto update the view on demand. + +```jsx +import { define, render } from 'omi' + +class Store { + data = { + count: 1 + } + sub = () => { + this.data.count-- + } + add = () => { + this.data.count++ + } +} + +define('my-counter', ['count'], _ => ( +
+ + {_.store.data.count} + +
+)) + +render(, 'body', new Store) +``` + ## Ecosystem of Omi #### Base