StorYBook

Storybook requires default Ant Design component to be exported for styling to be applied

由 扶醉桌前 提交于 2020-01-25 05:41:05
问题 I'm looking to design some of my React Components using Ant Design and documenting them in Storybook. Both the storybook and components are written correctly and working. modal.stories.js import React from "react"; import { action } from "@storybook/addon-actions"; import { Button } from "@storybook/react/demo"; import { BasicModal } from "./BasicModal"; import { Modal } from "antd"; // IF I REMOVE THIS ANT DESIGN DOESN'T APPLY. export default { title: "Modals" }; export const basicModal = ()

Babel Error: Plugin/Preset files are not allowed to export objects, only functions

由 元气小坏坏 提交于 2019-12-25 02:44:10
问题 I'm trying to run storybook on an expo installation. So I only got expo and storybook in the app so far. I'm not able to start the storybook for web. My package.json looks like this: "dependencies": { "expo": "^32.0.0", "react": "16.5.0", "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz" }, "devDependencies": { "@babel/core": "^7.2.2", "@babel/preset-env": "^7.2.3", "@babel/preset-react": "^7.0.0", "@babel/runtime": "^7.2.0", "@storybook/addon-actions": "^4.1.6"

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

由 …衆ロ難τιáo~ 提交于 2019-12-20 09:54:03
【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 本文由葡萄城技术团队翻译并首发 转载请注明出处： 葡萄城官网 ，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。 JavaScript每天都在出现大量的框架和工具，而React是除了上次我们提到的 Vue和Ember 之外另一款比较流行的框架。但因为新的工具每天都在不断的出现，开发者在尝试时总会有些不知所措。 因此，当为你的新React项目选择合适的IDE，合适的可视化工具甚至是合适的样式时，你都会有很多选择，你该怎么选择合适的？这是一件令人犯愁的事儿。 在本文中，我将介绍11个关于React的开发工具，以帮助你选择以及带你了解如何用它们来使你更充分的使用框架。 1. React开发人员工具 我们将从React开发人员最受欢迎的工具之一的 Chrome React Dev Tools 开始说起，它是一个Chrome 扩展程序，最近它发布了它的v4版。 安装完成后，打开Chrome的开发人员工具你就能看到多出了Components和Profiler选项卡，“Components”选项能帮助你查看屏幕上组件列表以及从其他组件派生出的子组件，你能够选择检查甚至编辑组件的状态和属性。使用“Profiler”选项卡，你也可以评估应用程序的性能。 这两个选项都可以在Chrome DevTools选项卡上找到

@storybook/angular cannot load scss file on stories index

由 主宰稳场 提交于 2019-12-13 17:12:11
问题 I have been trying to use storybook for my angular project and I use this guide https://storybook.js.org/basics/guide-angular/ I use the recommended config for webpack for sass loader for scss files and the scss file related to the project works fine, but if I import a scss file in the stories index.ts file, this file it is not loaded. stories/index.ts import { storiesOf } from '@storybook/angular'; import { action } from '@storybook/addon-actions'; import { VideoPosterComponent } from '..

React Developers的10个超实用神奇工具

由 不打扰是莪最后的温柔 提交于 2019-11-27 02:56:57
React是一个用于构建用户界面的JavaScript库。但是，很多人都不知道，其实有非常多的有助于我们更好地使用React，提升用户开发体验的优秀工具。 如果您还没有使用过React，或者有可能对使用它感兴趣，当他们问你为什么要使用这个库时，你会怎么说？ 除了告诉他们React的库有多棒（这应该是第一件事）之外，我还想提到开源社区创建的工具这部分，它将极大地提升你的体验感，甚至让你觉得兴奋。 以下是您可以在2019年用于构建React应用程序的10个工具（此列表不按其重要性排序；原文本有22个，我们将在下期接着推送。） 1. Webpack Bundle Analyzer 有没有想过你的应用程序的哪些部分占用了大部分空间？那么，你可以找到Webpack Bundle Analyzer。该软件包将帮助您识别占用空间最多的输出文件。 它将创建一个实时服务器，并为您提供捆绑包内容的交互式树形图可视化。通过这个工具包，您可以看到所呈现文件的位置，gzip大小，解析大小以及子/父文件。 你可以根据你看到的内容优化你的React应用程序！ 这是一个截图： 您可以清楚地看到pdf包占用应用程序中的最大空间，同时，它也占据了屏幕上最显著的位置。这个非常有用。 屏幕截图只是它功能中非常非常小的一部分，您还可以更进一步地进行查看，例如 generateStatsFile: true
订阅 StorYBook