11
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Reactをすぐ試したいときにCDN(インストールなし)で読み込む方法

Posted at

Reactの勉強や練習をしよう!

と思ったときに、npmなどでダウンロードするものが色々あるので、
ちょっと面倒だなーと言うときにCDNのみで利用できるようにする方法をメモしました。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Reactサンプル</title>
<!--head内でcdnで読み込む。バージョンは適時こちらを参考に調整。
https://ja.reactjs.org/docs/cdn-links.html-->

  <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://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
</head>
<body>

<!--コンテンツをここに。-->

<div class="main">
    <div class="section" id="app1">ここ</div>
</div>

<!--reactスクリプト。type指定忘れずに-->
<script type="text/babel">
  ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('app1')
  );
</script>
</body>

[注意点]
scriptのtypeはtext/babelを指定すること。
じゃないとJSXでの書き方ができないです!

11
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?