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

https://github.com/davidchang/ngReact

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);
});

https://github.com/joshfinnie/ngReact-Sandbox

Demo Time!

http://0.0.0.0:8080

Thanks!

Come work for TrackMaven, we're pretty great!

@joshfinnie

http://www.joshfinnie.com