Skip to main content

React extension for Flask

Project description

Flask-React

React extension for Flask applications with support for multiple add-ons.

##Usage

To initialize Flask-React, simply create a React instance and provide the Flask instance. Additional parameters:

  • index_template : Index page template to use instead of default one.
  • extensions : List of React extensions to use. Currently Material-UI, React-Bootstrap and Socket.IO are available.
  • jsx_folder: Source folder for JSX files. If provided, .jsx files are converted using Babel on initialization.
  • socket_io: Flask-SocketIO instance (socket.io is used).
from flask import Flask
from flask_react import React


app = Flask(__name__)
react = React(
   app,
   extensions=("material", "components"),
   jsx_folder='static/react/jsx/'
)


if __name__ == '__main__':
   app.run()

The React code goes into the static\react\js folder, or if you use JSX, the folder you provided at initialization. The App.js file must contain an App function that returns the contents of our application.

function App() {
  return React.createElement(
    "div",
    null,
    "Hello world!"
  );
}

If you use JSX, your App.jsx would look something like this:

function App() {
  return (
      <div>Hello world!</div>
  )
}

JSX files are converted using Babel CLI. In order for this to work, Node.JS needs to be installed.

Additional files that should be put in the static/react/ folder are:

  • favicon.ico
  • logo192.png, logo512.png
  • manifest.json

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Files for Flask-ReactJS, version 0.2.3
Filename, size File type Python version Upload date Hashes
Filename, size Flask-ReactJS-0.2.3.tar.gz (926.5 kB) File type Source Python version None Upload date Hashes View hashes

Supported by

Elastic Elastic Search Pingdom Pingdom Monitoring Google Google BigQuery Sentry Sentry Error logging AWS AWS Cloud computing DataDog DataDog Monitoring Fastly Fastly CDN SignalFx SignalFx Supporter DigiCert DigiCert EV certificate StatusPage StatusPage Status page