Introduction

Coyote is a react-like javascript UI library. It is very lightweight. Here is a brief comparison. A real example is at here. You can see a live demo at codesandbox.

Compare coyote against react

Overall

coyote

• Pure javascript code, no jsx!
• Very lightweight, only less than 300 lines of code! Please checkout github
• live demo at codesandbox.

reactjs

• Mixture of jsx and javascript
• Lots of code. Please checkout github

create element with no attributes

coyote

Example:

MyComponent(
    child1, 
    child2
)

reactjs

Example:

<MyComponent>
    child1
    child2
</MyComponent>

create element with attributes

coyote

Example:

MyComponent({x=1, y=2}, 
    child1, 
    child2
)

reactjs

Example:

<MyComponent x={1} y={2}>
    child1
    child2
</MyComponent>

import component

coyote

Example:

import { H1, DIV, P, BUTTON } from "coyote2";

reactjs

Not needed, jsx transpiler import those html tags implicitly.

define component

coyote

Example:

const MyPage = componentFactory(class MyPage extends Component {
    state = {
        count: 0,
    }

    clickHandler = () => {
        this.setState(state => {state.count +=1;});
    }

    render() {
        return DIV(
            P({style: 'color:red;'}, `Clicked ${this.state.count} times`),
            BUTTON({onclick: this.clickHandler}, 
                ">> click me <<"
            )
        );
    }
});

reactjs

Example:

class MyPage extends React.Component {
    state = {
        count: 0,
    }

    clickHandler = () => {
        this.setState({count: this.state.count+1})
    }

    render() {
        return <div>
            <p style={'color:red;'}>`Clicked ${this.state.count} times`</p>,
            <button onclick = {this.clickHandler}>
                {">> click me <<"}
            </button>
        </div>;
    }
}

state management

coyote

Example:

// use immer producer so you can modify state, while state property is still immutable
this.setState(state => {state.count += 1});

reactjs

Example:

// Create a new state and pass it to setState
this.setState({count:state.count+1});