Responsive Wrapper Button Component and thoughts on Angular vs React.

I am relatively new to React, but I found that extending react components are straightforward and amazingly neat and powerful.

Today I made a responsive wrapper button component with hardly any code or logic. It will show a full button on big screens and only show an icon button on a small screen. It accepts all material-ui Button component's props make its usage the same as a material-ui button.

Here is the code:

This example shows how we can wrap two similar components into one and cherry-pick props for each of them. This could be controversial to some, i.e. compose these two buttons each time is not too hard and that this over complicates things. I agree. However, I like to narrow down specific requirements and wrap them into a component to get a unified interface without copying things around. More importantly, when new requirements raise, I do not have to hunt templates and update them all over the places. I only have one place to update.

I have been developing with Angular for the last few years and loved it. Learning React turns out to be unexpectedly easy. I found my self enjoying using React and love it even more. My Angular experiences definitely helped. On top of my head, there are a few things I like about React:

1. Having templates in TypeScript is wild and make the whole experience so much better than Angular's way. Stuff like ngIf, ngFor, ngTemplateOutlet , ngContent etc., are not wanted.

2. Angular comes with style encapsulation. React doesn't. However, with stuff like emotion and styled-components, React doesn't need one. It turns out I like css in TypeScript a lot better than separate scss. I could use TypeScript variables in my css. How cool!

3. Tools like react-query make managing cache so easy. I am yet to find one equivalent lib for Angular.

Happy coding…