Reactの関数コンポーネントの例

以下に、Reactの関数コンポーネントの例をいくつか示します。

import React from 'react';
function MyComponent(props) {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.content}</p>
    </div>
  );
}
export default MyComponent;

上記の例では、Reactのimportステートメントを使用してReactモジュールをインポートし、MyComponentという関数コンポーネントを定義しています。この関数コンポーネントは、propsというパラメータを受け取り、props.titleとprops.contentを表示するシンプルなUIを返します。

この関数コンポーネントは、他のReactコンポーネント内で使用することができます。以下は、MyComponentを使用する例です。

import React from 'react';
import MyComponent from './MyComponent';
function App() {
  return (
    <div>
      <h1>Reactの関数コンポーネントの例</h1>
      <MyComponent title="タイトル" content="コンテンツ" />
    </div>
  );
}
export default App;

上記の例では、MyComponentコンポーネントをAppコンポーネント内で使用しています。MyComponentにtitleとcontentというpropsを渡しています。

これらの例は、Reactの関数コンポーネントを作成するためのシンプルな方法を示しています。関数コンポーネントは、コードの再利用性を高め、読みやすく保守しやすいコードを書くための効果的な手段です。さらに、関数コンポーネントはReactのフックと組み合わせて使用することもできます。