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!

Thanks!

Come work for TrackMaven, we're pretty great!

 

 

 

@joshfinnie

http://www.joshfinnie.com

Sneaking React into Angular

By Josh Finnie

Sneaking React into Angular

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

  • 2,865