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.

Source Distribution

Flask-ReactJS-0.2.3.tar.gz (926.5 kB view hashes)

Uploaded Source

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page