Migrating Angular JS app to React

  • Install dependencies
  • Webpack configuration
  • Adding tsconfig.json
  • Adding ESLint config
  • Loading dependencies
  • Adding React component

Install dependencies

yarn add typescript @types/react @types/react-dom @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-prettier eslint-plugin-react eslint-plugin-react-hooks prettier -D
yarn add react react-dom ngreact

Webpack Configuration

yarn add ts-loader fork-ts-checker-webpack-plugin -D

Adding tsconfig.json

Adding ESLint config

Loading dependencies

Including react directive

Adding a component

Utility function

React component

Creating Angular Directive

Using the directive within HTML

Navigation between routes

Configure Husky

yarn add husky pretty-quick -D

--

--

--

Fullstack developer at Unite

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Using multiple environment settings in Angular and IONIC (web)

Let’s a good component together for react on SPA.

Handling React’s side effect with the Effect hook

Heart-out Experience!! - Andela 21

14 Best JavaScript Online Courses for Beginners to Learn in 2022

best JavaScript online courses for beginners

Improved Relationship with VS Code with your own Extension

You’re Key to Success: Node.Js Application Development

Week 5: How to Learn a New Language

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Aishwaryalakshmi Panneerselvam

Aishwaryalakshmi Panneerselvam

Fullstack developer at Unite

More from Medium

Angular Directive alternative in React

The Good HTML Component

How to Import JSON file as a Module

Early Returns/Exits — Code Patterns in JavaScript