React コンポーネント

コンポーネントとは？

コンポーネントは、Ract App の基本的な構成要素です.コンポーネントは、入力を受け取り、ユーザー インターフェイスがどのように見えるべきかを説明する反応要素を返すクラスまたは関数です.コンポーネントは独立しており、再利用可能です.

コンポーネントには主に2つのタイプがあります

クラスコンポーネント

機能コンポーネント

クラス コンポーネント

クラス コンポーネントでは、React.Components から拡張し、React 要素を返す Render 関数を作成する必要があります.クラス コンポーネントはステートフル クラス コンポーネントと呼ばれます.コンポーネントの状態が変わるたびに、render メソッドが呼び出されます.

例えば

クラスコンポーネント名をデモとして作成

class Demo extends React.Component 
{
  render() 
  {
    return <h1>Hello, I am Rohitraj!</h1>;
  }
}

機能部品

Functional コンポーネントは props を引数として受け取り、React Element を返します.機能コンポーネントで使用される render メソッドはありません.機能部品をステートレス機能部品と呼びます. props に基づいてユーザー インターフェイスをレンダリングします.

例えば

機能コンポーネント名をデモとして作成

function Demo() 
{
  return <h1>Hello, I am Rohitraj!</h1>;
}

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

コンポーネントのレンダリングとは、React Element を返す関数を受け取り、それを呼び出す render prop を持つコンポーネントを意味します.
以下は、ReactDOM.render がコンポーネントをレンダリングする例です.つまり、ルート要素の DOM にレンダリングします.

例

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

コンポーネント内のコンポーネント

コンポーネントを他のコンポーネント内で使用できます.つまり、1 つのコンポーネントで複数の機能を作成し、1 つの機能を別の機能に戻すことができます.

例

function Demo() {
  return <h1>I am Rohitraj!</h1>;
}

function Sample() {
  return (
    <>
      <h1>Who are you?</h1>
      <Demo />
    </>
  );
}

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

ファイル内のコンポーネント

拡張子が .js の新しいファイルを作成し、その中で関数を作成して HTML 要素を返し、この関数をエクスポートします.以下に例を示します.
例
これは、Demo.js という名前の新しいファイルです.

function Demo() {
  return <h1>Hello, I am Rohitraj!</h1>;
}

export default Car;

これは、デモ コンポーネントと呼ばれるものです.次に、このファイルをアプリケーションにインポートする必要があります.そのために、import ステートメントを使用し、次に function_name とファイルが配置されているパスを使用します.以下に示すと、これを見ることができます:-

import React from 'react';
import ReactDOM from 'react-dom';
import Demo from './Demo.js';

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