Introduction

As the landscape of web development continually evolves, so do the frameworks and libraries that power our applications. If you're still using AngularJS for your projects, it might be time to consider making the transition to React. In this blog post, we'll first explore the reasons for migrating from AngularJS to React, and then we'll cover step by step how to perform the migration both manually or with an automated tool.

Note: This article will cover migrating AngularJS (sometimes referred to as Angular 1) to React, not Angular (sometimes referred to as Angular 2+) to React. Although AngularJS is the predecessor of Angular, AngularJS and Angular are completely different frameworks!

Why React?

AngularJS is No Longer Supported

As of January 2022, AngularJS is no longer supported. Regular updates are crucial for open-source software to ensure its relevance, security, and functionality. As technology rapidly evolves, updates enable open-source projects to adapt to new environments, address emerging security vulnerabilities, and incorporate user feedback. These updates not only enhance the user experience but also foster a sense of community engagement and collaboration, as contributors continuously refine the software. By staying current, open-source projects can maintain their effectiveness, attract a wider user base, and demonstrate a commitment to quality and innovation.

Modern Development Paradigm

‍AngularJS was groundbreaking when it was introduced, but its architecture has aged over the years. React, on the other hand, embodies modern development paradigms. It embraces component-based architecture and one-way data flow, making it more aligned with current best practices in web development.

Vibrant Ecosystem and Community

React boasts a thriving ecosystem with a vast collection of libraries, tools, and resources built around it. The community is vibrant and constantly innovating, offering solutions to a wide range of challenges. This translates to better support, faster issue resolution, and access to a wealth of knowledge when compared to the shrinking AngularJS community.

Performance Boost with Virtual DOM

‍React's Virtual DOM optimizes the rendering process, resulting in improved performance. The Virtual DOM efficiently updates only the necessary parts of the actual DOM, minimizing resource-intensive operations. This can lead to snappier user interfaces and enhanced user experiences.

Incremental Adoption

‍Migrating an entire codebase can be daunting, but React offers a smoother transition. You can gradually introduce React components into your AngularJS application without needing to rewrite everything from scratch. This incremental approach allows for flexibility, testing, and minimizing disruption to your ongoing projects.

Better Tooling and Developer Experience

‍React benefits from an array of modern tooling, including the powerful development tool "React DevTools." This tool provides real-time insights into component hierarchies, state, and props, streamlining debugging and improving overall development efficiency.

TSX and Improved Code Readability

‍React's TSX syntax combines HTML-like elements with JavaScript, enhancing code readability and maintainability. This declarative approach makes it easier to understand the structure of your components, leading to a more intuitive development process.

State Management Flexibility

‍While AngularJS provides integrated solutions like ngModel, React's flexible state management can be customized to fit your project's needs. You can choose from libraries like Redux, Mobx, or even React's built-in Context API, tailoring your state management to the complexity of your application.

Long-Term Viability and Future-Proofing

‍As the industry moves forward, technologies tend to become obsolete over time. AngularJS is gradually fading away as newer alternatives gain prominence. By migrating to React, you ensure that your projects stay relevant and aligned with the latest industry standards.

Manual Migration

1) Set Up the React Environment

‍Install Node.js if not already installed, as React applications require Node.js for building and development. Utilize tools like Create React App (CRA) or Next.js to quickly set up a React project with a predefined structure, configuration, and development server.

2) Set Up Directory Structure

The CRA setup will generate a directory structure like this:

my-app
├── node_modules
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   ├── reportWebVitals.js
│   └── setupTests.js
├── .gitignore
├── package.json
├── README.md
└── yarn.lock / package-lock.json

Although React doesn't enforce any particular directory structure, here are a couple of the most common approaches:

1. Group by page or component
2. Group by file type

3) Convert All Angular Templates to React Components

Find the root level Angular index.html template and convert it to App.tsx.

Next, find the AngularJS routes in the application and note the top level Angular templates and corresponding controllers. Convert these templates into React components, and then add the controller logic at the top of the React TSX file. AngularJS routes typically look something like this:

'use strict';

angular
  .module('app.routes', ['ngRoute'])
  .config(config);

function config($routeProvider) {
  $routeProvider.
    when('/', {
      templateUrl: 'sections/home/home.tpl.html',
      controller: 'HomeController as home'
    })
    .when('/premieres', {
      templateUrl: 'sections/premieres/premieres.tpl.html',
      controller: 'PremieresController as premieres',
      resolve: {
        shows: function (ShowService) {
          return ShowService.getPremieres();
        }
      }
    })
    .when('/search', {
      templateUrl: 'sections/search/search.tpl.html',
      controller: 'SearchController as search'
    })
    .when('/search/:query', {
      templateUrl: 'sections/search/search.tpl.html',
      controller: 'SearchController as search'
    })
    .when('/popular', {
      templateUrl: 'sections/popular/popular.tpl.html',
      controller: 'PopularController as popular',
      resolve: {
        shows: function (ShowService) {
          return ShowService.getPopular();
        }
      }
    })
    .when('/view/:id', {
      templateUrl: 'sections/view/view.tpl.html',
      controller: 'ViewController as view',
      resolve: {
        show: function (ShowService, $route) {
          return ShowService.get($route.current.params.id);
        }
      }
    })
    .otherwise({
      redirectTo: '/'
    });
}

Finally, convert the remaining angular templates to React components.

4) Move Remaining Controllers, Directives, and Services

Find the remaining controllers, directives, and services, and move component specific logic to the corresponding React components, and move the remaining logic to utility files.

5) Move Static Assets

Move all static assets, including CSS, images, SVGs, fonts, etc.

Automated Migration

For larger codebases, we recommend automating this process with a tool like Second. Connect Second to your GitHub account, run a module, and get a pull request! If you need additional help with this migration, whether you are doing it manually or automatically with Second, please connect with one of our migration experts on Discord.

Automate this Migration