あじちゃんの備忘録。

〜ここはメモ帳です

トップ > React > 前の記事で怒られていた、Reactのエラー解消したのでメモ

前の記事で怒られていた、Reactのエラー解消したのでメモ

React JavaScript

前の記事

azix.hatenablog.com

怒られていたやつ

Target container is not a DOM element.

f:id:azix:20171026221659p:plain

原因

ビルドした react.js は、 DOM要素　の後ろで読み込む必要があった！

対応

いままで、 <head> で読み込んでいた js を、 <body> の最後で読み込むようにした

誤り

<!Doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <link href="main.css" rel="stylesheet" />
  <script src="http://fb.me/react-0.13.3.js"></script>
  <script src="http://fb.me/JSXTransformer-0.13.3.js"></script>
  <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
  <script src="../build/main.js"></script>
</head>
<body>
<div id="content">
  <div class="wrap">
    <div id="app"></div><!-- ← DOM要素 -->
  </div>
</div>
</body>
</html>

正しい

<!Doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <link href="main.css" rel="stylesheet" />
  <script src="http://fb.me/react-0.13.3.js"></script>
  <script src="http://fb.me/JSXTransformer-0.13.3.js"></script>
  <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
</head>
<body>
<div id="content">
  <div class="wrap">
    <div id="app"></div><!-- ← DOM要素 -->
  </div>
</div>

<script src="../build/main.js"></script>
</body>
</html>

表示された！！！ HelloWorld!
f:id:azix:20171026222831p:plain

結論

なぜDOM要素のあとに読み込まなきゃならないのか、まだちょっとわかんない。保留。
参考サイトが分かりやすかったから精読してみます……。

参考

https://qiita.com/naruto/items/fdb61bc743395f8d8faf