CODEWITHSUNDEEP
javascripthtmldjangoreactjs
bsky
bsky

Reputation: 20242

Can not import front end code

My Django project has the following structure:

enter image description here

I am displaying questions.html in the browser:

<html>
  <head>
  </head>

  <body>
  Questions:

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

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

  </body>
</html>

questions.html is referencing the code from App.js which is:

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"));

For some reason, the javascript code is not included in the html page.

Any idea what could cause this?

Upvotes: 0

Views: 303

Answers (1)

bakkal
bakkal

Reputation: 55448

First of all you may want to use <script ...></script> instead of <script ... />

Second of all, if you use JSX and/or ES6 (e.g. the import syntax), you want to compile those first, then include the compiled .js in the page, not the source JSX.

Finally, if questions.html is rendered as a Django template, including <script src="../js/frontEnd/src/App.js"></script> wouldn't work unless you setup Django to serve static files, e.g. on /static/

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

Notice above I use dist/App.js instead of src/App.js to emphasize that you will eventually need a compiled .js

Upvotes: 2

Related Questions