Using React inside an Angular app

Why?

  • Performance
  • Use existing component
  • Benefit from the easy way to think about data flow that React offers
  • Migrate or do experiments in an existing app

Why not?

  • A new abstraction layer is always costly
  • Have to know both frameworks to work on the project

Examples

GDevApp

Allomatch

How

npm install react react-dom
var React = require('react');
var ReactDOM = require('react-dom');
 
class MyComponent extends React.Component {
  render() {
    return <div>Hello World</div>;
  }
}
// Somewhere in a controller
ReactDOM.render(<MyComponent />, angular.element("#here"));

Data binding

  • Angular 1 two-way binding

DOM

scope

scope changed

DOM event

Update to the DOM done during a digest cycle.

Data binding

  • React one-way data flow

DOM

State

rendering

Component

Component

Component

State

DOM event

this.setState({ text: "Hello world" });

The UI (i.e: the DOM) is a function of the state

Rendering is done after a call to setState

props

props

Pass scope variables to React props

class UserCard extends React.Component {
  render() {
    return <div>Hello { this.props.username }</div>;
  }
}
// Somewhere in a controller
scope.$watch('userdata.username', (username) => {
  ReactDOM.render(
    <UserCard username={username} />, 
    angular.element("#here")
  );
});

Pass scope variables to React props

class UserCard extends React.Component {
  render() {
    return <div>Hello { this.props.username }</div>;
  }
}
// Somewhere in a controller
scope.$watch('userdata.username', (username) => {
  ReactDOM.render(
    React.createElement(UserCard, {username: username}), 
    angular.element("#here")
  );
});

Update scope

class UserCard extends React.Component {
  onClick() {
    // ... whatever ...

    // Let our parent know that we've being clicked :D
    this.props.onClick(); 
  }

  render() {
    return (
      <div> 
        Hello { this.props.username }
        <button onClick={this.onClick} />
      </div>
    );
  }
}

Update scope

// Somewhere in a controller
onUserCardClicked = () => {
  scope.dataRegistered = true;
  $http.post(...);
};

scope.$watch('userdata.username', (username) => {
  ReactDOM.render(
    <UserCard 
      username={username} 
      onClick={onUserCardClicked}
    />, 
    angular.element("#here")
  );
});

// /!\ This won't works :O
// Somewhere in a controller
onUserCardClicked = () => {
  $scope.$apply(() => {
    scope.dataRegistered = true;
    $http.post(...);
  });
};

scope.$watch('userdata.username', (username) => {
  ReactDOM.render(
    <UserCard 
      username={username} 
      onClick={onUserCardClicked}
    />, 
    angular.element("#here")
  );
});

Clean up

class MyComponent extends React.Component {
  // ...
  componentWillUnmount() {
    console.log("Damn, I'm being destroyed");
    this.myPromise.cancel();
    cancelTimeout(this.myTimeout); 
  }
}
// In the Angular controller:
scope.$on('$destroy', function() {
  ReactDOM.unmountComponentAtNode(elem[0]);
});

ngReact

  • Does what we saw for you

module.directive('userCard', function(reactDirective) {
  return reactDirective('UserCard', ['username']);
});
<!-- In a template: -->
<user-card username="username" />

What about Angular 2?

npm install angular2-react --save
tsd install react react-dom --save
import {Component} from 'angular2/core';
import {ReactComponent} from 'angular2-react/component';
import MyComponent from './MyComponent';

@Component({
	template: '<react-component 
             [component]="embedComponent" 
             [props]="embedComponentProps">
        </react-component>',
	directives: [ReactComponent]
})
export class AppComponent {
	embedComponent = MyComponent;
	embedComponentProps = {
		"name": "person"
	};
}

Angular + React + React Native

http://angularjs.blogspot.fr/2016/04/angular-2-react-native.html

OS (iOS/Android) + APIs

Native components + JS Bridge

React Native js components

Angular 2

wow

much native

Thanks :)

Using React inside an Angular app

By Florian Rival

Made with Slides.com

Using React inside an Angular app

Talk at Angular Paris

  • 2,922

More from Florian Rival