How to Migrate your Angular Project to React Piece by Piece

Grab ngReact

This library is going to be your best friend for migrating your project https://github.com/ngReact/ngReact

bower install ngReact --save
# OR
npm install ngReact --save
<script src="bower_components/react/react.js"></script>
<script src="bower_components/react/react-dom.js"></script>
<script src="bower_components/ngReact/ngReact.min.js"></script>
angular.module('app', ['react'])

Test Component

Here is a test component you can try with pre-compiled JSX

Put the code below in it's own file HelloComponent.js then include it in your index.html. If you want to pre-compile your own component check out https://babeljs.io/repl/

(function() {
  'use strict';

  var HelloComponent = React.createClass({
    displayName: 'HelloComponent',
    propTypes: {},
    render: function render() {
      return React.createElement(
        'span',
        null,
        'Hello'
      );
    }
  });

  angular.module('app').value('HelloComponent', HelloComponent);
})();

<script src="angular.js"></script>
<script src="HelloComponent.js"></script>

After you've completed the steps above you can reference this component in any of your Angular templates like so:

<react-component name="HelloComponent" />

Now Add JSX and ES6 Support

Two solutions for you

You can install some npm modules globally and run a command that will watch your component files then compile them for you on-change.

npm install -g watchify babelify babel-preset-es2015 babel-preset-react
watchify -t [ babelify --presets [ react es2015 ] ] app/components/index.js -o app/index.js

However! I would recommend integrating the compile step into your dev/build process. Check out the Gulp config below.

npm install --save-dev gulp browser-sync gulp-babel browserify babelify babel-preset-es2015 babel-preset-react
const browserSync = require('browser-sync').create();
const reload = browserSync.reload;
const babel = require('gulp-babel');
const browserify = require("browserify");
const fs = require('fs');

gulp.task('serve', function() {

  browserSync.init({
    server: {
      baseDir: "./app"
    }
  });

  gulp.watch("./app/components/**/*").on("change", function() {
    browserify("./app/components/index.js")
      .transform("babelify", { presets: ["es2015", "react"] })
      .bundle()
      .pipe(fs.createWriteStream("./app/index.js"));
  });

});

Now just run

gulp serve

ES6 Components :)

You can compose your components however you want but this is my setup right now:

Install React Node Module (for easy importing with ES6)

npm install --save react

./app/components/HelloComponent.js

This is just an example component using ES6 and JSX.

import React from 'react';

export default class HelloComponent extends React.Component {
  render() {
    return <span>Hello2</span>
  }
}

// Set the display name so ngReact can find your component
HelloComponent.displayName = 'HelloComponent';

./app/components/index.js

This will be your master import file it will be compiled by Gulp into ./app/index.js. By importing each of your components here and exposing them to Angular with .value they'll automatically be accessible in any of your Angular templates. Yay ngReact!

import HelloComponent from './HelloComponent';

angular.module('app')
  .value('HelloComponent', HelloComponent);

./app/index.html

All your ES6 and JSX will be converted to ES5 friendly code and will live in ./app/index.js so make sure you include this file and only this file in your ./app/index.html.

<script src="index.js"></script>

Boom Pow!

Good job have a beer now that you left that cold bitch Angular for good