React.js 入門(1) ~関数コンポーネント~

Reactはコンポーネント（部品）を組み合わせて作成される。
コンポーネントには、クラスを利用するものと関数として定義するものがある。
クラスベースのコンポーネントは設計が複雑になるので、最近はあまり使用されない。
関数コンポーネントの方が簡単に使えるため主流。

シンプルな関数コンポーネント

import './App.css'

function App() {
  return (
    <div className="App">
      <h1>React sample.</h1>
      <p>This is sample application.</p>
    </div>
  )
}

export default App

コンポーネントの引数と属性

コンポーネントで属性を使う

コンポーネントを利用するときに、必要な情報を渡すことができ、汎用性の高いコンポーネントを作成することができる。

// 何も渡さない場合
<App />

// titleとmessageを渡す場合
<App title="Hello!" message="This is sample." />

import './App.css'

function App(props) {
  return (
    <div className="App">
      <h1>{props.title}</h1>
      <p>{props.message}</p>
    </div>
  )
}

export default App

コンポーネントにスタイルを渡す

予めコンポーネントから参照できる.cssにスタイルを定義しておく。

.red {
  color: red;
}
.green {
  color: green;
}
.blue {
  color: blue;
}

<App title="Hello!!!" message="red color" color="red" />

import './App.css'

function App(props) {
  return (
    <div className="App">
      <h1 className={props.color}>{props.title}</h1>
      <p className={props.color}>{props.message}</p>
    </div>
  )
}

export default App

memo

スタイルクラスは”class”ではなく”className“