Nautil is a javascri【作者：唐霜】转载请注明出处：www.tangshuang.netpt framework based o转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。n React which is a m【未经授权禁止转载】【转载请注明来源】odern reactive UI li著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】brary. In the ecosys【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】tem of react, develo转载请注明出处：www.tangshuang.net原创内容，盗版必究。pers are always foll【作者：唐霜】【作者：唐霜】owing Flux architect未经授权，禁止复制转载。【作者：唐霜】ure.

However, its not eas【版权所有，侵权必究】【本文首发于唐霜的博客】y to write applicati【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】on level code with r【作者：唐霜】未经授权，禁止复制转载。eact. Even though we本文作者：唐霜，转载请注明出处。【转载请注明来源】 have redux and many【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。 third libraries, we【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net still should have t【本文受版权保护】【版权所有】唐霜 www.tangshuang.neto waste much time on【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】 resolving code orga【作者：唐霜】【版权所有】唐霜 www.tangshuang.netnization.

To make it easy to u【本文首发于唐霜的博客】【作者：唐霜】se react syntax to c【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.netreate applications, 转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。I wrote a js framewo著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。rk which called Naut未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。il. It is much diffe【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.netrence from native re未经授权，禁止复制转载。【转载请注明来源】act development.

Now, follow me to ha未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。ve a glance of what 原创内容，盗版必究。【原创内容，转载请注明出处】Nautil provides.

1. Observer

The whole framework 未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】is built on the idea本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】 of Observer Pattern未经授权，禁止复制转载。【未经授权禁止转载】. This help develope本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。rs write less code t【转载请注明来源】【转载请注明来源】o implement reactive【版权所有，侵权必究】【原创不易，请尊重版权】 system. For example【作者：唐霜】【本文首发于唐霜的博客】:

import { Component, Store } from 'nautil'
import { Observer, Text } from 'nautil/components'

const store = new Store({ age: 10 })

class SomeComponent extends Component {
  render() {
    return (
      <Observer
        subscribe={dispatch => store.watch('age', dispatch)}
        unsubscribe={dispatch => store.unwatch('age', dispatch)}
        dispatch={this.update}
      >
        <Text>{store.state.age}</Text>
      </Observer>
    )
  }
}

// in some place, even outside the file by exporting `store`
store.state.age = 20

Here we use a Observer component to wrap s【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。ub-components, and w原创内容，盗版必究。未经授权，禁止复制转载。hen its dispatch is invoked, the com著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。ponent will rerender【转载请注明来源】【作者：唐霜】. By using Observer component, we can w原创内容，盗版必究。【本文首发于唐霜的博客】rite reactive code m【转载请注明来源】本文作者：唐霜，转载请注明出处。ore interesting, any【转载请注明来源】【版权所有，侵权必究】 responsive object c【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.netan be used in react.

2. Store

It is too complex by原创内容，盗版必究。转载请注明出处：www.tangshuang.net using redux, why sh【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】ould we write so man【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.nety codes which is not【转载请注明来源】本文作者：唐霜，转载请注明出处。 about our business?【未经授权禁止转载】未经授权，禁止复制转载。 Nautil provides a i【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】nner Store which is 【作者：唐霜】【原创内容，转载请注明出处】very easy to define,原创内容，盗版必究。【原创内容，转载请注明出处】 and use like vue da【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】ta.

import { Store } from 'nautil'

const store = new Store({
  name: 'tomy',
  age: 10,
})

Use api to get and s【未经授权禁止转载】转载请注明出处：www.tangshuang.netet data:

const name = store.get('name')
store.set('name', 'sunny')

However, to more sen本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】se way is to use state:

const { state } = store
const name = state.name
state.name = 'sunny'

To worker with Observer, store can be watch著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.neted so that rerender 本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】the UI when data cha转载请注明出处：www.tangshuang.net【版权所有，侵权必究】nged.

const WatchedComponent = observe(store)(OriginComponent)

The WatchedComponent is reactive of stor未经授权，禁止复制转载。【本文受版权保护】e, so when the data 本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】changed in store, it原创内容，盗版必究。【未经授权禁止转载】 will rerender UI.

3. Two-Way-Binding

With the ability of 著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】Observer, I build up转载请注明出处：www.tangshuang.net原创内容，盗版必究。 a two-way-binding s原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。ystem. Yes, you can 【作者：唐霜】【版权所有】唐霜 www.tangshuang.netuse two-way-binding 【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】in react too.

import { Component } from 'nautil'
import { Input } from 'nautil/components'

class EditComponent extends Component {
  state = {
    name: '',
  }
  render() {
    return (
      <Input $value={[this.state.name, name => this.setState({ name })]} />
    )
  }
}

The property $value which begin with $ is a two-way-bindin本文作者：唐霜，转载请注明出处。原创内容，盗版必究。g property. It recei【原创内容，转载请注明出处】【原创不易，请尊重版权】ve an array which co【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】ntains two item. The【未经授权禁止转载】【转载请注明来源】 second item is a fu原创内容，盗版必究。【转载请注明来源】nction which is to u原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.netpdate the value.

By using createTwoWayBinding and Store, it very easy to wr未经授权，禁止复制转载。【本文受版权保护】ite beautiful codes.

import { Component, Store } from 'nautil'
import { Input } from 'nautil/components'
import { inject, observe, pipe } from 'nautil/operators'

class EditComponent extends Component {
  render() {
    return (
      <Input $value={this.attrs.binding.name} />
    )
  }
}

const store = new Store({ name: '' })
const binding = createTwoWayBinding(store.state)

export default pipe([
  inject('binding', binding),
  observe(store),
])(EditComponent)

We use createTwoWayBinding to create a proxied【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net object. When we inv【原创不易，请尊重版权】未经授权，禁止复制转载。oke state.name, we will get a stru【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。ctured array.

And it is very easy 【版权所有，侵权必究】【作者：唐霜】and interesting to u本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】se two-way-binding p著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。roperty inside compo【本文受版权保护】【未经授权禁止转载】nent. If I want to c转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】reate a component li著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】ke following:

<Swither $open={binding.open} />

We can easily write 本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。in the component:

class Swither extends Component {
  onToggle() {
    this.attrs.open = !this.attrs.open
  }
}

I do not need to wri【原创不易，请尊重版权】转载请注明出处：www.tangshuang.nette a lot of callback【版权所有，侵权必究】【原创不易，请尊重版权】 functions, just cha【转载请注明来源】【作者：唐霜】nge the this.attrs.open. Isn’t it int【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】eresting?

4. operators

If you have used rea原创内容，盗版必究。未经授权，禁止复制转载。ct-redux, you will k【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.netnow how to use connect function to wrap a 未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。component. In Nautil未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。, operators are func原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.nettions to create wrap【本文首发于唐霜的博客】【转载请注明来源】 function.

In Nautil, operators本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。 are much more power【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。ful than redux conne转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】ct.

– observe: sho未经授权，禁止复制转载。转载请注明出处：www.tangshuang.netrt for Observer
转载请注明出处：www.tangshuang.net – inject: pen原创内容，盗版必究。未经授权，禁止复制转载。d a new prop
【未经授权禁止转载】 – connect: in【未经授权禁止转载】【原创内容，转载请注明出处】ject ReactConext int著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.neto a prop
【转载请注明来源】 – pollute: ch未经授权，禁止复制转载。【未经授权禁止转载】ange sub-components&著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。#8217; defaultProps 【版权所有，侵权必究】【本文受版权保护】in runtime of curren【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】t component
未经授权，禁止复制转载。 – scrawl: cha【本文受版权保护】【作者：唐霜】nge sub-components&#本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】8217; defaultStylesh【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。eet in runtime

– pipe: combin【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】e operators
著作权归作者所有，禁止商业用途转载。 – multiple: u【原创内容，转载请注明出处】未经授权，禁止复制转载。se batch operator pa原创内容，盗版必究。原创内容，盗版必究。rameters one time

Especially in an app【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。lication, we would w【本文受版权保护】【转载请注明来源】ant to bypass some p【作者：唐霜】【作者：唐霜】rops, well, pollute operator is a magic【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net. For example, you w【转载请注明来源】【关注微信公众号：wwwtangshuangnet】ant to inject some c未经授权，禁止复制转载。【版权所有，侵权必究】omponent with an obj未经授权，禁止复制转载。【本文受版权保护】ect globally:

class App extends Component {
  render() {
    ...
  }
}

const pollutedProps = { store }
export default pipe([
  multiple(pollute, [
    [ComponentA, pollutedProps],
    [ComponentB, pollutedProps],
    [ComponentC, pollutedProps],
  ]),
  observe(store),
])(App)

Using the previous c转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.netode, your App will b本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】e reactive for store and the given sub-d未经授权，禁止复制转载。【作者：唐霜】eep-components insid【作者：唐霜】本文版权归作者所有，未经授权不得转载。e App will auto be p原创内容，盗版必究。【转载请注明来源】atched with store pr【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】op.

5. Depository

To request data from【本文受版权保护】【关注微信公众号：wwwtangshuangnet】 backend, yep, use a【转载请注明来源】【关注微信公众号：wwwtangshuangnet】jax. But in fact, we转载请注明出处：www.tangshuang.net【本文受版权保护】 do not need to writ本文作者：唐霜，转载请注明出处。【未经授权禁止转载】e ajax code in your 【本文受版权保护】【转载请注明来源】project. Depository 【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。is the one to help y【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。ou throw away ajax.

It is an abstract of【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net data request, you n【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.neteed to know one core本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】 concepts: data sour本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。ce. A data source is著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。 a configuration for本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。 data request, and u【转载请注明来源】原创内容，盗版必究。se the id to get dat著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】a from depository wi转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。thout ajax code.

import { Depository } from 'nautil'

const depo = new Depository({
  name: 'depo_name',
  baseURL: '/api/v2',
  sources: [
    {
      id: 'some',
      path: '/some',
      method: 'get',
    },
  ],
})

I defined a data sou【本文受版权保护】【本文受版权保护】rce ‘some̵【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】7; in the depository本文作者：唐霜，转载请注明出处。【作者：唐霜】 ‘depo_name未经授权，禁止复制转载。【转载请注明来源】217;, and then I can原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net request the data by【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net:

const data = depo.get('some') // get data from depo cache
depo.request('some').then(data => console.log(data)) // request data from backend in a Promise

.get is different from .request, it do not request 【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。data from backend im【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。mediately, it reques本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】t data from local ca【原创不易，请尊重版权】【版权所有，侵权必究】che first, so it is 本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】synchronous. Working【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。 with observe:

class SomeComponent extends Component {
  render() {
    const { depo } = this.attrs
    const some = depo.get('some')
    return (
      <Prepare isReady={some} loading={<Text>loading...</Text>}>
        {() => <Text>{some.name}</Text>}
      </Prepare>
    )
  }
}

export default pipe([
  inject('depo', depo),
  observe(dispatch => depo.subscribe('some', dispatch), dispatch => depo.unsubscribe('some', dispatch)),
])(SomeComponent)

You do not need to s著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。end ajax in this cod【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。e, depository will d转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.neto it for you inside.【原创不易，请尊重版权】【未经授权禁止转载】 Because of subscribe to depo, the UI wil本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】l rereender automati【原创不易，请尊重版权】【本文首发于唐霜的博客】cally.

6. Stylesheet

Nautil component wil【作者：唐霜】【本文受版权保护】l parse stylesheet automatically to be未经授权，禁止复制转载。未经授权，禁止复制转载。 used in different p【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】latform.

<Section stylesheet={'className'}></Section>  ## string
<Section stylesheet={{ className: this.state.name === 'tomy' }}></Section> ## object with boolean value
<Section stylesheet={{ color: 'red', width: 120, height: 90 }}></Section> ## style object in react
<Section stylesheet={['className', { otherClass: this.state.boolean }, { color: 'blue', fontSize: 14 }]}></Section> ## mix array

Especially, when you【作者：唐霜】【原创不易，请尊重版权】 set transform style, you do not n原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.neteed to worry about r【转载请注明来源】【作者：唐霜】eact-native parsing,【作者：唐霜】本文版权归作者所有，未经授权不得转载。 Nautil will do it a【关注微信公众号：wwwtangshuangnet】【转载请注明来源】utomatically.

<Section stylesheet={{ transform: 'translateX(-5px)' }}></Section>

7. cross-platform

One of Nautil’著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】s goals is to build 【原创不易，请尊重版权】【原创内容，转载请注明出处】cross-platform appli本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】cations. Currently, 【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.netnautil support the f【本文受版权保护】本文作者：唐霜，转载请注明出处。ollowing platforms: 【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.netweb, web-mobile, web著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】-component (h5-app),转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。 react-native (ios, 原创内容，盗版必究。转载请注明出处：www.tangshuang.netandriod), miniapp (w本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.netechat-app, others us【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】e antmove to transfo本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.netrm).

I have create a CLI 本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】tool nautil-cli, which can helop de未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.netvelopers to start th著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。eir nautil applicati原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。on more easy.

This is the real tim【版权所有，侵权必究】【本文首发于唐霜的博客】e to Write one, Run anywh本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。ere. Clone nautil-demo for playing.

8. Stream

Different from react原创内容，盗版必究。原创内容，盗版必究。 event system, Nauit本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.netl allow developers t【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.neto use rxjs in their 【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】event, the events ha【作者：唐霜】【关注微信公众号：wwwtangshuangnet】ndler functions can 【转载请注明来源】【原创内容，转载请注明出处】be normal handler fu【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。nction to receive ca【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。llback parameters. O【原创不易，请尊重版权】未经授权，禁止复制转载。r it can be observab本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.netle stream pipe opera【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。tors.

<SomeComponent onHint={[map(e => e.target.value * 2), value => this.setState({ value })]}></SomeComponent>

In the previous code【原创内容，转载请注明出处】未经授权，禁止复制转载。, the first item is 本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。a rxjs pipe operator【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。, and the latest ite【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】m in the array is onHint callback function w【本文首发于唐霜的博客】【本文首发于唐霜的博客】hich receive the str【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。eam output.

In the component, de【作者：唐霜】未经授权，禁止复制转载。velopers can use this.onHint$ to operate onHint e转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。vent stream.

class SomeComponent extends Component {
  onDigested() {
    this.onHint$.subscribe((value) => {
      // you can subscribe on the stream when digested
      // so that, you do not need to write a wrapper handle
    })
  }
  handle(e) {
    this.onHint$.next(e)
  }
}

9. Model

Modern frontend appl【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.netications are always 本文作者：唐霜，转载请注明出处。【未经授权禁止转载】struggling with data【未经授权禁止转载】【作者：唐霜】. Nautil provide a M著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】odel to control data【版权所有】唐霜 www.tangshuang.net【本文受版权保护】 for some necessary 【转载请注明来源】本文版权归作者所有，未经授权不得转载。place, for example, 【本文受版权保护】【本文受版权保护】in a form.

Model is a very stro【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。ng data type control【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】ler, which is based 【版权所有，侵权必究】【本文受版权保护】on a Schema system.

import { Model } from 'nautil'
import { Natural } from 'nautil/types'

class PersonModel extends Model {
  schema() {
    return {
      name: {
        type: String,
        default: '',
        validators: [
          {
            validate: value => value && value.length > 6,
            message: 'name should must longer than 6 letters.',
          },
        ],
      },
      age: {
        type: Natural,
        default: 0,
        get: value => value + '', // convert to be a string when get
        set: value => +value, // convert to be a number when save into model
      },
    }
  }
}

const model = new PersonModel() // you can set default value here
const state = model.state // the same usage as Store

The model instance i【未经授权禁止转载】【未经授权禁止转载】s very sensitive wit【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】h data type. When yo本文作者：唐霜，转载请注明出处。原创内容，盗版必究。u set a un-checked v【本文受版权保护】未经授权，禁止复制转载。alue into it, it may转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net not accept the valu【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】e because of data ch原创内容，盗版必究。原创内容，盗版必究。ecking fail.

On the other hand, t【作者：唐霜】本文版权归作者所有，未经授权不得转载。he validators formulators are very useful in 原创内容，盗版必究。【作者：唐霜】form, for example va原创内容，盗版必究。【本文受版权保护】lidate in runtime:

<Section><Input $value={[state.name, name => state.name = name]} /></Section>
{model.message('name') ? <Section stylesheet="error-message">{model.message('name')}</Section> : null}

And Model instance i著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。s observable too, so本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。 you can use it with observe operator in your co【原创不易，请尊重版权】【本文受版权保护】mponent.

export default pipe([
  initialize('person', PersonModel),
  observe('person'),
])(SomeComponent)

Read more from my bl【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。og to taste Model.

10. Props Statement

Although you can use【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】 prop-types to check【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。 data type in react,【转载请注明来源】【本文首发于唐霜的博客】 Nautil provides a m转载请注明出处：www.tangshuang.net【转载请注明来源】ore sensitive type c【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。hecking system based本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】 on tyshemo, which can check de【本文受版权保护】原创内容，盗版必究。ep nested object eas转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。ily.

class SomeComponent extends Component {
  static props = {
    source: {
      name: String,
      books: [
        {
          name: String, 
          price: Positive,
        },
      ],
    },
  }
}

It is very intuitive原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。, without any unders【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.nettanding. However, it原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】 is compatible with 【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】prop-types, so that 转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】all react components【转载请注明来源】本文作者：唐霜，转载请注明出处。 can be used in Naut【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】il system.

These are what Nauti转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。l bring up which are原创内容，盗版必究。【本文受版权保护】 different from reac原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。t development. It he【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.netlp developers write 【作者：唐霜】著作权归作者所有，禁止商业用途转载。less code and make c【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.netode structure more c【原创内容，转载请注明出处】原创内容，盗版必究。lear. If you are tir转载请注明出处：www.tangshuang.net【本文受版权保护】ed with complex scat【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.nettered react ecology 【作者：唐霜】原创内容，盗版必究。libraries, have a tr著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。y with Nautil.

The next step of Nau原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。til is to make a UI 转载请注明出处：www.tangshuang.net原创内容，盗版必究。framework which can 【作者：唐霜】【原创内容，转载请注明出处】run cross-platform. 本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。If you a interested 未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。in this project, wel【本文首发于唐霜的博客】【原创内容，转载请注明出处】come to join me on github.

2019-10-13 3049