I think the best way to approach such a rewrite would be to migrate very gradually. Begin with your directives and convert them into React components. Then use ngReact to make them work first. This way you could backtrack easily if something is failing to work correctly in your app.

I cannot recommend enough that you watch this amazing talk by Ryan Florence on how to approach a rewrite using React: https://www.youtube.com/watch?v=BF58ZJ1ZQxY

After you convert all your directives to React this way, ideally your View layer should be now React. Next steps would be to rewrite the Angular Controllers, Models, Services etc. I recommend doing it with Redux for the controllers and plain JS modules for the services. Models would be just simple JS Objects. This would be also a great time you write some tests for the Reducers and Actions to ensure smooth migration.

Never forget to migrate very gradually so that you're in control and isolating the cause for an issue is trivial.

• use require() to import your files and your deps
• migrate to webpack could help the first part
• use only npm dependencies, deprecate bower
• use ES6/7 using babel
• use directive or component (>=angular 1.5) for everything, you can use component on uiRouter in the alpha version
• use Redux to handle your state - https://github.com/angular-redux/ng-redux, prefer one binding instead of two-way data binding for directives/components on angular

After this you could follow two paths:

Use ngReact and mix angular with React, I don't like this approach.

Or you can start a new project from scratch with hot reloading, because the Redux code will the probably the same, and it will be easy to convert a directive/component with only one-way databinding to a React component