JSXで動的HelloWorld

本日の目標 ・JSXでHelloWorld → 完了！

・JSXで動的HelloWorld → 完了！

・マス目つくる

実行コマンド Node Packaged Modules（npm）

★buildの時点でエラー出てきた

./src/index.js

Line 5: 'App' is defined but never used no-unused-vars

[// 鉄板ぽい２つ

// import React from 'react';

// import ReactDOM from 'react-dom';

// import './index.css';

// コメントアウトした

// import App from './App'; // ここでエラー出てた 確かにimportしたけど使ってなかった]

★CDNのアドレス古くなってた

こっちが最新ぽい

https://reactjs.org/docs/cdn-links.html

---

・動的につくる要素は、コンポーネントとして部品化できる。 → 具体的には、React.createClassメソッドを使う。

例えば [var コンポーネントのクラス名ShoppingList★ = React.createClass({

render: function() {

    return 要素の定め
    <div>hoge hoge {this.props.name☆}</div>;

}

});]

としておけば、render()する際の第一引数側（挿入する方の要素）に

タグ名？っぽく書いておけば呼び出せる。

・コンポーネントの動的箇所は、

{this.props.タグ内の属性名name☆}

として代入している。

[ReactDOM.render( <ShoppingList★ name☆="Jane" />, document.getElementById('root') );]

コード002■コンポーネントからつくった要素を動的に表示する

Inline Babel script:1 Uncaught TypeError: React.createClass is not a function

なんかエラー出た

→ 主原因：ES6のBabelをDLしているのに、記法がES5だった（）

詳しく：

・BabelはJsのコンパイラであるところ、JsにはECMAScript（エクマスクリプト）と呼ばれる標準記法が複数世代存在する。

    Wiki：https://ja.wikipedia.org/wiki/ECMAScript

・現在は5 → 6 へと。

    世代間で、通じる記法も異なる。

↓

・今回CDNから引き込んでいるのは絵くまちゃんの6

<sc ript src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></sc ript>

・にも関わらず、ソース上は絵くまちゃん5用の書き方である、React.createClass()メソッドを

コンポーネント作成用に用いていた。

・→絵くまちゃん6の書き方  class クラス名 extends React.Component {

にしたら通った！

こちら参考にマルバツゲームに向けて進めています。 記載が丁寧！わかりやすい！ http://www.fumiononaka.com/Business/html5/FN1704003.html