搭建最小化react-calendar-timeline遇语法报错，求解决方案

你遇到的核心问题是：浏览器本身无法直接解析JSX语法，也不能在无转译环境下处理React的模块化导入逻辑。下面给你两种可行的解决方案，从易到难：

方案一：用Vite快速搭建React项目（推荐，零手动配置） #

这是新手入门React最省心的方式，Vite会帮你搞定所有转译和打包配置：

1. 打开终端，执行以下命令初始化React项目：

   npm create vite@latest my-timeline-app -- --template react
   cd my-timeline-app
   npm install
   

2. 安装react-calendar-timeline及其依赖：

   npm install react-calendar-timeline moment
   

3. 替换src/App.jsx的内容为基础示例代码：

   import React, { useState } from 'react';
   import Timeline from 'react-calendar-timeline';
   import 'react-calendar-timeline/lib/css/style.css';
   import moment from 'moment';
   
   function App() {
     const [groups] = useState([
       { id: 1, title: '项目A' },
       { id: 2, title: '项目B' }
     ]);
   
     const [items] = useState([
       {
         id: 1,
         group: 1,
         title: '开发功能X',
         start_time: moment().startOf('day').add(1, 'hour'),
         end_time: moment().startOf('day').add(3, 'hour')
       },
       {
         id: 2,
         group: 2,
         title: '测试功能Y',
         start_time: moment().startOf('day').add(2, 'hour'),
         end_time: moment().startOf('day').add(4, 'hour')
       }
     ]);
   
     return (
       <div style={{ height: '500px' }}>
         <Timeline
           groups={groups}
           items={items}
           defaultTimeStart={moment().startOf('day')}
           defaultTimeEnd={moment().endOf('day')}
         />
       </div>
     );
   }
   
   export default App;
   

4. 启动开发服务器：

   npm run dev
   

   打开终端提示的本地地址，就能看到渲染好的时间线组件了。

方案二：纯HTML+CDN方式（无需本地打包工具，快速测试） #

如果不想搭建完整React项目，可通过CDN引入预编译的库，并借助Babel Standalone转译JSX：

1. 新建index.html文件，粘贴以下内容：

   <!DOCTYPE html>
   <html lang="zh-CN">
   <head>
     <meta charset="UTF-8">
     <title>React Timeline测试</title>
     <!-- 引入时间线组件的样式文件 -->
     <link rel="stylesheet" href="https://unpkg.com/react-calendar-timeline/lib/css/style.css">
   </head>
   <body>
     <div id="root"></div>
   
     <!-- 引入React、ReactDOM的UMD版本 -->
     <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
     <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
     <!-- 引入moment依赖 -->
     <script src="https://unpkg.com/moment/min/moment.min.js"></script>
     <!-- 引入react-calendar-timeline的UMD版本 -->
     <script src="https://unpkg.com/react-calendar-timeline/lib/js/main.js"></script>
     <!-- 引入Babel Standalone用于转译JSX -->
     <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
   
     <!-- 编写组件逻辑，type指定为text/babel让Babel处理JSX -->
     <script type="text/babel">
       const { Timeline } = window.ReactCalendarTimeline;
       const { useState } = React;
   
       function App() {
         const [groups] = useState([
           { id: 1, title: '项目A' },
           { id: 2, title: '项目B' }
         ]);
   
         const [items] = useState([
           {
             id: 1,
             group: 1,
             title: '开发功能X',
             start_time: moment().startOf('day').add(1, 'hour'),
             end_time: moment().startOf('day').add(3, 'hour')
           },
           {
             id: 2,
             group: 2,
             title: '测试功能Y',
             start_time: moment().startOf('day').add(2, 'hour'),
             end_time: moment().startOf('day').add(4, 'hour')
           }
         ]);
   
         return (
           <div style={{ height: '500px' }}>
             <Timeline
               groups={groups}
               items={items}
               defaultTimeStart={moment().startOf('day')}
               defaultTimeEnd={moment().endOf('day')}
             />
           </div>
         );
       }
   
       // 渲染组件到页面
       const root = ReactDOM.createRoot(document.getElementById('root'));
       root.render(<App />);
     </script>
   </body>
   </html>
   

2. 直接用浏览器打开这个HTML文件，就能看到时间线组件了。

为什么之前的尝试失败？ #

• 直接用npm安装后写index.html：浏览器虽支持type="module"的ES导入，但无法解析JSX语法——JSX是React的语法糖，必须经过Babel或打包工具转译为浏览器能识别的普通JavaScript。
• 照搬官方示例：官方示例默认是基于React项目（带打包转译环境）编写的，直接放到纯HTML环境中，浏览器无法处理其中的JSX和模块化导入。

内容的提问来源于stack exchange，提问作者G Buis