無法導入前端代碼

我的Django項目具有以下結構：無法導入前端代碼

我在瀏覽器中顯示questions.html：

<html> 
    <head> 
    </head> 

    <body> 
    Questions: 

    <div id="questionSpace"></div> 

    <script src="../js/frontEnd/src/App.js"/> 

    </body> 
</html>

questions.html被引用代碼App.js這是：

import {React, Component} from 'react'; 
import logo from './logo.svg'; 
import ReactDOM from 'react-dom'; 
import './App.css'; 

class App extends Component { 

    componentWillMount() { 
    fetch(`http://localhost:8000/api/questions`) 
     .then(result => { 
     this.setState({questions: result.json()}) 
     }) 
    } 

    render() { 
    return (
     <div className="App"> 
     <div className="App-header"> 
      <img src={logo} className="App-logo" alt="logo" /> 
      <h2>Welcome to React</h2> 
     </div> 
     <ul> 
      {this.state.questions.map(question => <li>question.content</li>)} 
     </ul> 
     </div> 
    ); 
    } 
} 

ReactDOM.render(<App />, document.getElementById("questionSpace"));

由於某種原因，JavaScript代碼不包含在html頁面中。

任何想法可能導致這種情況？

來源

2016-11-08 octavian

你有[檢查你的錯誤控制檯？（http://stackoverflow.com/ documentation/javascript/185/getting-started-with-javascript/714/using-console-log）你是否預處理了那些代碼？ React使用瀏覽器本身不支持的JSX，而大多數瀏覽器還不支持「import」。您的代碼需要編譯。 –

首先，你可能想使用<script ...></script> instead of <script ... />

其次重要的是，如果你使用JSX和/或ES6（例如import語法），你想先編譯的，然後包括在編的.js該頁面，而不是源JSX。

最後，如果questions.html呈現爲Django模板，包括<script src="../js/frontEnd/src/App.js"></script>是行不通的，除非你安裝的Django到serve static files，例如在/static/

<script src="/static/js/frontEnd/dist/App.js"></script>

注意上面我用的dist/App.js代替src/App.js強調的是，你最終會需要編譯的.js

來源

2016-11-08 15:40:27 bakkal

無法導入前端代碼

回答

相關問題