我在我的ReactJs代码中遇到了一些问题。一切都在编译没有任何错误使用webpack。但是在webpack dev服务器启动后,当我浏览到localhost:9000时,没有任何内容从ReactJs插入到DOM中。React不附加DOM到HTML
我运行在终端npm start
。
这是所有我写的代码 -
.babelrc
{
"presets": ["es2015", "react", "stage-0"]
}
.eslintrc
{
"ecmaFeatures": {
"jsx": true,
"modules": true
},
"env": {
"browser": true,
"node": true
},
"parser": "babel-eslint",
"rules": {
"quotes": [2, "single"],
"strict": [2, "never"],
"react/jsx-uses-react": 2,
"react/jsx-uses-vars": 2,
"react/react-in-jsx-scope": 2
},
"plugins": [
"react"
]
}
.jslintrc
{
"node": true,
"browser": true,
"esnext": true,
"newcap": false
}
的index.html
<html>
<head>
<title>Forms in React Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
</head>
<body>
<div id='root' class="container">
</div>
</body>
<script src="/static/bundle.js" type="text/javascript"></script>
</html>
index.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class IndexComponent extends React.Component{
render() {
return (
<div>
<input type="text" value="Shawn" />
</div>
);
}
}
ReactDOM.render(<IndexComponent />, document.getElementById('root'));
**package.json**
{
"name": "chapter4",
"version": "0.0.1",
"description": "ReactJS forms example",
"scripts": {
"start": "node server.js",
"lint": "eslint src"
},
"author": "",
"license": "MIT",
"homepage": "",
"devDependencies": {
"babel": "^6.23.0",
"babel-cli": "^6.24.1",
"babel-core": "^6.24.1",
"babel-eslint": "^7.2.2",
"babel-loader": "^6.4.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"eslint": "^3.19.0",
"eslint-plugin-react": "^6.10.3",
"react-hot-loader": "^1.3.1",
"webpack": "^2.4.1",
"webpack-dev-server": "^2.4.2"
},
"dependencies": {
"react": "^15.5.4",
"react-dom": "^15.5.4"
}
}
webpack.config.js
var path = require('path');
var webpack = require('webpack');
module.exports = {
devtool: 'eval',
entry: [
'webpack-dev-server/client?http://localhost:9000',
'webpack/hot/only-dev-server',
'./src/index'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
// new webpack.NoEmitOnErrorsPlugin()
],
resolve: {
extensions: ['.js', '.jsx']
},
module: {
rules: [
{
test: /\.jsx?$/,
include: [path.join(__dirname, 'src')],
},
{
use: [
{
loader: 'react-hot-loader'
},
{
loader: 'babel-loader',
options: {
// cacheDirectory: 'babel_cache',
presets: ['react', 'es2015']
}
}
]
}
]
}
};
谢谢大家提前。
在JS控制台中是否有任何错误?或者在编译期间以及运行时错误中没有任何错误? – saadq
打开您的控制台并检查是否有任何错误。那会让你指向正确的方向。 –
@saadq在控制台上没有错误。 –