React 在线生成

不想在本地安装任何软件，又想马上看到 React 效果？可以用"在线生成"的方式：在浏览器里基于网页版编辑器创建 React 项目并即时预览。这种方式零配置、打开即用，适合快速试验与分享。

什么是在线生成

在线生成指使用网页平台创建项目：平台一般提供编辑器（代码区 + 预览区）和模板市场，选一个 React 模板，它会自动生成项目文件并安装依赖，代码一改、右侧立即刷新，整个过程都在浏览器中完成。

常用在线平台

常见的 React 在线平台有 CodeSandbox、StackBlitz、CodePen 等，多数免费且无需安装。它们内置 React 模板，还支持把代码保存为可分享的链接。

打开方式：直接访问平台官网（示例 https://example.com 仅为占位，实际地址请在浏览器搜索平台名称），点击新建项目即可。

在线生成流程

1. 注册/登录平台账号。
2. 点击 New / Create 新建项目。
3. 选择模板：React、React + TypeScript 等。
4. 等待几秒，平台自动生成 package.json、src 等文件。
5. 在代码区编写组件，右侧实时预览。

在线编写第一个组件

在在线项目的 src/App.jsx 中输入：

function App() {
  const now = new Date().toLocaleTimeString();
  return (
    <div>
      <h1>你好，在线 React！</h1>
      <p>当前时间：{now}</p>
    </div>
  );
}

export default App;

渲染效果：右侧预览区显示"你好，在线 React！"和打开页面那一刻的时间。改一个字符，预览会即时更新。

在线生成的优点与局限

优点：无需安装环境、跨设备可用、方便分享给他人查看。 局限：依赖公共服务器，不适合处理敏感数据；项目较大时免费额度可能受限。因此推荐用于学习与小规模演示，正式项目仍建议回到本地开发。

小结

在线生成让"零安装体验 React"成为可能：选模板、写代码、看预览三件事都在浏览器完成。把它当作随身练习场，等熟悉后再切换到本地环境开发正式项目。