xypjs v1.0.2

xypjs

JavaScript frontend framework. Inspired by Angular and React

Quick start

You can create webpack application manually. However, you can use new-webpack-app command.

npm install -g new-webpack-app

Then create new app with JSX pragma xyp.jsx:

new-webpack-app --jsx xyp.jsx awesomepage

Browse to newly created folder and install xypjs:

npm install xypjs

Example app:

import xyp, { Component } from "xypjs";

class Counter extends Component {
  render() {
    console.log(this.props);
    return <p>{this.props.count}</p>;
  }
}

class App extends Component {
  constructor(props) {
    super(props);
    this.bindToReactiveStorage({ counter: 0 });
    this.onClick = this.onClick.bind(this);
  }
  onClick() {
    this.setState({ counter: this.state.counter + 1 });
  }
  render() {
    return (
      <div>
        <button onClick={this.onClick}>+</button>
        <Counter count={this.state.counter} />
      </div>
    );
  }
}
xyp.render(<App />, document.getElementById("app"));

Run npm start and open http://localhost:9000 to see an app. Page will reload if source code changes.

Run npm run build to bundle app in build/ folder.