React入門

### Reactとは
・JavaScriptフレームワークの一つ。
・Chrome, Firefox などで動作します。IE8で一部機能、IE9で制限付き、IE10でフル機能がサポートされます。
・JavaScriptの中に直接 HTML/XMLを記述する JSX という技術を利用しています。
・CDNと直接インストールする方法があります。

### CDN
・CDNを用いた例は下記の様になります。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>React Test</title>
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.10.3/babel.min.js"></script>
<script type="text/babel">
ReactDOM.render(
  <h1>Hello world!</h1>,
  document.getElementById('root')
);
</script>
</body>
</html>
```

### ・直接インストール
Node.js環境でReactをインストールするには、npmを用います。
```
$ npm install -g create-react-app
```

### ・アプリケーション作成
create-react-appコマンドでアプリケーションを作成します。
```
$ create-react-app my-app
$ cd my-app
```

### ・public/index.html は以下のような内容になっています。
```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="Web site created using create-react-app" />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>
```

### ・src/index.jsは次のような内容になっています。
・JavaScriptとHTML が合体したようなJSX という独特な文法で記述することができます。
```react
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

serviceWorker.unregister();
```

### ・npm startを実行すると、開発用の簡易サーバが起動します。
```
$ npm start
```
### ・ReactDOM.render()
ReactDOM.render() では、第2引数で指定した DOM 要素に対して、第1要素で指定したコンポーネントを割り当てます。
```react
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
```

### ・コンポーネントを定義する
```react
var App = React.createClass({    // 廃止
  render() {
    return <h1>Hello!</h1>;
  }
});
```

### ・プロパティの受け渡し
```react
ReactDOM.render(
  <Hello name="Tanaka" />,
  document.getElementById('root')
);
```

### ・静的関数の場合
```react
function Hello(props) {
  return <h1>Hello {props.name}!</h1>;
}
```

### ・JSXの書き方
Reactでは、JavaScriptの文法中に XMLのようなタグを記述可能な、JavaScriptの拡張言語 JSXを採用しています。
( ) で囲むことにより、複数行のタグを記述することができます。
```react
return (
  <div>
    <h1>Hello</h1>
    <p>This is ...</p>
  </div>
);
```

・JSX構文では、要素は単一の要素として記述する必要があります。
・下記の例は、2つの要素を返却しているため、Syntax error となります。
```react
return (
  <h1>Hello</h1>
  <p>This is ...</p>  // Syntax error
);
```

・{ 変数名 } で変数の値を参照することができます。
```react
let name = 'Tanaka';
return <h1>Hello {name}!</h1>
```

・{ 変数名 } は属性値として使用することもできます。
```react
let name = 'Tanaka';
return <input type="text" value={name} />;
```

・{ } の中では JavaScript の式を記述することができます。
```react
return <div>3 + 5 = { 3 + 5 }</div>;
```

・{ } の中から関数を呼び出すことができます。
```react
add(x, y) { return x + y; }
render() {
  return <div>3 + 5 = {this.add(3, 5)}</div>
}
```

※｛ } の中で複文を記述することはできません。下記は Syntax error となります。
```react
return <div>3 + 5 = {a = 3; b = 5; a + b}</div> // Syntax error
```

以上、React入門についてでした。