javascript not rendering at all in HTML (React, Flask app)

Question

I am trying to build a web app with python, HTML, Javascript, React, Flask. I created python package and my HTML can find the javascript. But it was not replacing the item in the HTML. I would really appreciate it if anyone has any insight.

I have installed react chrome tool but it says that that page is not using react. So I really don't know how to debug this error anymore. If anyone has insights on this please comment as well.

tree:

├── README.md
├── bin
│   ├── install
│   └── run
└── meme
    ├── meme
    │   ├── __init__.py
    │   ├── main.py
    │   ├── static
    │   │   └── js
    │   │       ├── generate.jsx
    │   │       └── search.jsx
    │   └── templates
    │       ├── generate.html
    │       └── search.html
    ├── meme.egg-info
    │   ├── PKG-INFO
    │   ├── SOURCES.txt
    │   ├── dependency_links.txt
    │   ├── requires.txt
    │   └── top_level.txt
    └── setup.py

What localhost:8888/search/ looks like: Apparently it is not rendering.

Loading...

search.HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Search</title>
    </head>

    <body>
        <div id="reactEntry">Loading...</div>
        <script type="text/javascript" src="{{url_for('static', filename="js/search.jsx")}}"></script>

    </body>
</html>

search.jsx:

import React from 'react';
import ReactDOM from 'react-dom';


class SearchObj extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            query = "",
            imgs = [{"name": "img1"}, {"name": "img2"}], // list of img dictionary
        }
        this.submitQuery = this.submitQuery.bind(this);
    }

    submitQuery() {}

    render() {
        console.log("render")
        return (
            <form onSubmit={this.submitQuery}>
                <input id="query" type="text" name="submit">submit query</input>
            </form>
        );
    }
}


// This method is only called once
ReactDOM.render(
  <SearchObj url="/search/" />,
  document.getElementById('reactEntry'),
);

helloitsjoe · Accepted Answer · 2020-05-02 00:21:07Z

1

Browsers don't know how to handle .jsx files, so you'll have to transpile it to regular JavaScript before your app can parse it. You can use a bundler like Webpack or Parcel to bundle your JavaScript.

Here's an article that does exactly what you're trying to do, serves a React app with Flask: https://itnext.io/a-template-for-creating-a-full-stack-web-application-with-flask-npm-webpack-and-reactjs-be2294b111bd

Re: debugging - You can use your browser's devtools to debug when things aren't working. Open devtools by right-clicking and select "Inspect" (might be slightly different in different browsers). Open the console to see if there are any errors, or open the Network tab to see the status of the JavaScript file.

answered May 2, 2020 at 0:21

helloitsjoe

6,5393 gold badges24 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

javascript not rendering at all in HTML (React, Flask app)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related