React & Angular 2
Michael K. Snead
...and pretty much everything else!
- Legacy codebases may be stuck on old frameworks or in jQuery spaghetti. Plug in React!
- Large enterprises may take time (if ever) to converge on one framework. Share React!
- You may want to switch to or prototype in React - use React!
- You may want to take advantage of React's simplicity
- You may want to take advantage of React's performance
Let's build an Angular 2 React Component
- The environment:
Webstorm, Webpack, ES2016 (ES7), Babel
Angular 2.beta1, React 0.14.6
- Create a basic component
- Inject the native DOM element
- Hook up the Angular 2.0 lifecycle
- Create/destroy/update the React component
A single entry-point (usually 'app.js') begins the tree of dependencies, which node-based webpack includes in the bundle.
Babel converts ES-next to ES-today
'import' statements become CommonJS 'require' that node.js understands
Building the Project
Angular2 is designed to be used in ES5, ES6, ES7, Dart or TypeScript.
Decorators: ES6 or ES7?
- Bleeding edge ES7 + Babel 5
- Bleeding edge ES7 + Babel 6 + Decorator legacy plugin
- Official ES6 + Babel 6
- TypeScript is essentially option #1 with the TS compiler
I illustrate the differences in syntax on my blog
Create A Component
A2's class property decorators seem to have a bug where they become read-only if you don't initialize them with something in ES7 - anything works, even undefined.
Native DOM Access
TypeScript "sugars over" adding the parameters array and infers the type from the type annotation.
A 3rd alternative is to put 'bindings' array in @Component.
Hook Up Lifecycle
1. Constructor, 2. ngOnChanges, 3. ngOnInit
Wiring It Up
- import the ReactComponent directive
- Add the directive to your @View directives array
- Bring the React component(s) you want into scope
Don't lose 'this'...
Your React components are likely to have events that your Angular2 components will want to subscribe to.
When React invokes them (ie: button click), your 'this' will be lost.
An easy way to fix this is binding your method in the constructor, like so:
This problem isn't limited or specific to React :(
Using React with Angular 1.x
- Add React/ReactDOM
- Add ngReact.js script after Angular/React
- Register string value for each component
- Register a directive for each value
- For Angular 1.x compatibility, make sure you support props in all lower case!
ngReact's repo is here:
(Still waiting for the full release?)
Using React with Knockout
- Add the reactHandler.js binding handler
(ie: via <script> tag)
- Add React/ReactDOM scripts
- Use the "react" binding
Very much inspired by...
(Reliable! Not flashy!)
Using React with Kendo MVVM
- Add a reference to the component(s) you want to your viewmodel, to bring them in scope. Same as Angular2
- On the target element, specify data-role="reactcomponent"
This tells Kendo to wire up the widget
- Fill in data-bind="reactcomponent: ..."
TypeScript demo source:
(I feel so bad for you)
Like the Angular2 component, I wrote this from scratch.
...and also in TypeScript
Using React with Durandal
- There's a sample project that I did not write here:
- If you're familiar with Durandal/Require, it's using a Require.js plugin + the JSX Transformer to load .JSX files.
- Since Durandal really just uses knockout under the hood, you might just use the binding handler from before.
(Aurelia is in beta now!)
Using React with Aurelia
- There's a blog post on this that I did not write here:
- One thing not in this example is Aurelia's 'unbind'
I would add the ReactDOM.unmountComponentAtNode() in a new 'unbind()' method.
Aurelia's documentation for custom binding behaviors:
I am not an Aurelia expert.
Using React with Ember 1.x
(If you're on Ember 2.x, good for you!)
I am also not an Ember expert.
Another use of React alongside X...
React's isomorphic nature means you can render the initial state on the server.
This means the markup is in the correct state the moment the initial HTML hits the browser.
This is great for mobile!
(and everything else)
Get to know...
ECMAScript 6 and 7 (ES2015, ES2016)
What browsers support ES6 and ES7?
Try ES-next in your browser
ECMAScript 6 - New Features: Overview & Comparison
Taming the asynchronous beast with ES7
ECMAScript 6 modules: the final syntax
Thanks for your time.
React and Angular2
By Michael Snead