This is part one – Understanding how ReactJS works and how Flux integrates with it. This is the tutorial on codementor.io that I am following.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 |
// ======================================================= // REACT JS // ======================================================= // BASIC REACT CLASS var HelloWorld = React.createClass({ render: function () { return <div>Hello, world!</div>; } }); React.render(new HelloWorld(), document.body); // PROPS - PASSING DATA var HelloWorld = React.createClass({ render: function () { return <div>Hello, {this.prop.name}!</div>; } }); React.render(new HelloWorld({name: "Smilyan Pavlov"}), document.body); // STATE - KEEP TRACK OF INTERNAL CHANGES TO THE VIEW // Any changes to state will trigger a re-render of the view // YOU MUST CALL setState method - without it changes won't be reflected in the view var HelloWorld = React.createClass({ getInitialState: function () { return { counter: 0 } }, increment: function () { this.setState({ counter: this.state.counter+1 }); }, render: function () { return <div> <div>{this.state.counter}</div> <button onClick={this.increment}>Increment!</button> </div> } }); React.render(new HelloWorld(), document.body); // NESTED VIEWS - RENDER REACT CLASSES FROM WITHIN OTHER REACT CLASSES // Props can be assigned via nested classes: var FancyButton = React.createClass({ render: function () { return <button onClick={this.props.onClick}> <i className={"fa "+this.props.icon}></i> <span>{this.props.text}</span> </button> } }); var HelloWorld = React.createClass({ getInitialState: function () { return { counter: 0 }; }, increment: function () { this.setState({ counter: this.state.counter++ }); }, render: function () { return <div> <div>{this.state.counter}</div> <FancyButton text="Increment!" icon="fa-arrow-circle-o-up" onClick={this.increment} /> </div>; } }); // ======================================================= // FLUX // ======================================================= // The Flux architecture is what Facebook recommends to use as a workflow // for retrieving data on the client side from a store of some sort on a // remote server. It’s a unidirectional data flow. // View - responsible for handling an action by a user // Dispatcher - 1) Registering callbacks after a dispatch. // 2) Dispatching actions to be fullfilled. // Store - 1) Waking up on a relevant dispatch to retrieve the requested data. // 2) Notifying listeneres of a change in the store's data after a retrieval, update or create operation. // Event Emitter - Responsible for notifying subscribers after a store has completed any data action. // Example: var Count = React.createClass({ getInitialState: function () { return { items: [] } }, componentWillMount: function () { emitter.on("store-changed", function(items) { this.setState({ items: items }); }.bind(this)); }, componentDidMount: function () { dispatcher.displatch({ type: "get-all-items" }); }, render: function () { var items = this.state.items; return <div>{items.length}</div>; } }); var Store = function () { dispatcher.register(function(payload) { switch (payload.type) { case: "get-all-items": this._all(); break; } }.bind(this)); this._all = function () { $.get("/some/url", function (items) { this._notify(items); }.bind(this)); } this._notify = function (items) { emitter.emit("store-changed", items); }); } var ItemStore = new Store(); |
One thought on “5 July 2015 – Building a ReactJS ToDo App – Part 1 – Everydays”