【備忘録】『React「超」入門書』の参考になった部分まとめ

<a href="https://www.amazon.co.jp/JavaScript%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%8C%E6%89%8B%E3%81%A3%E5%8F%96%E3%82%8A%E6%97%A9%E3%81%8FReact%E3%81%AE%E5%9F%BA%E7%A4%8E%E3%82%92%E7%90%86%E8%A7%A3%E3%81%99%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AE%E3%80%8C%E8%B6%85%E3%80%8D%E5%85%A5%E9%96%80%E6%9B%B8-%E5%A4%A9%E7%94%B0%E5%A3%AB%E9%83%8E-ebook/dp/B01MUS2RP9/ref=as_li_ss_il?s=digital-text&ie=UTF8&qid=1540281395&sr=1-1&keywords=React%E3%80%8C%E8%B6%85%E3%80%8D%E5%85%A5%E9%96%80%E6%9B%B8&linkCode=li3&tag=protein078-22&linkId=09ad3adec6784b920eeaa54ceed2abb0&language=ja_JP" target="_blank"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=B01MUS2RP9&Format=_SL250_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=protein078-22&language=ja_JP" ></a><img src="https://ir-jp.amazon-adsystem.com/e/ir?t=protein078-22&language=ja_JP&l=li3&o=9&a=B01MUS2RP9" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />

間違い指摘大歓迎です:innocent:

## 環境

JSFiddle

## Reactはインクルードするだけで使える

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Hello World</title>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
</head>
<body>
    <div id="main"></div>
    <script>
    ReactDOM.render(
        React.createElement('h1', null, 'Hello World'),
        document.getElementById('main')
    )
    </script>
</body>
</html>
```

## Reactはコンポーネントでできている

オブジェクト指向みたいな感じ。

```react
class MyComponent extends React.Component {
  render() {
    return React.createElement('h1', null, 'Hello World')
  }
}

ReactDOM.render(
  React.createElement(MyComponent),
  document.getElementById('main')
)
```

## コンポーネントにはプロパティとステートがある

プロパティ

```react

class MyComponent extends React.Component {
  render() {
    return React.createElement('h1', null, this.props.val)
  }
}

ReactDOM.render(
  React.createElement(MyComponent, {val: 'hoge'}),
  document.getElementById('main')
)
```

ステート

```react
class MyComponent extends React.Component {
  constructor(props, context, updater) {
  super(props, context, updater)
  this.state = {status: 'Ready'}
  }
  render() {
  return React.createElement('h1', null, this.state.status)
  }
}

ReactDOM.render(
  React.createElement(MyComponent),
  document.getElementById('main')
)
```

## Reactは仮想DOMを使う

差分を勝手に更新してくれる。

## JSXは JavaScript XML

```react
// not JSX
ReactDOM.render(
  React.createElement('h1', null, 'Hello World'),
  document.getElementById('main')
);

// JSX
ReactDOM.render(
  <h1>Hello World</h1>,
  document.getElementById('main')
)
```

## コンポーネントとはHTML要素を表現する部品


ReactDOM.render(HTML要素, 対象)

React.createElement(タグ, 　連想配列, 値)

## 仕掛けを持たせたコンポーネント

onKeyPressのイベントハンドラはキャメルケース。

```react
class MyComponent extends React.Component {
  render() {
  return React.createElement(
  'input',
  {type: 'text',
  placeholder: 'input val and press eneter',
  onKeyPress: (e) => {
    if (e.key === 'Enter' && e.target.value) alert(e.target.value)
  }})
  }
}

ReactDOM.render(
  React.createElement(MyComponent),
  document.getElementById('main')
)
```

countするtextbox。
renderの戻り値に要素の配列をセットする。

```react
class MyComponent extends React.Component {
  constructor(props, context, updater) {
    super(props, context, updater);
    this.state = {count: 0};
  }
  render() {
    return [
      React.createElement(
      	'input',
        {type: 'text',
        onChange: (e) => this.setState({count: e.target.value.length})}
      ),
      React.createElement('span', null, this.state.count)
    ]
  }
}

ReactDOM.render(
  React.createElement(MyComponent),
  document.getElementById('main')
)
```

一度ステートと要素を紐付けると、ステートの値を更新するだけで要素の内容も更新される。

## ライフサイクルメソッドを使ってみる

```react
class MyComponent extends React.Component {
  constructor(props, context, updater) {
    super(props, context, updater);
    this.state = {count: 0};
  }
  render() {
    return [
      React.createElement(
      	'input',
        {type: 'text',
        onChange: (e) => this.setState({count: e.target.value.length})}
      ),
      React.createElement('span', null, this.state.count)
    ]
  }
  componentDidMount() {
  console.log('mounted');
  }
  componentWillUpdate(nextProps, nextState) {
  console.log('update state:', nextState);
  }
}

ReactDOM.render(
  React.createElement(MyComponent),
  document.getElementById('main')
)
```

## BabelでJSX

```react
class MyComponent extends React.Component {
  render() {
    return [
      <h1>hogehoge</h1>,
      <input type="text" size="10" />
    ]
  }
};

ReactDOM.render(
  React.createElement(MyComponent),
  document.getElementById('main')
)
```

## JSXとHTMLの違い

閉じタグ必須。

```jsx
render() {
  return ([
    <p>hoge</p>,
    <br />,
    <p>fuga</p>
  ]);
}
```

ハンドラはキャメル。

```jsx
doChange(e) {
  //
}
```

* classとforはclassName, htmlFor
* スタイルは{{ }}
* HTMLのハイフンスタイルはキャメルで

```jsx
<h1
  className = 'hoge'
  style={{
    fontStyle: 'italic',
    color: 'red'
  }}>
  hoge
</h1>
```

## renderのreturnは()

```jsx
render() {
  return (
    //
    //
  );
}
```

## JSXのなかでJavaScript

式の評価ができる。

```jsx
render() {
  return (
    <div>
        {
        // comment
        }
        {/*
          comments
        */}
        <p>{hoge}</p>
        <p>{score > 70 ? 'good':'bad'}</p>
    </div>
  );
}
```

## JSXでコンポーネントを作る

```jsx
class MyComponent extends React.Component {
  render() {
    return (
      <h1>{this.props.val1 + this.props.val2}</h1>
    );
  }
};

ReactDOM.render(
  <MyComponent val1='hoge' val2='fuga' />,
  document.getElementById('main')
)
```

```jsx
class MyComponent extends React.Component {
  render() {
    return (
      <h1>{this.props.children}</h1>
    );
  }
};

ReactDOM.render(
  <MyComponent>hogehoge</MyComponent>,
  document.getElementById('main')
)
```

## まとめ

Reactはなんとなくモバイル開発に似ているなーと思った。webだけどswiftでios開発しているような。