Simple React Example
So I’ve been trying to find a simple React example, one that uses a flux implementation that works out of the box in a browser without any compilation or node stuff. I couldn’t find one so I built one. Here it is: https://github.com/scottpreston/react-examples.
This requires, RefluxJS, ReactJS, React-Dom and a Browser. You can use node to run it if you want, but that’s not required. Enjoy! (Copy-Paste & ES5 Compatible)
// the action, nothing special
var myAction = Reflux.createAction();
// the store, holds state and listens to action.
var myStore = Reflux.createStore({
times: 0,
init: function () {
this.listenTo(myAction, this.actionCallback);
},
actionCallback: function () {
this.times++;
this.trigger(this.times);
}
});
// the react component, which subscribtes to the store and updates it's state via listen
var CountBox = React.createClass({
displayName: 'CountBox',
getInitialState: function () {
return {count: 0};
},
componentDidMount: function () {
var self = this;
myStore.listen(function (data) {
self.setState({count: data});
});
},
render: function () {
return (
// the component in plain old JS no JSX
React.createElement('div', {className: "countBox"},
"Count Value = " + this.state.count
)
);
}
});
ReactDOM.render(
React.createElement(CountBox, {count: 0}),
document.getElementById('example')
);
document.querySelector("#test").addEventListener("click", function() {
myAction(null);
});
Simple React Example Read More »