With stateful-template
, we can create a tiny front-end framework based on React.
Firstly we divide a normal React component into 5 parts, and then, rebuild it.
import Template from './index.template.jsx';
import state from './index.state';
import events from './index.events';
import extras from './index.extras';
import fields from './index.fields';
export default statefulTemplate({
Template,
state,
events,
extras, // optional
fields, // optional
});
The Template
part is a functional React component.
The state
part is the React component's state
field, for example,
state = {
someState: null,
}
The events
are the component's public methods including lifecycle methods, for example,
events = {
onSomeEvent() {
// `this` is the instance of the "stateful component"
// so we can use `this.props`, `this.state` & `this.setState`.
}
// lifecycle methods
componentDidMount() { ... }
};
The extras
part is optional, if given, it would provide extra data appears in Template
.
extras = {
// it's return value will be passed to the `Template` as props.
someExtraData() {
// `this` is the instance of the "stateful component"
// so we can get `this.props` & `this.state`.
}
};
The fields
part is also optional, if given, it would provide some other public fields of the component.
fields = {
// it's return value will be set to be the public field of the "stateful component".
someField() {
// `this` is the instance of the "stateful component"
// so we can get `this.props` & `this.state`.
}
};
class StatefulComponent extends Component {
constructor(...args) {
super(...args);
this.state = ...;
this.someField = ...;
}
onSomeEvent() {
...
}
componentDidMount() {
...
}
render() {
... // state, props or some extra computed data may be used below.
return <Template {...props} {...state} {...fields} {...events} {...extraData} />
}
}