1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Reactのコンポーネントについて

Posted at

Reactのコンポーネントは関数とクラスがある

関数コンポーネント

データの入ったprops(プロパティの意)というオブジェクトを引数として受け取り、returnでReact要素を返す。

関数コンポーネント
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
クラスコンポーネント

コンストラクタを実装してsuper(props)の呼び出しが必要。render()メソッド内でコンストラクタで定義したpropsにアクセスして利用する。

クラスコンポーネント
class Welcome extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

コンポーネントのレンダー

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

const root = ReactDOM.createRoot(document.getElementById('root'));
const element = <Welcome name="Sara" />;
root.render(element);
  1. 要素を引数としてroot.render()を実行する
  2. ReactはWelcomeコンポーネントを呼び出し、そのときにpropsとして {name: 'Sara'} を渡す。
  3. Welcomeコンポーネントは出力としてh1要素を返す。
  4. ReactDOMは返されたh1要素に一致するようにDOMを書き換える。

コンポーネントを組み合わせる

コンポーネントは他のコンポーネントを参照することができる。これにより、コンポーネントの再利用が可能になる。(同じコンポーネントを複数利用すること)

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

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?