CODEWITHSUNDEEP
javascripthtmlreactjsweb-applications
Erin
Erin

Reputation: 93

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

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'),
);

Upvotes: 1

Views: 287

Answers (1)

helloitsjoe
helloitsjoe

Reputation: 6529

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.

Upvotes: 1

Related Questions