Reactの関数コンポーネントのボイラープレート

まず、関数コンポーネントの基本的な構造を見てみましょう。

import React from 'react';
function MyComponent() {
  return (
    <div>
      {/* コンポーネントの内容 */}
    </div>
  );
}
export default MyComponent;

上記の例では、MyComponentという名前の関数コンポーネントを定義しています。return文の中には、コンポーネントの中身がJSXとして記述されます。

次に、関数コンポーネントのプロパティ（props）を受け取る方法を見てみましょう。

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

上記の例では、propsという引数を関数コンポーネントに指定しています。それぞれのプロパティは{props.propName}のようにJSX内で使用することができます。

さらに、関数コンポーネント内で状態（state）を管理する方法もあります。これにはReactのuseStateフックを使用します。

import React, { useState } from 'react';
function MyComponent() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}
export default MyComponent;

上記の例では、useStateフックを使用してcountという状態を管理しています。setCount関数を呼び出すことで、状態を更新することができます。

以上がReactの関数コンポーネントの基本的なボイラープレートとコード例です。これを参考にして、簡単なアプリケーションやコンポーネントを作成してみてください。