Я получаю сообщение об ошибке 404 в моем новом приложении Reactjs, оно ищет файл main.js?

Question

Я получаю сообщение об ошибке 404 в моем новом приложении Reactjs, оно ищет файл main.js?

Это приложение должно отображать то, что у меня здесь (/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 Dev сообщает мне следующее:

GET http://localhost:8080/app/js/main.js 404 (Not Found)

Я знаю, что это значит, но мне неясно, пытается ли он найти страницу, которую я хочу отобразить, или файл main.js.

/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:

<!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 ~ / Проекты / Reactionquiz / 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:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.jsx';

ReactDOM.render(
    <App />,
    document.getElementById('app')
);

2

javascript reactjs webpack babel-core

Источник

user6719819 22 авг '16 в 01:55

1 ответ

Решение

Другие вопросы по тегам javascript reactjs webpack babel-core

user5928186 22 авг '16 в 05:32 2016-08-22 05:32 · Accepted Answer · 2016-08-22 05:32

Вам нужно запустить webpack для генерации файла main.js. Сначала внесите два изменения в файл package.json добавить скрипт "start": "webpack --progress -p --config webpack.config.js --watch" и в вашем webpack.config.js изменить загрузчик на babel-loader,

PS Второе изменение может не потребоваться.

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/
        }]
    }

}

Теперь запустите webpack с командой

npm run start

Теперь откройте ваш localhost, и выше должно работать.