21个让React 开拓更高效更风趣的器材

以下是行使此库举办测试的示例代码：

// Hoist helper functions (but not vars) to reuse between test cases 
 
const renderComponent = ({ count }) => 
 
render( 
 
<StateMock state={{ count }}> 
 
<StatefulCounter /> 
 
</StateMock>, 
 
) 
 
it('renders initial count', async () => { 
 
// Render new instance in every test to prevent leaking state 
 
const { getByText } = renderComponent({ count: 5 }) 
 
await waitForElement(() => getByText(/clicked 5 times/i)) 
 
}) 
 
it('increments 
 
count', async () => { 
 
// Render new instance in every test to prevent leaking state 
 
const { getByText } = renderComponent({ count: 5 }) 
 
fireEvent.click(getByText('+1')) 
 
await waitForElement(() => getByText(/clicked 6 times/i)) 
 
}) 

8. React Developer Tools

React Developer Tools是一个扩展插件，应承在Chrome和Firefox Developer Tools中搜查React的组件条理布局。

这是React开拓中最常见的扩展插件，而且是React开拓职员可以用来调试其应用措施的最有效的器材之一。

9. Bit

通过Bit可以看到数以千计的开源组件，并应承还可以行使它们来构建项目。

列表中有许多许多React组件可供咱们行使，包罗选项卡，按钮，图表，表格，导航栏，下拉列表，加载微调器，日期选择器，面包屑，图标，机关等。

10. Storybook

Storybook 是一个轻松地构建UI组件的库。该器材启动一个及时开拓处事器，支持开箱即用的热重载，你可以在个中独立地及时开拓React组件。

这足以作为平凡文档页面：

11. React Sight

你有没有想过你的应用措施在流程图中的样子？ React Sight应承你通过展示整个应用措施的及时组件条理布局树来可视化React应用措施。

它还支持react-router，Redux以及React Fiber。

行使此器材，您可以将鼠标悬停在节点上，这些节点是指向与树中组件直接相干的组件的链接。

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!