What is AngularBrowser module?

• Default module
• For web apps
• Interfaced with browser

Microsoft’s new AngularReactBrowserModule

Replacement for default AngularBrowser module

React aware

Capable of loading React components

Shadow DOM aware

Bootstrapping React inside Angular

Managing react component lifecycle inside Angular component lifecycle

Goodbye JSX

• What is JSX
• React TypeScript
• react.createElement

Hello React TypeScript

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isToggleOn: true };

    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(state => ({
      isToggleOn: !state.isToggleOn
    }));
  }

  render() {
    return React.createElement(
      'button',
      { onClick: this.handleClick },
      this.state.isToggleOn ? 'ON' : 'OFF'
    );
  }
}

ReactDOM.render(React.createElement(Toggle, null), document.getElementById('root'));

Demo

• Ang wrapper
• react component inside Ang component
• Working app demo

Best practices

• Incrementally rewrite an Angular application into React (moving from atomic/leaf nodes upward into full features/pages until the entire app is re-written)

Learnings

• any React code can make use of the custom Angular-React renderer
• supports loading MS Fabric UI