cdnを使ってmaterialUIを試してみたい

react.jsのMaterial-UIを使ってみようと思い、htmlファイルの<head>タグ内に

<script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.production.min.js"></script>

を設置し、公式ページ(https://material-ui.com/getting-started/usage/)のサンプルにある

function App() {
  return (
    <Button variant="contained" color="primary">
      Hello World
    </Button>
  );
}

を配置し動かしてみたのですが、

Uncaught ReferenceError: Button is not defined
    at CheckAndReset.render (<anonymous>:528:6)
    at finishClassComponent (react-dom.development.js:17177)

のようなエラーが出ます。cdnの使い方が間違っているでしょうか？

追記:HTML全文は下記です。

<html>
<head>
<meta http-equiv="content-type" charset="utf-8">


	<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
	<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
	<script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.production.min.js"></script>
    	<script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>

</head>
<body>
    	<div id="root">root</div>
    	<script type="text/babel">
		class App extends React.Component{
			render(){
				return(
					<div>
					<div>Hello.everyone!!!!!</div>
					<Button variant="contained" color="primary">
     					 	Hello World
    				</Button>
					</div>

				)
			}
		}
		ReactDOM.render(<App />,document.getElementById('root'));
	</script>
</body>
</html>

<Button>部分が無ければエラー出ずに動くんですが。どこが原因でしょうか。

行動規範の内容に同意します

回答1件

ベストアンサー

htmlで書かれてもReactのJSXの型として解釈できんので、npm使ってインストールしないとダメでは。
https://www.npmjs.com/package/material-ui

追記
こういうことやってるなら話は別ですが
http://hinoshita.hatenadiary.com/entry/2017/08/16/015632

追記
こういうことでしょうね。

Diff
1<html>
2<head>
3<meta http-equiv="content-type" charset="utf-8">
4
5
6    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
7    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
8    <script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.production.min.js"></script>
9        <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
10
11</head>
12<body>
13        <div id="root">root</div>
14        <script type="text/babel">
15        class App extends React.Component{
16            render(){
17+               const { 
18+                   Button
19+               } = MaterialUI;
20                return(
21                    <div>
22                    <div>Hello.everyone!!!!!</div>
23                    <Button variant="contained" color="primary">
24                              Hello World
25                    </Button>
26                    </div>
27
28                )
29            }
30        }
31        ReactDOM.render(<App />,document.getElementById('root'));
32    </script>
33</body>
34</html>