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

**Menus** are a clean way of giving the user several navigation options in an application without cluttering up the user interface too much. Material UI has us covered in that department.

## About the application

In this application, we now have two separate main views, one for the landing page and one for the list of books.

This is what the application looks like:

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

## Separating a landing page within the application

Looking at the structure of the application, we currently have two main views: 

* The landing page
* The book list 

We only need to show one of these at a time, independent of one another. So, separating those further is a requirement now because that will make things more simple. Otherwise, they will remain stuck in the same element tree. 

Next, let’s have a look at our modified `app.py` module.

At line 24, the `BookList` component shows us that all the books in the database are already self-contained. We can apply the same approach for the landing page to make that self-contained. So, at line 23, this will now get separated from the `app.py` application entrance point, allowing us to load either the book list or the landing page independent of one another.
 
Next, we will start looking into another folder under `bookapp/client/src/views/` called `landingPage/`. Inside, there is an empty `__init__.py` file to indicate this folder as a Python package. The landing page elements in the `app.py` module will move into its own module, which we can see inside the `bookapp/client/src/views/landingPage/` folder.

We will leave the logic for deciding which view to show in the `app.py` module, but let’s check how we can take control of this from the landing page. 

In lines 27 and 28, it still maintains the state that determines which view to show in the main `App` component and pass in the function `setBooksShow` as a prop to the `LandingPage` component that we can use to set it.

## Implementing the hamburger menu

The significant new feature here is the **hamburger** menu (the name comes from the fact that it looks like the layers of a hamburger), we can see it to the left side of our landing page title bar. There is a lot of functionality tied into the menu as a whole. Let’s look at another approach, which was to decompose that part into a separate `LandingPageMenu` component. We can find this Python module `landingPageMenu.py` inside the`bookapp/client/src/views/landingPage/` folder.

## Properties of a `LandingPageMenu` component

The `LandingPageMenu` component expects three props:

* The anchor point for the main menu (line 8).

* A function to close the main menu (line 9).

* A function to open the `About` modal view (line 10).


As with most of these types of functions, all they need to do is to set the value of a state variable, and React handles the re-rendering of the user interface for us.

Since the sub-menu that handles displaying the lookup tables is contained within this component, we have a new state variable, `lookupMenu`, that determines where and when it should show the menu (line 12). For the lookup menu to be visible, we can set it to a DOM element as an anchor point. Alternatively, we can set it to `None` to remain invisible.

### Setting up `onClick` event handler

Starting from line 41, every menu item has an `onClick` event handler that determines what action to take when selected. Generally speaking, when we click on an item, whether on the main menu or a sub-menu, this leads us to perform some action against the clicked event and close any open menus. So, if we click on an item on the lookup menu, the event handler for the item will perform the specified action and set both the `lookupMenu` state variable and the `mainMenu` state variable to `None`.  

This will cause both the main menu and lookup menu to close when the value of the `open` property is set. Since anything not `None` will evaluate to True, and `None` evaluates to `False`, we can indirectly control the visibility of the menus using the element anchor point value instead of creating an additional state variable to indicate visibility.

### Setting the `disabled` property in logout `menuItem`

At line 44, for the logout `MenuItem` component, we can use the `disabled` property to make it unselectable in the main menu. Later on, we will have the login state to determine whether to enable this menu item or not (since it requires a user to log in first to allow for the logout option).

### Adding a list of tables in lookup menu

At line 4, we also have a list of table names for the lookup menu to produce a new `MenuItem` component for each table in the list. For now, it just prints the table name in the console as a placeholder for the menu action, but we will come back to this later on once we have an actual lookup table view that we can show.

### Update the `About` component

At line 42, the logic for the About modal view will remain as it is, but instead of using a` Link` component to show it, this has moved into the main menu.

###  Eliminating additional nesting

At line 34, since our `LandingPageMenu` component returns several top-level elements instead of just one, a better idea was to wrap those elements in a React `Fragment` component that returns a single mount point to the element tree. This way, we can eliminate any additional element nesting (to wrap those elements in an HTML `div`, for example).

**Menus** are a clean way of giving the user several navigation options in an application without cluttering up the user interface too much. Material UI has us covered in that department.

# About the application

In this application, we now have two separate main views, one for the landing page and one for the list of books.

This is what the application looks like:

# Separating a landing page within the application

Looking at the structure of the application, we currently have two main views: 

* The landing page
* The book list 

We only need to show one of these at a time, independent of one another. So, separating those further is a requirement now because that will make things more simple. Otherwise, they will remain stuck in the same element tree. 

Next, let’s have a look at our modified `app.py` module.

At line 24, the `BookList` component shows us that all the books in the database are already self-contained. We can apply the same approach for the landing page to make that self-contained. So, at line 23, this will now get separated from the `app.py` application entrance point, allowing us to load either the book list or the landing page independent of one another.
 
Next, we will start looking into another folder under `bookapp/client/src/views/` called `landingPage/`. Inside, there is an empty `__init__.py` file to indicate this folder as a Python package. The landing page elements in the `app.py` module will move into its own module, which we can see inside the `bookapp/client/src/views/landingPage/` folder.

We will leave the logic for deciding which view to show in the `app.py` module, but let’s check how we can take control of this from the landing page. 

In lines 27 and 28, it still maintains the state that determines which view to show in the main `App` component and pass in the function `setBooksShow` as a prop to the `LandingPage` component that we can use to set it.

# Implementing the hamburger menu

The significant new feature here is the **hamburger** menu (the name comes from the fact that it looks like the layers of a hamburger), we can see it to the left side of our landing page title bar. There is a lot of functionality tied into the menu as a whole. Let’s look at another approach, which was to decompose that part into a separate `LandingPageMenu` component. We can find this Python module `landingPageMenu.py` inside the`bookapp/client/src/views/landingPage/` folder.

# Properties of a `LandingPageMenu` component

The `LandingPageMenu` component expects three props:

* The anchor point for the main menu (line 8).

* A function to close the main menu (line 9).

* A function to open the `About` modal view (line 10).


As with most of these types of functions, all they need to do is to set the value of a state variable, and React handles the re-rendering of the user interface for us.

Since the sub-menu that handles displaying the lookup tables is contained within this component, we have a new state variable, `lookupMenu`, that determines where and when it should show the menu (line 12). For the lookup menu to be visible, we can set it to a DOM element as an anchor point. Alternatively, we can set it to `None` to remain invisible.

## Setting up `onClick` event handler

Starting from line 41, every menu item has an `onClick` event handler that determines what action to take when selected. Generally speaking, when we click on an item, whether on the main menu or a sub-menu, this leads us to perform some action against the clicked event and close any open menus. So, if we click on an item on the lookup menu, the event handler for the item will perform the specified action and set both the `lookupMenu` state variable and the `mainMenu` state variable to `None`.  

This will cause both the main menu and lookup menu to close when the value of the `open` property is set. Since anything not `None` will evaluate to True, and `None` evaluates to `False`, we can indirectly control the visibility of the menus using the element anchor point value instead of creating an additional state variable to indicate visibility.

## Setting the `disabled` property in logout `menuItem`

At line 44, for the logout `MenuItem` component, we can use the `disabled` property to make it unselectable in the main menu. Later on, we will have the login state to determine whether to enable this menu item or not (since it requires a user to log in first to allow for the logout option).

## Adding a list of tables in lookup menu

At line 4, we also have a list of table names for the lookup menu to produce a new `MenuItem` component for each table in the list. For now, it just prints the table name in the console as a placeholder for the menu action, but we will come back to this later on once we have an actual lookup table view that we can show.

## Update the `About` component

At line 42, the logic for the About modal view will remain as it is, but instead of using a` Link` component to show it, this has moved into the main menu.

## Eliminating additional nesting

At line 34, since our `LandingPageMenu` component returns several top-level elements instead of just one, a better idea was to wrap those elements in a React `Fragment` component that returns a single mount point to the element tree. This way, we can eliminate any additional element nesting (to wrap those elements in an HTML `div`, for example).

A look at the incorporation of menus in our landing page of the application.

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

Landing Page Revisited

About the application

Separating a landing page within the application