首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

2020年值得你去试试的10个React开发工具

为了将Storybook安装到你现有的React项目中,你所要做的就是: $ npx -p @storybook/cli sb init 该命令将检查你项目的结构,并尝试了解你正在使用的视图层(因为Storybook...命令完成后,您可以通过运行以下命令运行Storybook: $ npm run storybook 5....事实上,这个工具使用方式非常简单,简单到你使用一条命令就能创建一个全新的React项目,而不必去思考什么项目结构才是最好的或是哪些模块要添加到项目才是正确的。这个工具将为您完成所有的工作。...── manifest.json └── src ├── App.css ├── App.js ├── App.test.js ├── index.css ├── index.js ├── logo.svg...为了将其添加到您的项目中,您可以使用 npm $ npm install react-bootstrap bootstrap 准备就绪后,您可以将所需的样式表添加到项目App.js或src/index.js

7.8K20

storybook的介绍和使用 比较火的响应式UI开发及测试环境

可以可视化开发调试react,vue组件 官网:https://github.com/storybooks/storybook 至于为什么叫storybook,应该是敏捷开发中的user story...storybook本身提供了很多组件,也可以添加自己的组件作为story,方便他人查看,使用并测试。 使用storybook你需要有react或vue的开发经验,并且熟悉es6。...下来带大家简单使用一下: 首先全局安装storybook命令: npm i -g @storybook/cli 来到一个已存在的react项目,可以是由creat-react-app创建的 在根目录执行...'@storybook/addon-links'; import { Button, Welcome } from '@storybook/react/demo'; // 文档 https://storybook.js.org.../basics/writing-stories/ // storiesOf应该是分组,每组添加一个个story // 修改内容页面会实时发生变化 storiesOf('Welcome', module)

3K40

从 Styleguidist 迁移到 Storybook

从 Styleguidist 到 Storybook 的过渡让我们能够为 React 组件提供一个更快、更加友好的开发环境,并更好地协调开发人员和设计人员的工作流程。...在 Storybook 中,开发人员可以通过 react-docgen 自动生成控件,用户可以在文档 UI 中直接修改和预览组件。.../Button'; // 去重import { ButtonGroup } from './'; // 显式添加隐式导入的组件     <Button text="Foo" /...结  论 将 React 组件示例从 Styleguidist 迁移到 Storybook 极大地提升了开发者体验和组件性能。...切换到 Storybook 为 Yelp 打开了新的大门,我们很高兴能在上面添加插件,进一步提升前端开发人员的工作效率。 我们希望我们的分享能够为其他面对类似迁移的团队带来有用的信息!

1.3K20

你不知道的33个令人惊艳的React开发库

在今天的文章中,将介绍每个 React 开发人员都应该熟悉的 33 个令人惊叹的 React 库。而且是由其他开发人员经过良好测试和维护的令人惊叹的 React 库。...react-i18next image.png react-i18next 是一个基于 i18next 的强大的 React / React Native 国际化框架。...带有 SVG 图标的 Flexbox css。移动友好。支持 I18n 和 a11y,支持键盘事件。支持媒体源扩展 (MSE) 和加密媒体扩展 (EME)。用 TypeScript 编写。...react-query image.png React 的高性能且强大的数据同步。在 ReactReact Native 应用程序中获取、缓存和更新数据,而无需触及任何“全局状态”。...storybook image.png Storybook 是一个用于独立构建 UI 组件和页面的前端研讨会。成千上万的团队使用它进行 UI 开发、测试和文档编制。它是开源且免费的。

28120

基于 React、TS的聊天室monorepo实战

接着来看下我们要实现的页面长什么样子: 开发计划与项目初始化 通过需求分析后,制定如下开发计划: 基础配置 基础配置是通过自研脚手架快速搭建的,其中包括: 添加 eslint、prettier、husky...用于代码规范、git 提交规范 添加 Lerna 配置,yarn workspaces 在 packages 目录建立 @im/component、@im/app、@im/server 包 这里说明下...命令如下: 初始化 React+TS 环境 npx create-react-app component --typescript 初始化 Storybook cd component npx -p @...storybook/cli sb init --story-format=csf-ts 添加 storybook addons { addons: [ '@storybook/preset-create-react-app...', '@storybook/addon-viewport', // 手机预览效果 '@storybook/addon-notes/register-panel', // API 文档

1.8K10
领券