Migrating Angular Project to React

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

A set of UI components for React Native.
Get Carbon Native!