Sneaking React into Angular

Josh Finnie

Software Maven @ TrackMaven

TrackMaven loves Angular!

And I do too...

  • Works great with REST (Djangular FTW!)
  • Good MVC Best Practices
  • It allows decoupled API-driven development
  • It has a great community 
  • Not jQuery

But React!

I want to love React, too

  • Simple
  • Declarative
  • Easy Composable Components
  • "Flow is unidirectional."

Introducing ngReact

"The best of both worlds!"

~ Josh Finnie

What is ngReact?

ngReact is an Angular module that allows React Components to be used in AngularJS applications.


(aka A way to sneak in React.js code into Angular!)

var app = angular.module('app', ['react']);

app.controller('mainCtrl', function($scope) {
    $scope.person = {
        firstName: 'Josh',
        lastName: 'Finnie'

var Hello = React.createClass({
    propTypes: {
        firstName: React.PropTypes.string.isRequired,
        lastName: React.PropTypes.string.isRequired

    render: function() {
        return React.DOM.span(null,
        'Hello ' + this.props.firstName + ' ' + this.props.lastName

app.value("Hello", Hello);

app.directive('hello', function(reactDirective) {
    return reactDirective(Hello);

Demo Time!


Come work for TrackMaven, we're pretty great!





Sneaking React into Angular

By Josh Finnie

Sneaking React into Angular

Lightning talk about ngReact for the TrackMaven Monthly Challenge: BYOJS Library

  • 2,948