And*_*ick 2 reactjs webpack babeljs
我一直在遵循 React 指南，该指南介绍了在我的存储库中设置 webpack 和 babel 的过程。我创建了一个 React 元素，它将简单地打印出“Hello World”，然后我使用 ReactDOM.render 方法将此元素添加到 index.html 文件中，但由于某种原因它没有被添加。
这是我的 Index.js 文件：
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
export default class App extends React.component {
render() {
return(
<div>
Hello World
</div>
)
}
};
//////EDITED OUT <button /> for <App />
ReactDOM.render(<App />, document.getElementById("root"))
我的index.html 文件：
<!DOCTYPE html>
<div id="root"></div>
我的 webpack.config.js 文件
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: "./App/index.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.(js)$/,
loader: 'babel-loader',
exclude: /node_modules/,
},
{ test: /\.css$/, use: [ 'style-loader', 'css-loader' ]}
]
},
plugins: [
new HtmlWebpackPlugin({
template: 'App/index.html'
})
]
}
我的索引.css：
body {
background: red;
}
我的 .babelrc 文件
{
"presets": ["es2015", "react"]
}
我检查了浏览器上的开发控制台，它根本没有显示 index.html 文件中组件内包含的组件。ReactDOM 是否需要额外的东西才能将我的 React 元素推送到 DOM 中？
我在堆栈上查看了其他类似的问题，但由于拼写错误，他们的问题最终存在，我睁大眼睛检查我的代码，但找不到任何拼写错误。我认为安装过程中可能有一个步骤被我跳过了。
你需要渲染<App />不<button />
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
export default class App extends React.component {
render() {
return(
<div>
Hello World
</div>
)
}
};
document.createelement("LI").appendChild(document.createTextNode("Water"));
ReactDOM.render(<App />, document.getElementById("root"))
你还需要输出
/dist/bundle.js
在index.html
像这样
<!DOCTYPE html>
<div id="root"></div>
<script src="/dist/bundle.js"></script>
| 归档时间： |
|
| 查看次数： |
11033 次 |
| 最近记录： |