Omi Hello World

Hello Omi

import { render, Component } from 'omi';

class Hello extends Component {
    render() {
        return <div> {this.props.name}</div>
    }
}

class App extends Component {
    install() {
        this.name = 'Omi'
        this.handleClick = this.handleClick.bind(this)
    }

    handleClick(e) {
        this.name = 'Hello Omi !' 
        this.update()
    }

    style() {
        return `h3{
                    cursor:pointer;
                    color: ${Math.random() > 0.5 ? 'red' :'green'};
                }`
        }

    staticStyle() {
        return `div{
                    font-size:20px;
                }`
        }
	
    render() {
        return (
		<div>
			<Hello name={this.name}></Hello>
			<h3 onclick={this.handleClick}>Scoped css and event test! click me!</h3>
		</div>
		)
    }
}

render(<App />, 'body')

和 preact 不同的是,你不再需要 import { h } from 'omi'.

配置 Babel 转换 JSX 变成调用 Omi.h() :

{
    "presets": ["env", "omi"]
}

你需要安装这两个 babel 插件:

"babel-preset-env": "^1.6.0",
"babel-preset-omi": "^0.1.1",