React素人がいきなりMaterial-UIを使いこなそうとした

私について

Laravelを使ってアプリを作り、そのポートフォリオ作成後にエンジニアとして転職。
なんとなくコードはかけるけど、基礎は全く分かってない。
そんな状態で2019-11-18 エンジニアとしてデビュー。現在Laravel,React.jsを使っています。
2019-12月までReact.jsに関しては全くの無知でした。
そんな素人だけどアウトプットが大事ということで、とにかくやってみます。

Material-UI

Material-UIとは、マテリアルデザインをReactで可能にするためのUIコンポーネント
初心者の僕にはまずマテリアルデザインとUIコンポーネントが分からない。
・マテリアルデザイン：影などアニメーションで動きをつけ視覚的変化があり、ユーザーにとって分かりやすいデザイン。
・UIコンポーネント：UIはユーザーが見える部分や使用する部分。コンポーネントは、要素。例...ボタンやナビゲーションなど。
つまり、Material-UIを使えば、視覚的に分かりやすく使いやすい画面を簡単に作ることができるのです。

実際に使ってみたが、、、

React学習２週間ほどの、僕には使うことが難しい！
なぜかというと、Reactには書き方が大きく分けて２つあるからだ！なんで２つもあんの？？

qiita.jsx

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

qiita.jsx

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

この２つの書き方にまず混乱してしまいます。基本的にコンポーネントを使う際は上の書き方が普通とされています。
Material-UIでは全て上の書き方(JavaScript の関数)で書かれている。
するとここで、下の書き方(ES6 クラス)の時にどう使えばいいか分からない！

Material-UIをESクラスに書き込んでみた。

Material-UIのButtonのコンポーネントは以下のように書かれている。

qiita.jsx

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';

const useStyles = makeStyles({
  root: {
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    border: 0,
    borderRadius: 3,
    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
    color: 'white',
    height: 48,
    padding: '0 30px',
  },
});

export default function Hook() {
  const classes = useStyles();
  return <Button className={classes.root}>Hook</Button>;
}

ES6クラスにこのコードを書き込もうとすると、うまくいかない！
以下のコードが書き込めない！！２つの書き方の違いを気づくのに2時間かかりました。。

qiita.rb

   const classes = useStyle();

そこで、、、、

スタイル付きコンポーネントAPIを使う。

qiita.jsx

import React from 'react';
import { styled } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';

const MyButton = styled(Button)({
  background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
  border: 0,
  borderRadius: 3,
  boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
  color: 'white',
  height: 48,
  padding: '0 30px',
});

class Book extends Component{
  return <MyButton>Styled Components</MyButton>;
}

この書き方でMaterial-UIのcomponentsを使うことができた。
という解釈でいいのか分からないけど、これで使えた。
なにか他にいいのがあれば教えてください。