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:

	import React, { CSSProperties, PropsWithChildren, ReactNode } from 'react';
	import { Button, ButtonProps, Hidden, IconButton, IconButtonProps } from '@material-ui/core';
	type EpicButtonProps = ButtonProps & {
	startIcon: ReactNode;
	iconButtonProps?: IconButtonProps;
	iconStyle?: CSSProperties;
	};
	export function EpicButton({
	startIcon,
	children,
	onClick,
	style,
	iconStyle,
	color,
	iconButtonProps,
	...props
	}: PropsWithChildren<EpicButtonProps>) {
	return (
	<>
	<Hidden smDown>
	<Button
	style={{ borderRadius: '5em', ...style }}
	onClick={onClick}
	color={color}
	startIcon={startIcon}
	{...props}
	>
	{children}
	</Button>
	</Hidden>
	<Hidden mdUp>
	<IconButton
	color={color}
	onClick={onClick}
	style={{ borderRadius: '5em', ...iconStyle }}
	{...iconButtonProps}
	>
	{startIcon}
	</IconButton>
	</Hidden>
	</>
	);
	}

view raw EpicButton.jsx hosted with ❤ by GitHub

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…