React中如何查看components文件夹内.ts文件创建的单个按钮？ts-node可用吗？

一、最快预览你的按钮组件 #

作为新手，最直接的办法就是在现有React项目的入口文件（比如src/App.tsx）里引入并渲染它：

• 打开src/App.tsx，顶部导入你的按钮组件：

  import MyButton from './components/MyButton'; // 换成你实际的按钮文件名
  

• 在App组件的JSX里加入这个按钮：

  function App() {
    return (
      <div className="App">
        <MyButton />
      </div>
    );
  }
  

• 启动项目的开发服务器：

  npm start
  # 用yarn的话就跑 yarn start
  

  打开浏览器访问http://localhost:3000，就能立刻看到你的按钮了。

要是不想动现有项目，也可以用在线沙箱（比如CodeSandbox、StackBlitz），直接创建React+TS的项目模板，把按钮组件的代码粘进去，实时就能看到效果，不用折腾本地环境。

二、ts-node能不能运行React组件？ #

确实没法直接用ts-node运行React组件，原因有两个：

• React组件用的是TSX/JSX语法，需要经过编译器转成浏览器能识别的普通JS，而ts-node只能处理纯TypeScript代码，解析不了JSX。
• React组件需要依赖React的运行时环境才能渲染，不管是浏览器还是Node里的服务端渲染工具（比如ReactDOMServer），ts-node只是个Node.js上跑TS的工具，没有React的渲染环境。

如果非要在Node环境里验证组件的输出，可以用ReactDOMServer.renderToString()把组件转成HTML字符串，步骤大概是：

1. 先装依赖：

   npm install react react-dom @types/react @types/react-dom typescript ts-node
   

2. 建个测试文件test-button.tsx：

   import React from 'react';
   import ReactDOMServer from 'react-dom/server';
   import MyButton from './components/MyButton';
   
   const buttonHtml = ReactDOMServer.renderToString(<MyButton />);
   console.log(buttonHtml);
   

3. 调整tsconfig.json，把jsx选项设为react-jsx或者react：

   {
     "compilerOptions": {
       "jsx": "react-jsx",
       "esModuleInterop": true
     }
   }
   

4. 用ts-node运行：

   ts-node test-button.tsx
   

   这时候控制台会输出按钮的HTML代码，但看不到可视化的按钮，还是浏览器预览最直观。

内容的提问来源于stack exchange，提问作者Lily Qiang