无法导入前端代码答案

【问题标题】：Can not import front end code无法导入前端代码
【发布时间】：2016-11-08 15:30:30
【问题描述】：

我的 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 页面中。

知道是什么原因造成的吗？

【问题讨论】：

你有checked your console for errors? 你在预处理那个代码吗？ React 使用浏览器本身不支持的 JSX，并且大多数浏览器尚不支持 import。您的代码需要编译。

标签： javascript html django reactjs

【解决方案1】：

首先你可能想使用<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

【讨论】：