GAID

Please enter the google analytics ID for appData file.

Gain insights into using Python and Transcrypt to build complete web applications. Delve into refactoring, adding new features, and creating cohesive frontend-backend projects with React.

tarball.tar.gz

Final_App

ReactPythonStep01

ReactPythonStep02

ReactPythonStep03

ReactPythonStep04

ReactPythonStep05

ReactPythonStep06

ReactPythonStep07

ReactPythonStep08

ReactPythonStep09

ReactPythonStep10

ReactPythonStep11

ReactPythonStep12

ReactPythonStep13

FinalWebApp

Gunicorn_run

ReactPythonStep01-copy

Python is already used in the backend of most web applications, but sadly it does not work with web browsers to drive the frontend of those applications. Transcrypt can help by creating more coherent web-based projects, using Python to write both the backend and the frontend.

This course builds on the lessons in Using the Python Transcrypt Transipler for Front-end Coding to implement a complete React and Python web-based project. In each chapter, we will refactor existing code to add new functionality, building up the application as you go. Each chapter ends with a running application that includes all of the features we added up to that specific point.

Using Python and Transcrypt to Build a Complete Web Application

## About the application

We need to add functionality that allows us to modify the web browser URL without reloading the application, and to re-render our application if the URL changes.

This is what the application looks like:
> **Note:** To log in, use the username `admin` and password `123`.

import React from 'react';
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

import HelloWorld from './app';

var TestResult = function() {
    this.succeeded = false;
    this.reason = "";
    this.input = "";
    this.expected_output = "";
    this.actual_output = "";
}

export const executeTests = function() {

  var results = [];

  result = new TestResult();
  result.input = 'HelloWorld Component';
  result.expected_output = "span containing text 'Hello World'"

  let wrapper = shallow(<HelloWorld />);

  // Call your Challenge function here.

  let type = wrapper.type();
  let testSuccessful = true;
  let failureReason;

  if (type !== 'span') {
    testSuccessful = false;
    failureReason = "You need to render exactly one span HTML element";
  } else if (wrapper.props().children != "Hello World") {
     testSuccessful = false;
     failureReason = "You have rendered wrong message in your span element";
  }

  result.actual_output = wrapper.html();

  if (testSuccessful) {
    result.succeeded = true;
    result.reason = "Succeeded"
  } else {
    result.succeeded = false;
    result.reason = failureReason;
  }

  results.push(result);

  return results;
}


React

Dart

GoJS React

Typescript React

Vue.js

## Modifications in the `pyreact` module

At line 30, look at the modifications in the `render()` function in the `pyreact.py` module located inside the `bookapp/client/src/common/` folder that injects the current URL path and query parameters into the component props. With this information, our application will be able to perform view routing in the main `App` component using the URL in the web browser. Those minor changes made in this module are important to the redirect framework implementation.

### Built-in JavaScript window methods as props

At lines 25 and 27, we have some built-in JavaScript window methods to get the URL path (`location.pathname`) and `querystring` parameters (`location.search`) which will be added as two additional props that get sent to the main entry point `App` component at line 29.

At line 26, turning the `querystring` parameters into a proper Python dictionary requires a few extra steps:

* We first create an iterator by passing the `querystring` to the `window.URLSearchParams()` method. Since Python doesn't have the keyword `new`, the Transcrypt `__new__()` constructor function is used here since it is explicitly creating a JavaScript object.  During transpilation, Transcrypt will convert this expression into the proper JavaScript format.

* Then, at lines 27 and 28, once we have that iterator, we use a Python dictionary comprehension to loop through the iterator object and create the parameter dictionary.

* At line 36, we also have a browser event listener for `popstate` that calls the functional part of our `render()` function to refresh the application whenever the web browser notices the back button press.

## Modifications in the `urlutils` module

Now that the application is in a position to work with the web browser URL, we look at how we can add some additional functionality to the existing `urlutils.py` module located inside the `bookapp/client/src/common/` folder to perform page redirects based on the URL.

Here's what we will look at in this module:

* The first is the ability to automatically redirect to the `Login` modal view if we receive an HTTP `401 Unauthorized` response from the back-end server. At line 19, this option is facilitated by looking for a "redirect" keyword argument sent to our `fetch()` function, which defaults to `True` if not supplied. At lines 38 and 39, if the redirect option is enabled, the `redirToLoginPage()` function will be called if the request receives a `401` response.  At line 40, our application raises an error so the calling function knows something went wrong and can do things like show an error snackbar to the user.

* Starting from line 83, the `redirToLoginPage()` function keeps track of the current URL by adding it to the URL querystring as a parameter called `redir`, after checking to make sure that there isn't already one there.  At line 88, if the `redir` parameter is already part of the `querystring`, it will keep the one there.  It then sets the current web browser URL to the `landingPage` view with an extra `querystring` parameter `login=show` that lets the `LandingPage` component know that the modal `Login` component should appear when the view is loaded.

### The `spaRedirect()` function

* Starting from line 76, the key function that allows the application to change views based on the URL is `spaRedirect()`.  It makes calls to two JavaScript window methods:

   * At line 77, the first window method pushes the specified URL onto the web browser's history stack using the `pushState()` method. 
 
   * At line 78, a browser event is fired that pops that URL off the stack with the `PopStateEvent()` method.  When this happens, it triggers the web browser event listener for `popstate` that is added in the `render()` function in the `pyreact.py` module, which causes the application to re-render. 

* Starting from line 100, the last item we will see in this module is a wrapper for the Material UI `Link` component currently in use on the `landingPage` view. In lines 111-113, some conditional logic is also applied. If an `onClick` event handler is supplied, it will just behave normally and call whatever function is supplied. In lines 114, 115, and 116, if an `onClick` handler is not supplied and there is just a destination URL, then at line 105 it will use the `spaRedirect()` function to process the supplied URL.  In both cases, React renders the Material-UI `Link` component.   Our wrapper component modifies its behavior when a URL is supplied. Note that we have the Material-UI `Link` component imported using the `MuiLink` alias to avoid namespace collisions.

### The benefit of SPA redirect functionality

One benefit of using the SPA redirect functionality is that it makes our code a little cleaner when the application needs to move between views.  Rather than passing view logic around using props, it can instead use the `spaRedirect()` function to directly update the URL in the web browser.  Each of our view components can then adjust its behavior based on the current URL and `querystring` parameters. 

# About the application

We need to add functionality that allows us to modify the web browser URL without reloading the application, and to re-render our application if the URL changes.

This is what the application looks like:
> **Note:** To log in, use the username `admin` and password `123`.

# Modifications in the `pyreact` module

At line 30, look at the modifications in the `render()` function in the `pyreact.py` module located inside the `bookapp/client/src/common/` folder that injects the current URL path and query parameters into the component props. With this information, our application will be able to perform view routing in the main `App` component using the URL in the web browser. Those minor changes made in this module are important to the redirect framework implementation.

## Built-in JavaScript window methods as props

At lines 25 and 27, we have some built-in JavaScript window methods to get the URL path (`location.pathname`) and `querystring` parameters (`location.search`) which will be added as two additional props that get sent to the main entry point `App` component at line 29.

At line 26, turning the `querystring` parameters into a proper Python dictionary requires a few extra steps:

* We first create an iterator by passing the `querystring` to the `window.URLSearchParams()` method. Since Python doesn't have the keyword `new`, the Transcrypt `__new__()` constructor function is used here since it is explicitly creating a JavaScript object.  During transpilation, Transcrypt will convert this expression into the proper JavaScript format.

* Then, at lines 27 and 28, once we have that iterator, we use a Python dictionary comprehension to loop through the iterator object and create the parameter dictionary.

* At line 36, we also have a browser event listener for `popstate` that calls the functional part of our `render()` function to refresh the application whenever the web browser notices the back button press.

# Modifications in the `urlutils` module

Now that the application is in a position to work with the web browser URL, we look at how we can add some additional functionality to the existing `urlutils.py` module located inside the `bookapp/client/src/common/` folder to perform page redirects based on the URL.

Here's what we will look at in this module:

* The first is the ability to automatically redirect to the `Login` modal view if we receive an HTTP `401 Unauthorized` response from the back-end server. At line 19, this option is facilitated by looking for a "redirect" keyword argument sent to our `fetch()` function, which defaults to `True` if not supplied. At lines 38 and 39, if the redirect option is enabled, the `redirToLoginPage()` function will be called if the request receives a `401` response.  At line 40, our application raises an error so the calling function knows something went wrong and can do things like show an error snackbar to the user.

* Starting from line 83, the `redirToLoginPage()` function keeps track of the current URL by adding it to the URL querystring as a parameter called `redir`, after checking to make sure that there isn't already one there.  At line 88, if the `redir` parameter is already part of the `querystring`, it will keep the one there.  It then sets the current web browser URL to the `landingPage` view with an extra `querystring` parameter `login=show` that lets the `LandingPage` component know that the modal `Login` component should appear when the view is loaded.

## The `spaRedirect()` function

* Starting from line 76, the key function that allows the application to change views based on the URL is `spaRedirect()`.  It makes calls to two JavaScript window methods:

   * At line 77, the first window method pushes the specified URL onto the web browser's history stack using the `pushState()` method. 
 
   * At line 78, a browser event is fired that pops that URL off the stack with the `PopStateEvent()` method.  When this happens, it triggers the web browser event listener for `popstate` that is added in the `render()` function in the `pyreact.py` module, which causes the application to re-render. 

* Starting from line 100, the last item we will see in this module is a wrapper for the Material UI `Link` component currently in use on the `landingPage` view. In lines 111-113, some conditional logic is also applied. If an `onClick` event handler is supplied, it will just behave normally and call whatever function is supplied. In lines 114, 115, and 116, if an `onClick` handler is not supplied and there is just a destination URL, then at line 105 it will use the `spaRedirect()` function to process the supplied URL.  In both cases, React renders the Material-UI `Link` component.   Our wrapper component modifies its behavior when a URL is supplied. Note that we have the Material-UI `Link` component imported using the `MuiLink` alias to avoid namespace collisions.

## The benefit of SPA redirect functionality

One benefit of using the SPA redirect functionality is that it makes our code a little cleaner when the application needs to move between views.  Rather than passing view logic around using props, it can instead use the `spaRedirect()` function to directly update the URL in the web browser.  Each of our view components can then adjust its behavior based on the current URL and `querystring` parameters. 

Explore more about the redirect functionality that allows our application to change views based on the URL.

Introduction

Environment Setup

Landing Page

Modal View

REST Service

Build a REST API in Flask

Books

Menus

User Login

Lookups

User Context

Editing Lookups

Filtering Data

Editing Books

SPA Redirect

Deploying the Application

Conclusion

Redirect Functionality

About the application

Modifications in the `pyreact` module

Built-in JavaScript window methods as props

Build a REST API in Flask

Redirect Functionality

About the application

Modifications in the pyreact module

Built-in JavaScript window methods as props

Modifications in the `pyreact` module