As the Title stated , story battle is about to, two most powerful Frontend . tools 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. Angular Whereas, is frontend library by which is generally used for user interface. which is also component based used along with JSX (Javascript Syntax Extension). Reactjs Facebook 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. 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. Component structure Difference between both are, will recommend to use HTML, CSS, JavaScript in separate file whereas in instead of HTML we have to use JSX along with ES6 methods variables etc. Angular React In we will write separate code in HTML file , whereas in we have to write code in method which return template later on to browser. Angular React JSX return 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 etc, so we have to use _className_and instead respectively. In order to use these JSX provide us some different keywords. class, for htmlFor 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 bundle size is than angular (as per community, i haven’t tested yet).Whereas, is way , 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 , etc which reduce bundle size almost to half of its actual size. React smaller Angular bigger AOT, Tree shaking …..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:)
![16 JavaScript Protips [2020 Edition]](https://hackernoon.imgix.net/drafts/q1n3yqk.png?auto=format&fit=max&w=3840)
