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

間違い指摘大歓迎です

環境

JSFiddle

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

<!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はコンポーネントでできている

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

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

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

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

プロパティ


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

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

ステート

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

// 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のイベントハンドラはキャメルケース。

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の戻り値に要素の配列をセットする。

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')
)

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

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

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

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の違い

閉じタグ必須。

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

ハンドラはキャメル。

doChange(e) {
  //
}

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

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

renderのreturnは()

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

JSXのなかでJavaScript

式の評価ができる。

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

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')
)

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

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

まとめ

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