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

Now that we have a way to call our REST API, let’s have a look at the view component of the application that will display all of the books in our database as a formatted list. Doing that will require several aspects:

```ini
Container component
├── Title bar
│    ├── Title
│    └── Close button
├── Table component
│    ├── Column headings
│    └── Rows of book records
├── Function to get data on load
├── Function to sort data
└── Wait icon to display while getting data
```

# About the application

In this application we have three state variables:
* `books`, which stores a list of books.
 * `sortkey`, which sorts the table column-wise.
 * `showprogress`, which shows the wait icon until it is required.


Next, we have the `getBooks()` function that will list down all of the books on our book view. We also have an IconButton component to close the view, and a BooksTable component that will be mainly responsible for providing us with a fully functional table view. Finally, we have the `CircularProgress` component, which will tell the user to wait until the `fetch` call returns with some data. 

This is what the application will look 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

# About the view components

We’ll now have a look at our individual components that make up this view. We usually have the option of creating them as separate files or combining them all into one file. In this case, we’ll use two files:

* One is for the main view.
* The second is just for the list itself.

## First view component

We have a folder called `views/` under `bookapp/client/src/`. Inside that folder, we have an empty `__init__.py` file for Python to recognize it as a package and a folder called `bookList/`. Let’s look inside the `bookList/` folder. Here, we have another `__init__.py` fileto help Python recognize it as a Python package. Besides that, we also have a `bookListView.py` Python module that represents the entire view.

Next, let's look at `bookListView.py` in detail.

This component needs one `onClose` prop passed into it, a function that is called when the close button is clicked.

At line 54, we’ll use this for the `onClick` event of the `IconButton` in the `AppBar`. This is similar to what we witnessed for the About modal component.
 
It also uses three state variables:

* `books`: A list that stores the book records (line 11).
* `sortKey`: A string that holds the column name to sort on (line 12).
* `showProgress`: A boolean value that indicates if the wait icon should be shown or not (line 13). 

To get the list of books from the REST service, it uses a `React.useEffect()` hook function with an empty list. At line 23, the `getBooks()` function will be called when the `BookList` component completes loading. Our `fetch()` function then calls the internal `_getBooks()` function at line 26 as a callback to update the component state.

Normally, once the fetch is complete, it deactivates the waiting icon by setting the `showProgress` state to `False`. However, if something goes wrong with the call to `fetch()`, we still want the wait icon to go away. This is where the `onError` keyword for our updated `fetch()` function comes in handy.
At line 40, by passing `setShowProgress(False)` as a value for `onError` to the `fetch()` function, it will be called if an error occurs that would otherwise end up bypassing our normal call to turn off the wait icon.

### The `CircularProgress` component as waiting state

If there are a lot of books in our database, it could take a second or so to retrieve the data.  To let the user know the application is in a waiting state, we use the `CircularProgress` component, and display it for the duration of the call to `fetch()`.

To make that work, we add the `CircularProgress` component to the element tree code in line 64, which uses the state variable `showProgress` at line 69 to decide if it should appear or not. In this case, we have an inline ternary statement to provide that logic. If we don’t need to show it, the ternary statement returns a value of `None`, which is a valid return value from a React component to indicate that it should not be added as a node in the DOM.

>Note: Since we only have a few books in our database for testing, it might not be enough time for the progress indicator to even show. If you want to test it, you can try adding a five-second delay using a call to `time.sleep()` in the `/api/books` route on the Flask server.

One nuanced detail of the `getBooks()` function is the addition of a flag variable:

```python
isPending = True
```

### Capabilities of a `useEffect` hook
By returning the `abort()` function back to `useEffect()` when the HTTP request is made (line 41), it will be called when React is removing the component from the DOM and give us a chance to set `isPending` to `False`. This prevents the `books` state variable from being updated after it no longer exists, which would otherwise cause it to generate an error.
 
We also have a function that is used to sort the list of books (line 44). Thanks to the call to `useEffect`, it will be called whenever the `sortKey` variable is updated.

### Other components

The other parts of the BookList component include:
* An `AppBar` component that displays a title (line 47).
* An `IconButton` component for closing the view (line 54).
* A `BooksTable` component that builds the element tree for the list of books (line 62).
## Second view component

We can locate the second module, `bookListTable.py`, in the `bookapp/client/src/views/bookList/` folder.

This module contains two components: 

1. The main `BooksTable` component, which includes the table header (line 39).

2. The `BookRowVu` component, which represents the view for one row in the table (line 7).

### The `BooksTable` component

The `BooksTable` component expects two props to be passed in:

1. It takes the list of books to display (line 40).
2. It takes a function for setting the `sortKey` state variable in the main view component (line 41).

At line 64, this component uses the Material UI `Table` component.
At line 65, it starts with the static `TableHeader` section, and then at line 75 and 76, it dynamically adds `Rows` to the `TableBody`. It also has the inner function component `BookRows`, which will iterate through the list of book records and generate a `BookRowVu` for each book in the list at line 48. However, if the list is empty, it will return a placeholder `Row` to maintain the structure of the UI if there are no records to display at line 50.

Since we want the header column to be clickable to sort the table, at line 52 we have an inner `HeaderSort` component that incorporates the function that updates the `sortKey` state variable using the function that was passed in as a prop.

At line 59, each header is contained in a `TableCell` component. This component uses closure to include a function that has the sort value embedded in the function itself that is unique for each column header.

### The `BookRowVu` component

That leads us to the second component in the module, the `BookRowVu` component.  When the `BooksTable` component iterates through the list of books via `BookRows`, it adds a new `BookRowVu` component for every book record, passing in a single book record as a prop.  The `BookRowVu` component assembles a list of `TableCells` based on the fields in a single book record, and returns a single `TableRow`.

At line 12, we turn the book’s `IsFiction` boolean value into a corresponding string by using a Python ternary statement that actually displays a word instead of just the stored numeric representation of the value.


At line 20, for demonstration purposes, in the code for the title `TableCell`, we change the attributes of the `Box` component so that it will cut off any excess text of a long string and show an ellipsis at the end. We achieve this behavior by using a combination of the standard CSS attributes `textOverflow`, `overflow`, and `whiteSpace`.  

Then, at line 19, the `Box` component is wrapped in a `Tooltip` component. This will display the full string when the mouse hovers over it.


Explore more about designing the book view that includes column-wise sorting of books.

Introduction

Environment Setup

Landing Page

Modal View

REST Service

Books

Menus

User Login

Lookups

User Context

Editing Lookups

Filtering Data

Editing Books

SPA Redirect

Deploying the Application

Conclusion

Books List