Reactの公式チュートリアルで学んだことメモ（JSX、Reactエレメント、Reactコンポーネント）

こちらの内容のさらっとしたまとめです。

• JSX
• Rendering Elements
• Components and Props

JSX

JSの拡張文法の一種で、Reactで使うことが推奨されている。

const element = <h1>Hello, world!</h1>;

{}の中にJSの構文を入れることができる。

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

CodePen

HTMLの属性にJSを入れる場合は""をつけないように注意。

const element = <img src={user.avatarUrl}></img>;

また属性のラベルはキャメルケースにするように注意。(例: className、tabIndex)

ネストされたDOMを定義する場合は()で括る。

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

クロスサイトスクリプティング対策として、JSXで埋め込まれた値はReact DOMがレンダリングする前にエスケープするので安心。

// titleに危険な値が入っていてもエスケープされる.
const element = <h1>{title}</h1>;

Reactエレメントとレンダリング

BabelによってJSXが変換されてできたオブジェクトをReactエレメントという。

// これが
const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

// こうなって
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

// こうなる
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

Reactによって操作する範囲をルートDOMノードと呼び、rootというIDが付く。通常Reactのみのアプリケーションでは1個のルートDOMノードが存在する。この中身をReactDOM.render()で操作する。ReactDOM.render()も通常のReactアプリケーションでは1回だけ呼び出される。

// ルートDOMノード
<div id="root">
    <!-- This element's contents will be replaced with your component. -->
</div>

//ルートDOMノードの内容を書き換える
ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

CodePen

Reactコンポーネント

Reactエレメントを返す関数のことをReactコンポーネントという。

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

ES6のクラスを使った書き方

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

JSXの中にユーザーが定義したタグがあればそのタグと同じ名前のReactコンポーネントが呼び出される。この場合propsの中身はJSXのタグ内のプロパティになる。

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

CodePen

一つのコンポーネントから他のコンポーネントを呼び出すこともできる。

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

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

CodePen

UIの中に何度も使うパーツ（ボタン等）や複雑なパーツ（コメント、フィード等）があれば一つのコンポーネントとして切り出すのがベストプラクティス。

CodePen

コンポーネントはpropsの値を書き換えてはいけないので注意。
↓OK

function sum(a, b) {
  return a + b;
}

↓NG

function withdraw(account, amount) {
  account.total -= amount;
}