CODEWITHSUNDEEP
reactjsflask
neutrino
neutrino

Reputation: 924

simple way to integrate React into Flask app?

Here is my flask project, which im trying to get a react file to work in.

enter image description here

In it, we have app.py, which contains the routes, and should be hitting index.html in the templates folder.

app = Flask(__name__)

@app.route("/stem")
# test channel
def qi():
    return render_template('index.html')

in the html, im simple running the script for App.js,

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="{{ url_for('static',filename='styles/App.css') }}">
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/[email protected]/babel.js"></script>
    <title>nstem</title>
  </head>
  <body>
    <script src="{{ url_for('static', filename='js/App.js') }}"> </script>
    <div id="root">
    </div>
  </body>
</html>

which, in turn, should be running a function that creates a bunch of elements.

import React from 'react';
import './static/styles/App.css';
import ReactDOM from 'react';
import game from './vectors/game.svg';
import v1 from './vectors/v1.svg';
import v2 from './vectors/v2.svg';
import flower4 from './vectors/flower4.svg';
import unity from './vectors/unity.svg';
import box from './vectors/box.svg';
import map1 from './vectors/map1.svg';
// <img class="map1" src={map1}/>

function DataStructures() {

  const section = 'lists';

  return (
    <div>
    <section class = "section">Allah'u'abha</section>
      <div>
        <div >
        <div></div>
          <div class = "listBox1"></div>
          <div class = "indexBox1"></div>
          <div class = "boxIndex1"></div>
      </div>
    </div>
    <div>
      <div >
        <div class = "listBoxes1"></div>
        <div class = "listBoxes2"></div>
        <div class = "listBoxes3"></div>
      </div>
    </div>
    <div>
      <div >
        <div class = "listBoxes1b"></div>
        <div class = "listBoxes2b"></div>
        <div class = "listBoxes3b"></div>
        <div class = "boxIndex1b"></div>
        <div class = "indexValue"></div>
      </div>
    </div>
    <div>
      <div >
        <img class="flower2" src={v1}/>
        <img class="flower3" src={v2}/>
        <img class="flower4" src={flower4}/>

      </div>
      <div class="metabox">
        <img class="flower5" src={flower4}/>
      </div>
      <div >
        <img class="box" src={v2}/>

      </div>

    </div>

  </div>
  );
}

ReactDOM.render(
  <DataStructures />,

  document.getElementById('root')
);

The issue is, nothing but the background color for the page is coming up. Im trying to understand what i'm missing here. Do i need to edit my project structure, or might it be something else?

Upvotes: 0

Views: 260

Answers (1)

Adrian
Adrian

Reputation: 1803

Since your React component is in JSX form the problem is most likely because the JSX needs to be transpiled into JavaScript that is browser-readable. Toolchains you are probably used to like Create-React-App will transpile for you (using Babel) but in Flask as far as I know you have to handle it yourself.

With Flask there are a few tutorials for making a toolchain for integrating with React out there but if you already have a pretty extensive Flask app it can be tricky.

My workaround was to initialize NPM for the project, install the babel-cli package, pre-transpile JSX files into JS and then link the HTML page to the transpiled JS file.

You can install by running the following commands:

npm init -y
npm install babel-cli@6 babel-preset-react-app@3

From there, you run this command:

npx babel --watch (jsdirectory) --out-dir (outputdirectory) --presets react-app/prod

where (jsdirectory) is the path to the directory where your React component files written using JSX are, and (outputdirectory) is where you want your translated files to show up--use . for (outputdirectory) to have transpiled files appear in your root directory.

Once you have the outputted .js files try to associate them with the HTML page as you normally would using the script tag and it should render properly.

Upvotes: 1

Related Questions