Reactのメモ - u16suzuの blog

準備

sudo npm install -g react-tools
# jsファイルをwatch して自動ビルドをさせる
jsx --watch src/ build/

html

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <script src="https://fb.me/react-15.1.0.js"></script>
    <script src="https://fb.me/react-dom-15.1.0.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
  </head>
  <body>
    関数定義
    <div id="hello"></div>
    <br>
    クラスとして関数を定義
    <div id="hello2"></div>
    <br>
    component の中から別のコンポーネントを呼ぶ
    <div id="hello3"></div>
    <br>
    配列の内容を出力
    <div id="print_array"></div>
    <br>
    全部まとめて呼び出し
    <div id="all_sample"></div>
    <script src="build/hello.js"></script>
  </body>
</html>

javascript

ファイル名を hello.js として /src ディレクトリに保存すると、build されて /build/hello.js が生成される。

// 関数として定義
const Hello = (props) => {
  // props.name で引数取得
  return (
    <div className="Hello">
      Hello {props.name}
    </div>
  );
};
// 呼び出し
ReactDOM.render(
  <Hello name="Mr. Sato" />, // name で引数を指定
  document.getElementById('hello')
);


// クラスとして関数を定義
class Hello2 extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        Hello2
      </div>
    );
  }
}
// 呼び出し
ReactDOM.render(
  <Hello2 />,
  document.getElementById('hello2')
);


// component の中から別のコンポーネントを呼ぶ
const Foo = (props) => {
  return (
    <div>
      <Hello name="Mr. Suzuki"/>
      <Hello name="Mr. Kaede"/>
      <Hello name="Mr. Minato"/>
    </div>
  );
}
// 呼び出し
ReactDOM.render(
  <Foo />,
  document.getElementById('hello3')
);


// jsの配列の内容を出力
ar = [1,2,3,4]
/* comment */
const PrintArray = (props) => {
  // JSXの中で{}で変数展開できる
  return (
    <ul>
      {props.items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}
// 呼び出し
ReactDOM.render(
  <PrintArray items={ar}/>,
  document.getElementById('print_array')
);

// 全部まとめて呼び出し. renderは1つの要素のみ扱えるので <div> で全体を囲む必要がある
ReactDOM.render(
  <div>
    <Hello name="Mr. Sato" />
    <Hello2 />
    <Foo />
    <PrintArray items={ar} />
  </div>
  ,
  document.getElementById('all_sample')
);

トラブルシューティング

JSXについて何かしらの変換に失敗している場合、エラーログで教えてくれる便利
よくあるのは <Foo /> を <Foo \> と書いてしまうミス

built Module("hello")
["bar","foo","hello","style"]
hello.js changed; rebuilding...
Error while reading module hello:
Error: Parse Error: Line 21: Invalid regular expression: missing /
    at throwError (/usr/local/lib/node_modules/react-tools/node_modules/jstransform/node_modules/esprima-fb/esprima.js:2813:21)
    at scanRegExpBody (/usr/local/lib/node_modules/react-tools/node_modules/jstransform/node_modules/esprima-fb/esprima.js:1490:17)
    at scanRegExp (/usr/local/lib/node_modules/react-tools/node_modules/jstransform/node_modules/esprima-fb/esprima.js:1569:16)
    at parsePrimaryExpression (/usr/local/lib/node_modules/react-tools/node_modules/jstransform/node_modules/esprima-fb/esprima.js:3562:43)

実行結果

f:id:u16s:20171205013334p:plain