Reactの練習：コンパイルなしで実行
create-react-appによってできるフォルダは200mbを超えます。練習と称して、このようなフォルダをぼこぼこ作った結果、あっという間にGoogleDriveが永遠に同期作業中になってしまいました。作っては消すと、今度は消すことも同期処理として行うので、一層時間がかかります。
もっと、軽いタッチでできないのか！？って多くの人が思ったらしく、できるようです。
CDN（Content Delivery Network）を使えば、create-react-appで最初にできるサイトもこんな感じ（https://www.wsmeguro.jp/tools/react/simple/）でできます。
まずは、index.htmlで必要となるライブラリを呼び出しておきます。JSXでjsを記述する場合は、babelを呼び出して、<script type=”text/babel” src=”index.js”></script>とします。cssもhtmlの中で呼び出しておきます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>No Precompile</title>
<link rel="stylesheet" type="text/css" href="App.css">
</head>
<body>
<div id="root"></div>
<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 crossorigin
src="https://unpkg.com/babel-standalone@6/babel.js"></script>
<script type="text/babel" src="index.js"></script>
</body>
</html>
index.htmlが呼び出すindex.jsはこんな感じです。App.jsの一部をこっちに持ってきて、index.jsだけで完結させています。
ポイントは、ComponentではなくReact.Componentとするところです。
class App extends React.Component {
render() {
return <div className ="App">
<header className =" App-header">
<img src ='./logo.svg' className ="App-logo" alt ="logo" />
<h1 className ="App-title"> Welcome to React </h1>
</header>
<p className ="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>;
}
}
const retElement = <App />;
ReactDOM.render(retElement,
document.getElementById('root')
);
App.cssは特に変更ありません。
用途としては、jsのほとんどを自作する場合は、こちらでもいいかもしれませんね。手で書ける範囲＝サーバへの負担も少ない。
出来合いのもの（例えば、カレンダー）を使う場合は、create-react-appから始めるのがよさそうです。
なんだか、かなりすっきりしました。