Migrate from AngularJS to React (or other framework)

MD
R
Markdown

Simple recipe from Jack which explains one way of migrating from AngularJS to React.

# Swap Angular Components with React Components with ngReact The React.js library can be used as a view component in web applications. ngReact is an Angular module that allows React Components to be used in AngularJS applications. https://www.npmjs.com/package/ngreact

The angularJs code:

<li> 
    <h2> Title </h2>
    <listing-button url=""> Buy now </listing-button>
<li>

Using Library NGReact:

<li> 
    <react-component name="listingsTitle" props="..."/>
    <react-component name="listingsButton" props="..."/>
<li>

After all sub components are migrated, migrate the full component to React.

import React, {Component} from 'react';
import ListingsTitle from './listings-title'
import ListingsButton from './lisitngs-button'

class ListingsItem extends Component {
    render(){
        return (
            <li> 
                <listingsTitle ... />
                <listingsButton .../>
            <li>
        )
    }
}

Template:

<react-component name="listingsItem" props="..."/>

Problem: Unit tests are coupled to code Solution: Use Integration Tests temporarily to cover non unit tests covered components.

Source: https://javascriptplayground.com/blog/2017/08/migrating-complex-javascript-angular-react/

Created on 10/21/2017