Skip to content
Azavea
for Azavea
More
Share
Explore
other samples

icon picker
React app template

The React app template is really a React + Flask template. It’s the pattern I’ve been using recently when building apps like the PCA app. I chose Flask as a (micro)framework because it is very simple, and super pythonic; in addition, it’s very teachable and, due to its lack of boilerplate, allows for creative solutions. On the React side, I chose it because of its maturity and JSX; that said, my experience with Vue was great and I look forward to hopefully working in it more.
Below, we create the core function of the React app in App.js and the Router in routes.js:
1
create app
​
2
import React from 'react';
import './App.css';
import Navigation from './components/Navbar';
import Routes from './Routes';

function App() {
return (
<div className="App">
<Navigation />
<Routes />
</div>
);
}

export default App;
​
3
set up router endpoints
​
4
import React, { Component } from "react";
import { Router, Switch, Route } from "react-router-dom";
import Home from "./Home/Home";
import Labs2 from "./Labs/Labs2";
import Models from "./Models/Models";
import history from './history';

export default class Routes extends Component {
render() {
return (
<Router history={history}>
<Switch>
<Route path="/" exact component={Home} />
<Route path="/Models" component={Models} />
</Switch>
</Router>
)
}
}

​
There are no rows in this table
⁠

Flask backend:
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.