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.