Combining Angular and React Together

Editor's Notes

• #3: The V in the MVC React is just for views React don’t provide router, model and event layers
• #4: The V in the MVC React is just for views React don’t provide router, model and event layers
• #6: React manages a DOM in-memory, and when the state mutates and triggers any change to the DOM, mutations are first done in-memory. Then React computes the minimal set of mutations to do on the real DOM, and does them in batch
• #7: The V in the MVC React is just for views React don’t provide router, model and event layers
• #8: Components are reusable. Components are composable. Components are unit testable. Sample_1_HelloWorld
• #9: JSX is a JavaScript syntax extension that looks similar to XML. You can use a simple JSX syntactic transform with React.
• #11: Forget any of your old jQuery habits where you respond to an event and then tweak the DOM Forget about binding Any time there's a change, we will re-render the state of our app. Sample_6_State
• #12: Very clear life-cycle
• #13: Not confuse with ShadowDOM, which is part of WebComponent Shadow DOM provides encapsulation for the JavaScript, CSS, and templating in a Web Component. Virtual DOM is a technique and set of libraries / algorithms that allow us to improve front end performance by avoiding direct work with DOM and work only with lightweight JavaScript object that mimic the DOM tree. Re-render the whole app on every update Re-rendering on every change makes things simple. Computes minimal DOM operations React will intelligently decide what DOM elements stay and go Most of the virtual DOM can be treated like magic, and you can ignore the implementation React converts these virtual elements into real DOM elements as necessary Diff it with the old one How it works React builds a new virtual DOM subtree …diffs it with the old one …computes the minimal set of DOM mutations and puts them in a queue …and batch executes all updates
• #15: Want to use ”Components” – Directives? $digest – bad usage of ng-repeat
• #16: Pre-link functions are also run in priority order, but post-link functions are run in reverse order. Compile/Link Cannot exist both in the same directive – what happened if there are both? Compile can return a link function How many times compile is executed? – only one Pre-Link: we still don’t have transcluded content and the template isn’t linked to the scope because the bindings aren’t setup
• #19: Because AngularJS doesn't know anything about ReactJS, and vice-versa, rendering ReactJS inside of AngularJS requires some sort of a "glue" layer Copy files from angular and react samples (app.js, index.html, table.jsx) Add <script src="builds/table.js"></script> Add ” this.events = new Events();” and change broadcast to “emit” Change the directive myBoard leaving only the “link”: renderDOM.render is “myBoard” live template HTML: add ”events” property events=“$ctrl.events” Wrap play method with setTimeout
• #21: Copy files from angular-react samples (app.js, index.html, table.jsx) Add <script src="../../node_modules/ngreact/ngReact.js"></script> Add ‘react’ to app module Remove ”myBoard” directive Add (react-component) <react-component name="Table" props="$ctrl.props" ng-if="$ctrl.isDataLoaded"></react-component> Add to showTable: this.props (thisProps)
• #22: Show onClick functionality already added in Table component Add onClick property to this.props Add this.onClick method (thisOnClick) Add (spanCellValue) <span ng-if="$ctrl.isDataLoaded && $ctrl.cellValue">Cell Clicked: {{$ctrl.cellValue}}</span>