The reason I wrote this article is because none of the articles published already — although they contain great insights — go in-depth enough for a practical front-end developer to decide which one may suit their needs.
[…]
Of course, most React developers will add a few libraries to React to turn it into a complete framework. Then again, the resulting workflow of this stack is often still very different from Angular, so the comparability is still limited.
[…]
Certain Angular features that stand out but are not in React by default are:
[…]
I have deliberately chosen React Toolbox over the usually recommended Material UI, as Material UI has serious self-confessed performance problems with their inline-CSS approach, which they plan to solve in the next version.
Besides, PostCSS/cssnext used in React Toolbox is starting to replace Sass/LESS anyway.
CSS classes are something like global variables. There are numerous approaches to organizing CSS to prevent conflicts (including BEM), but there’s a clear current trend in using libraries that help process CSS to prevent those conflict without the need for a front-end developer to devise elaborate CSS naming systems.
[…]
The
[…]
Angular’s Router is injectable, so it can be used from anywhere, not only components. To achieve the same in react, we use the mobx-react-routerpackage and inject the routerStore.
[…]
React Router can also set the class of active link with activeClassName.
[…]
Let’s start with React on this one, it has a more straightforward solution.
[…]
The local CSS just augments one of the classes present on the md-cardcomponent.
[…]
In compiled CSS, we can see that the local CSS has been scoped to the rendered component by using the [_ngcontent-c1] attribute selector. Every rendered Angular component has a generated class like this for CSS scoping purposes.
[…]
In React, again, we need to use the Provider approach to make PostsStoredependency “transient”. We also import CSS styles, referenced as style and appStyle, to be able to use the classes from those CSS files in JSX.
Naturally, JSX feels much more JavaScript-y than Angular’s HTML templates, which can be a good or bad thing depending on your tastes. Instead of *ngFordirective, we use the map construct to iterate over posts.
[…]
As you can see, the CSS Modules loader postfixes each CSS class with a random postfix, which guarantees uniqueness. A straightforward way to avoid conflicts. Classes are then referenced through the webpack imported objects. One possible drawback of this can be that you cannot just create a CSS with a class and augment it, as we did in the Angular example. On the other hand, this can be actually a good thing, because it forces you to encapsulate styles properly.
[…]
