React.jsで現在の時刻を表示する方法

コンポーネントの作成: まず、時刻を表示するためのReactコンポーネントを作成します。例えば、Clockという名前のコンポーネントを作成しましょう。

import React, { useState, useEffect } from 'react';
function Clock() {
  const [currentTime, setCurrentTime] = useState(new Date().toLocaleTimeString());
  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentTime(new Date().toLocaleTimeString());
    }, 1000);
    return () => clearInterval(interval);
  }, []);
  return (
    <div>
      <h1>現在の時刻: {currentTime}</h1>
    </div>
  );
}
export default Clock;

コンポーネントの使用: 作成したClockコンポーネントを他のコンポーネントで使用することができます。例えば、AppコンポーネントでClockコンポーネントを表示するには、次のようにします。

import React from 'react';
import Clock from './Clock';
function App() {
  return (
    <div>
      <h1>React.jsで現在の時刻を表示する例</h1>
      <Clock />
    </div>
  );
}
export default App;

レンダリング: 最後に、Appコンポーネントをルート要素にレンダリングします。index.jsファイルを開き、次のように変更します。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

これでReactアプリケーションが起動し、現在の時刻が表示されます。

以上がReact.jsで現在の時刻を表示する方法の一例です。この方法を使用することで、シンプルで簡単に時刻を表示することができます。もちろん、デザインや他の機能を追加することも可能です。詳細な情報や他のコード例は、公式のReact.jsドキュメントを参照してください。