reactjs - 运行 webpack 后让 React 出现
问题描述
当我运行npm run webpack
所有加载时都没有问题,除了我无法看到创建的 React 代码。去的时候localhost:3000
,它说它不存在,如果我去 html 路径,它仍然继续不显示 jsx。
包.json
{
"name": "frontend",
"version": "1.0.0",
"description": "",
"main": "app.jsx",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"deploy": "webpack --mode production",
"watch": "webpack --mode development --watch"
},
"dependencies": {
"react": "^16.8.6",
"react-dom": "^16.8.6"
},
"devDependencies": {
"@babel/core": "^7.5.4",
"@babel/preset-env": "^7.5.4",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.6",
"webpack": "4.35.3",
"webpack-cli": "^3.3.5",
"html-webpack-plugin": "^3.2.0"
},
"keywords": [],
"author": "",
"license": "ISC"
}
webpack.config.js
module.exports = (env, options) => ({
entry: {
app: "./assets/js/app.jsx"
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, './dist')
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
}
});
babel.config.js
module.exports = function (api) {
api.cache(true);
const presets = [
'@babel/preset-env',
'@babel/preset-react',
]
const plugins = [
]
return {
presets,
plugins
};
}
应用程序.jsx
import React from 'react';
import ReactDOM from 'react-dom';
const App = ({ title }) =>
<div>{title}</div>
const title = "Hello World!"
document.addEventListener("DOMContentLoaded", () => {
ReactDOM.render(
<App title={title} />,
document.getElementById('root')
)
});
解决方案
尝试这个 - -
const App = (props) => {
<div>{props.title}</div>
}
const title = "hello World";
ReactDOM.render(<App title={title}/> , document.getElementById('root'));
推荐阅读
- c# - 如何在 C# 的通用规范模式中为嵌套对象添加 .ThenInclude
- sql - 全文搜索不适用于 MATCH() 和 AGAINST()
- javascript - Discord.js V12 机器人每隔 30 分钟编辑一次角色
- react-native - 如何使用 React Native 在内容上制作可移动的框架,同时可以点击它周围的内容?
- c++ - CMake 不会将实际对象链接到生成的 dll
- python - 检测按键python for循环不起作用
- php - 不显示警报消息框
- pyspark - Create a new spark dataframe based on condition from existing dataframe
- python - 如何在python的4列列表中获取前两列的最小值和后两列的最大值?
- python - 捕捉鼠标事件