A JavaScript library for building user interfaces
react
https://reactjs.org/
chromeにreact developer toolを入れます。
拡張管理を押下。
ファイルのURLへのアクセスを許可する をonにする
reactの公式より、try reactを押下
https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html
このscriptタグの箇所をコピペ
<script src="https://unpkg.com/react@16/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
htmlの中に入れていきます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>React</title>
<link rel="stylesheet" href="css/styles.css">
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<script type="text/babel">
</script>
</body>
</html>
reactを書いていきます。
<div id="root"></div>
<script type="text/babel">
(() => {
ReactDOM.render(
<p>Hello!</p>,
document.getElementById('root')
);
})();
</script>
reactでは、(() => {})();と書く。もはやfunctionは省略。変わった書き方だ。
document.getByElementは上手くいってます。
