DEV Community

Code Comparison: React vs Angular

Shriram on April 16, 2023

In this blog, I would like to compare and contrast two of the most popular ways to develop UI using JavaScript out there: React and Angular. I star...

Read full post

Amir M. Mohamadi • Apr 17 '23

Clearly React has cleaner syntax, my second choice after React would be Vue for sure.

Dylan Watson • Apr 18 '23

I don't think it's that clear cut though. React is nice but Angular's ability to separate html from typescript code is actually quite good for debugging.

It means Angular's html will be much closer to reality than React in practice.

Rense Bakker • Apr 18 '23 • Edited

Really? Html has an ng-if element?

Dylan Watson • Apr 19 '23

Haha Obviously not BUT it will render just fine with it!

mellunar • Apr 20 '23

I'm confused about how {submitError && <p className='product-submit-error'>{submitError}</p>} is closer to a html element than <p class='product-submit-error' *ngIf="submitError">{{submitError}}</p>

Nermin Karapandzic • Apr 20 '23

clearly you are biased, or you don't know what clean means.

Amir M. Mohamadi • Apr 21 '23

I think it's more about personal preference, as I said if I wanted to use Angular ng-fied attributes, I would go for Vue.js.

Amardeep • May 8 '23

export class HomeComponent {
    @Input() count!:number;
    @Output() setCount= new EventEmitter<number>();
  constructor() { }

}

I think the class name should be ChildComponent if I am not wrong

Shriram • May 27 '23

You're right., I have corrected it. Thank you for pointing out the error :)

Innocent Mazando • Apr 20 '23

We can all be religious about our preferences but honestly Angular is top notch with it's SRP approach to problems, no wonder it's the best for wiring enterprise apps. Think React is too free style to write something that's maintainable over time

Daniele Pecora • Apr 18 '23

Can't really sympathize with react JSX mixing view with controller code. Angular has an approach that follows better the separation of concerns paradigma.

Alexander Selorm Kubi • Apr 18 '23

You can always use hooks in react to separate your business logics. 😊

Michael Brown • May 4 '23

Putting stuff in separate files !== separation of concerns. Angular controllers and templates are joined at the him.

Daniele Pecora • May 4 '23

"...The separation of concerns is achieved using modularization, encapsulation and arrangement in software layers."

An Angular distinguishes between this aspects of a project:
-Modules
-Components
-Services
-Templates
-Metadata
-Data binding
-Directives
-Dependency Injection

If this and separating the presentation layer into view and logic is not some kind of "encapsulating" then I don't know.

José Pablo Ramírez Vargas • Apr 17 '23

In my mind, only Svelte exists. 😎

But if Svelte didn't exist, Vue would be my choice. React seems to be the grandpa now: Shaped the future, but the future has surpassed it.

Eternal21 • Apr 21 '23

React is great if you need to write some unmaintainable spaghetti code quickly. For anything enterprise related, that you'll actually need to support long-term Angular is the way to go.

Mohamed M. • Apr 18 '23

Angular natural separation of concern make it easier to read and pick-up as a newbie

mellunar • Apr 20 '23

Angular looks difficult, but I found it way better to learn than the React spaghetti. After Svelte, we shouldn't even talk about React anymore.