React.jsのrenderをいろいろ試してみた

# まずは文字列を表示させてみる

たとえば、Laravelのview（ブレード）などに書く。普通にhtmlでもOK。

```react
<!DOCTYPE html>
<html>
<head>
  <script src="http://fb.me/react-0.13.3.js"></script>
  <script src="http://fb.me/JSXTransformer-0.13.3.js"></script>
</head>
<body>
<div id="japan"></div>
<script type="text/jsx">
    var Tokyo = React.createClass({
        render: function() {
            return (
                <p>東京</p>
            );
        }
    });
    React.render(<Tokyo />, document.getElementById('japan'));
</script>
</body>
</html>
```

ブラウザには

東京

と表示される。

# 同じIDに対して複数renderしたらどうなるか？

```react
<!DOCTYPE html>
<html>
<head>
  <script src="http://fb.me/react-0.13.3.js"></script>
  <script src="http://fb.me/JSXTransformer-0.13.3.js"></script>
</head>
<body>
<div id="japan"></div>
<script type="text/jsx">
    var Tokyo = React.createClass({
        render: function() {
            return (
                <p>東京</p>
            );
        }
    });
    var Osaka = React.createClass({
        render: function() {
            return (
                <p>大阪</p>
            );
        }
    });
    React.render(<Tokyo />, document.getElementById('japan'));
    React.render(<Osaka />, document.getElementById('japan'));
</script>
</body>
</html>
```
この場合、ブラウザには

大阪

と表示される。（あと勝ち）

# IDを分ければ当然・・・

```react

<!DOCTYPE html>
<html>
<head>
  <script src="http://fb.me/react-0.13.3.js"></script>
  <script src="http://fb.me/JSXTransformer-0.13.3.js"></script>
</head>
<body>
<div id="japan1"></div>
<div id="japan2"></div>
<script type="text/jsx">
    var Tokyo = React.createClass({
        render: function() {
            return (
                <p>東京</p>
            );
        }
    });
    var Osaka = React.createClass({
        render: function() {
            return (
                <p>大阪</p>
            );
        }
    });
    React.render(<Tokyo />, document.getElementById('japan1'));
    React.render(<Osaka />, document.getElementById('japan2'));
</script>
</body>
</html>
```

ブラウザには

東京

大阪

と表示される。


# IDではなくclassで指定したら・・・

```react
<!DOCTYPE html>
<html>
<head>
  <script src="http://fb.me/react-0.13.3.js"></script>
  <script src="http://fb.me/JSXTransformer-0.13.3.js"></script>
</head>
<body>
<div class="japan"></div>
<div class="japan"></div>
<script type="text/jsx">
    var Tokyo = React.createClass({
        render: function() {
            return (
                <p>東京</p>
            );
        }
    });
    var Osaka = React.createClass({
        render: function() {
            return (
                <p>大阪</p>
            );
        }
    });
    React.render(<Tokyo />, document.getElementsByClassName('japan')[0]);
    React.render(<Osaka />, document.getElementsByClassName('japan')[1]);
</script>
</body>
</html>
```
ブラウザには

東京

大阪

と表示される。

# jQueryのセレクタに慣れている人の気持ち・・・

たとえば、よくやるのは

```html

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id="japan"></div>
<script>
  $(document).ready(function(){
      $("#japan").text('名古屋');
  });
</script>
</body>
</html>
```



この場合、ブラウザには

名古屋

と表示される。

・・・という感じで、

```react
<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="http://fb.me/react-0.13.3.js"></script>
  <script src="http://fb.me/JSXTransformer-0.13.3.js"></script>
</head>
<body>
<div id="japan"></div>
<script type="text/jsx">
    var Tokyo = React.createClass({
        render: function() {
            return (
                <p>東京</p>
            );
        }
    });
//    React.render(<Tokyo />, document.getElementById('japan'));
    React.render(<Tokyo />, $("#japan"));
</script>
</body>
</html>
```
とやってみたくなるが、これはダメだった。
ブラウザに何も表示されない（react.jsでエラーが起きる）。

# jsでクラス追加した場所にもrenderできるか？

結論：できる。

```react

<!DOCTYPE html>
<html>
<head>
  <script src="http://fb.me/react-0.13.3.js"></script>
  <script src="http://fb.me/JSXTransformer-0.13.3.js"></script>
</head>
<body>
<div id="target" class=""></div>

<script>
    document.getElementById("target").classList.add("japan")
</script>

<script type="text/jsx">
    var Tokyo = React.createClass({
        render: function() {
            return (
                <p>とうきょう</p>
            );
        }
    });
    React.render(<Tokyo />, document.getElementsByClassName('japan')[0]);
</script>
</body>
</html>
```

この場合、ブラウザには

とうきょう

と表示される。

ただし、下記はダメ。

```react
<!DOCTYPE html>
<html>
<head>
  <script src="http://fb.me/react-0.13.3.js"></script>
  <script src="http://fb.me/JSXTransformer-0.13.3.js"></script>
</head>
<body>
<div id="target" class=""></div>

<script>
    window.onload = function() {
        document.getElementById("target").classList.add("japan")
    }
</script>

<script type="text/jsx">
    var Tokyo = React.createClass({
        render: function() {
            return (
                <p>とうきょう</p>
            );
        }
    });
    React.render(<Tokyo />, document.getElementsByClassName('japan')[0]);
</script>
</body>
</html>
```

理由は、onload でクラスを追加しているから。
ようするに、renderの際、すでにclassが存在しなければならない。

# renderする文字列にタグはどこまで許容されるのか？

たとえば、リンクにしてみる。

```react
<!DOCTYPE html>
<html>
<head>
  <script src="http://fb.me/react-0.13.3.js"></script>
  <script src="http://fb.me/JSXTransformer-0.13.3.js"></script>
</head>
<body>
<div id="target" class=""></div>

<script>
  document.getElementById("target").classList.add("japan")
</script>

<script type="text/jsx">
    var Tokyo = React.createClass({
        render: function() {
            return (
                <a href="">東京</a>
            );
        }
    });
    React.render(<Tokyo />, document.getElementsByClassName('japan')[0]);
</script>
</body>
</html>

```

結果、ブラウザには

東京

のリンクが貼られる。つまりタグが効いている。

### スタイルとかも埋め込める？

文字の色を変えてみようと思い、

```react
<!DOCTYPE html>
<html>
<head>
  <script src="http://fb.me/react-0.13.3.js"></script>
  <script src="http://fb.me/JSXTransformer-0.13.3.js"></script>
</head>
<body>
<div id="target" class=""></div>

<script>
  document.getElementById("target").classList.add("japan")
</script>

<script type="text/jsx">
    var Tokyo = React.createClass({
        render: function() {
            return (
                <span style="color:red;">東京</span>
            );
        }
    });
    React.render(<Tokyo />, document.getElementsByClassName('japan')[0]);
</script>
</body>
</html>
```


と、やってみたが、react.jsでエラーになった。