要使用React與SignalR實現實時通信，首先需要在React應用中安裝SignalR客戶端庫。可以通過npm或yarn來安裝SignalR庫：

npm install @microsoft/signalr

然后，在React組件中引入SignalR庫，并創建SignalR連接。以下是一個簡單的React組件示例：

import React, { useEffect } from 'react';
import * as signalR from '@microsoft/signalr';

const RealTimeComponent = () => {
  useEffect(() => {
    const connection = new signalR.HubConnectionBuilder()
      .withUrl('http://example.com/hub')
      .build();

    connection.start()
      .then(() => {
        console.log('SignalR Connected');
      })
      .catch(err => console.error(err));

    connection.on('ReceiveMessage', (message) => {
      console.log('Received message:', message);
    });

    return () => {
      connection.stop();
    };
  }, []);

  return (
    <div>
      Real Time Component
    </div>
  );
};

export default RealTimeComponent;

在上面的示例中，首先創建了一個SignalR連接，然后監聽名為ReceiveMessage的消息事件。當收到該事件時，會在控制臺打印出收到的消息。

在需要發送消息時，可以調用SignalR連接的invoke方法：

connection.invoke('SendMessage', 'Hello, World!')
  .catch(err => console.error(err));

在SignalR的Hub中，需要實現名為SendMessage的方法來處理客戶端發送的消息：

public class ChatHub : Hub
{
    public async Task SendMessage(string message)
    {
        await Clients.All.SendAsync("ReceiveMessage", message);
    }
}

在上述代碼中，SendMessage方法接收客戶端發送的消息，并通過ReceiveMessage事件將消息發送回客戶端。

通過以上步驟，在React應用中就可以實現與SignalR的實時通信功能了。