logo标签列表

我能否在VSCode中实时预览React组件？

reactjsvisual-studio-code
3
新手使用React。我一直在VS Code中为html文件使用live server，但是我似乎找不到相同的功能用于React组件（.js文件）。也许这很明显或者我正在寻找错误的东西。
我想在组件中进行更改，特别是MUI样式，并在实时预览中看到增量结果，而不是整个应用程序都必须刷新并返回到我正在工作的表单。有什么想法或建议吗？谢谢。
1
你可以使用Storybook来完成这个任务。https://storybook.js.org/docs/guides/guide-react/ - undefined
谢谢。我看了一下，有点困惑。我需要改变我的代码来使用它吗？ - undefined
2
我一直在开发一个能够完全做到这一点的工具 :) 你可以在https://reactpreview.com上试用一下。 - undefined
4个回答
3
你在使用storybook时不需要更改你的代码。你只需要编写新文件，导入你的组件。然后你就可以传递虚假的props来查看它在许多场景下的行为。如果你正在使用create-react-app，安装非常容易。如果你有自己的配置，那么你的水平足以遵循他们的教程。这些文件的格式如下：MyComponent.stories.js。然后storybook会查看所有包含“stories”名称的文件，并在你的终端中键入yarn/npm run storybook时，在端口6006上启动它们。我强烈推荐storybook，因为它被大多数公司使用。
2

找不到令人满意的解决方案，也不愿意投入太多。Storybook看起来我需要改变我的代码，因为我还是相对新的React开发者，不确定自己是否有能力做到。

我只是让VSCode在每次保存更改后重新启动服务器，然后进入浏览器并通过菜单点击到我正在工作的页面。

对于更复杂的UI更改，我会创建一个代码沙盒迷你React应用程序，只需在其中进行如CSS更改等操作。

更新： 我已经实现了Storybook并且很喜欢它。按照文档安装后，我看到我只需要为像MyComponent.stories.js这样的组件创建一个文件（故事），并放入少量代码以导入和使用它，传递任何我想要查看的props。

我决定将我的stories文件放入src下的单独stories文件夹中。以下是Details组件的示例：

import React from 'react';
import { action } from '@storybook/addon-actions';
import Details from '../Details';

// How to display the component in Storybook page
export default {
  title: 'Details',
  component: Details,
  // Our exports that end in "Data" are not stories.
  excludeStories: /.*Data$/
};

// Props passed into component
export const recordData = {
  record: {
    id: '1',
    createdOn: '2020-04-20 4:07 PM',
    createdBy: 'dgarv',
    modifiedOn: '2020-04-20 4:07 PM',
    modifiedBy: 'dgarv',
  }
};

// Use the actual component
export const Default = () => <Details {...recordData} />;
好的。你说服我使用Storybook了。还有一件要学习的事情，但它看起来很简单而且非常有用。谢谢你指导我朝着正确的方向前进。希望我能弄清楚如何给你答案的功劳？ - undefined
如果我的评论对您有帮助，您可以将其标记为此主题的正确答案。这样，有相同问题的人就会看到这是一个已解决的帖子，并在这里找到他们想要的答案。我将把我的评论复制粘贴为答案，以便您可以批准它（如果您愿意）。祝您有美好的一天。 - undefined
0
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接