reactjs - 当 npm start 时,react 组件模块未在其自己的目录中呈现
问题描述
TLDR:npm start 不是渲染组件
因此,在开发可分发的反应组件时,我对文件夹结构有点困惑。
我希望能够在模块目录本身中演示我的模块,并能够在另一个应用程序中分发该组件。
这是我当前的目录
目前 npm start 给了我这个
这是我的 webpack 配置
var path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, './'),
filename: 'index.js',
libraryTarget: 'commonjs2' // u sorta need this
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components|build)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/react'],
plugins:['@babel/plugin-proposal-class-properties']
}
}
}
]
},
// public directory will render the component.
devServer: {
contentBase: __dirname + './dist',
compress: true,
port: 9000,
watchContentBase: true,
progress: true
},
};
dist/index.js
import React from "react";
import ReactDOM from "react-dom";
import Fetch from '../src';
const App = () => (
<div>
<Fetch/>
</div>
)
ReactDOM.render(<App />, document.getElementById("root"));
索引.html
<!DOCTYPE html>
<html>
<head>
<title>Hello React</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
和src/index.js
import Fetch from './Fetch';
export default Fetch;
解决方案
使用故事书进行演示并记录您的可重用组件。更好的方法是通过将 .stories.js 文件添加到每个组件来在组件级别创建故事。
结帐:https ://storybook.js.org/ 。
对于文件夹结构,您可以从 create-react-app 开始,它为您提供构建、运行和测试所需的所有功能。
推荐阅读
- clang - C++ Builder:使用 Clang 编译器时出现“未解决的外部”错误 (__InitExceptBlockLDTC)
- python - 无法在 Python 的 open() 中传递包含当前日期和时间的字符串
- javascript - React redux - 父状态改变,但子组件不重新渲染
- java - 找不到 JRebel 的代理库
- vba - 如何将 1 个单词与分隔符单词分开
- javascript - React - 在 CSS 中使用静态资产的相对路径
- autodesk-forge - 实现 onMarkupSelectedBinded 时出错 this.markup 事件为 null MarkupsCore
- python - 计算三个单词的频率
- hyperledger-composer - 仅通过事务处理器功能读取、更新或创建资产
- python - 如何使用格式将毫秒转换为日期时间:mm:ss:msmsms (minutes:seconds:miliseconds) without year , month a day