我的新Reactjs应用程序出现404错误，它正在寻找main.js文件吗? [英] I am getting a 404 error on my new Reactjs app, is it looking for a main.js file?
问题描述
此应用程序应呈现我在此处的内容(/Users/ldco2016/Projects/reactquiz/src/components/App.jsx:
This app should be rendering what I have here (/Users/ldco2016/Projects/reactquiz/src/components/App.jsx:
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
class App extends Component{
render(){
return(
<div>
APP
</div>
)
}
}
export default App
但是我得到的是空白页面，Chrome开发者工具控制台告诉我这一点:
but instead I get a blank page and the Chrome Dev tools console is telling me this:
GET http://localhost:8080/app/js/main.js 404 (Not Found)
我知道这是什么意思，但是我不清楚它是要查找我要呈现的页面还是main.js文件.
I know what that means but I am unclear as to whether it is trying to find the page I want to render or the main.js file.
/Users/ldco2016/Projects/reactquiz/package.json:
/Users/ldco2016/Projects/reactquiz/package.json:
{
"name": "reactquiz",
"version": "1.0.0",
"description": "A Reactjs Quiz App",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Daniel Cortes",
"license": "ISC",
"devDependencies": {
"babel-core": "6.13.*",
"babel-loader": "6.2.*",
"webpack": "1.13.*"
},
"dependencies": {
"react": "^15.3.1",
"react-dom": "^15.3.1"
}
}
/Users/ldco2016/Projects/reactquiz/app/index.html:
/Users/ldco2016/Projects/reactquiz/app/index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Reactjs Quiz</title>
</head>
<body>
<div id="app"></div>
<script src="js/main.js"></script>
</body>
</html>
ldco2016 @ DCortes-MacBook-Pro-3〜/Projects/reactquiz/webpack.config.js:
ldco2016@DCortes-MacBook-Pro-3 ~/Projects/reactquiz/webpack.config.js:
module.export = {
entry: [
'./src/index.js'
],
output: {
path: __dirname,
filename: 'app/js/main.js'
},
module: {
loaders: [{
test: /\.jsx?$/,
loader: 'babel',
exclude: /node_modules/
}]
}
}
/Users/ldco2016/Projects/reactquiz/src/index.js:
/Users/ldco2016/Projects/reactquiz/src/index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.jsx';
ReactDOM.render(
<App />,
document.getElementById('app')
);
推荐答案
您需要运行webpack来生成main.js文件.首先在package.json中对文件进行两项更改，添加脚本"start": "webpack --progress -p --config webpack.config.js --watch"，然后在webpack.config.js中将加载程序更改为babel-loader.
You need to run webpack to generate the main.js file. Make two changes to your file first in package.json add a script "start": "webpack --progress -p --config webpack.config.js --watch" and in your webpack.config.js change the loader to babel-loader.
PS .可能不需要第二次更改.
P.S. Second change may not be required.
package.json
{
"name": "reactquiz",
"version": "1.0.0",
"description": "A Reactjs Quiz App",
"main": "index.js",
"scripts": {
"start": "webpack --progress -p --config webpack.config.js --watch"
},
"author": "Daniel Cortes",
"license": "ISC",
"devDependencies": {
"babel-core": "6.13.*",
"babel-loader": "6.2.*",
"webpack": "1.13.*"
},
"dependencies": {
"react": "^15.3.1",
"react-dom": "^15.3.1"
}
}
webpack.config.js
module.export = {
entry: [
'./src/index.js'
],
output: {
path: __dirname,
filename: 'app/js/main.js'
},
module: {
loaders: [{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/
}]
}
}
现在使用命令
npm run start
现在打开您的本地主机，上面的应该可以使用.
now open your localhost and the above should work.
这篇关于我的新Reactjs应用程序出现404错误，它正在寻找main.js文件吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
