React 不用组件， 写出物流跟踪时间轴

在 React 中，我们通常使用组件来组织和渲染页面。但是，如果不使用组件，仍然可以使用 React 的核心库（React 和 ReactDOM）来构建页面。

以下是一个简单的例子，展示了如何使用 React 来构建一个物流跟踪时间轴：

// 创建一个时间轴的数据结构
const timelineData = [
  { id: 1, date: '2021-01-01', event: 'Shipment dispatched' },
  { id: 2, date: '2021-01-03', event: 'In transit to destination' },
  { id: 3, date: '2021-01-05', event: 'Arrived at destination' },
  { id: 4, date: '2021-01-07', event: 'Out for delivery' },
  { id: 5, date: '2021-01-08', event: 'Delivered' },
];

// 创建一个根节点
const root = document.getElementById('root');

// 渲染时间轴
ReactDOM.render(
  <div>
    {timelineData.map(({ id, date, event }) => (
      <div key={id}>
        <div>{date}</div>
        <div>{event}</div>
      </div>
    ))}
  </div>,
  root
);

在这个例子中，我们首先创建了一个时间轴的数据结构 `timelineData`，包含了几个物流事件的日期和描述。然后我们创建了一个根节点 `root`，并使用 `ReactDOM.render()` 方法将时间轴渲染到根节点上。

在渲染时间轴的过程中，我们使用了 JavaScript 中的 `map()` 方法来遍历 `timelineData` 数组，并对每个物流事件创建了一个包含日期和描述的 `<div>` 元素。由于没有使用组件，所以所有的代码都写在了一个大的 `<div>` 元素内部。

这个例子只是一个简单的示例，实际的物流时间轴可能需要更复杂的布局和样式。但是，使用 React 的核心库仍然可以帮助我们组织和渲染页面，即使不使用组件。