![Search icon](https://hackernoon.imgix.net/search-new.png?w=19&h=19)
As the Title stated , story battle is about to, two most powerful Frontend tools.
Angular is an frontend framework by Google ,MVC based , Basically used for SPA (Single page applications), suggested to use along with typescript (as per officials too), component based.
Whereas, Reactjs is frontend library by Facebook which is generally used for user interface. which is also component based used along with JSX (Javascript Syntax Extension).
As software developer Theodore Roosevelt once said,
“Nothing in the world is worth having or worth doing unless it means effort, pain, difficulty.”
So after lot of Goooogling and efforts here are some points for you.
Basically both are much different in their own terms but still there are similarities too, in this article we will cover how they both are different from each other.
Component Structure
No doubt, both are component based.
Component structure means to say independent piece of code which you can use in multiple projects by just adjusting some styles etc. For an example Login/signup part for every project is almost same so we will create separate components for both having their own HTML/CSS/JS code and later on will use this in multiple projects.
Difference between both are,
in Other words you can say ReactJs embeds HTML into JavaScript, while others continue putting JS into HTML.
CSS Class Binding.
As React use JSX instead of pure HTML so it will not allow us to use some keywords directly like class, for etc, so we have to use _className_and htmlFor instead respectively. In order to use these JSX provide us some different keywords.
So when we have to define CSS classs name in angular we simply define like this
<p class=”heading-class”>Hello Angular’s way</p>
But we can’t use class keyword directly in JSX, else Reactjs will confuse it with javascript’s class so when we have to define class name in Reactjs we will use ClassName like this
<p className=”heading-class”>Hello React’s way</p>
Variable Binding.
Variable Binding in Angular and Reactjs are almost same with some changes in syntax.
In Angular we use {{}}
to bind to some variable in our template
In case of React we use {}
in order to bind to variable. But sometimes we also use {{}}
in Reactjs as well , for example we have to define inline css within the element then we will use like this.
<p style={{color:"grey"}}>Hello Variable Binding</p>
Comment.
There is different way to comment code in the JSX like this
{/* This is JSX comment */}
But in angular we can use simple HTML and JS’s comment like this
/* This is angular's comment */
Bundle size
React bundle size is smaller than angular (as per community, i haven’t tested yet).Whereas, Angular is way bigger, which cause longer load time and performance issues on mobiles sometimes. But also thereare number of ways by using you can reduce the bundle size of angular app like you can use AOT, Tree shaking, etc which reduce bundle size almost to half of its actual size.
…..To Be Continue !
If you enjoyed this, please clap ,so that others can enjoy it as well. Follow me on Twitter @_p_ardeepjain_90 to get the latest updates:)