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

In our book list view again, let's look at a mechanism to filter the records that are returned from the REST API.  Instead of only being able to show the full list of books, our application will also have the ability to selectively query the database to only display books that meet the search criteria.

# About the application

In this application, we'll look at how we can apply a filter when displaying book records. We want to filter out the books so that only relevant books, related to a chosen field, appear in the book list. For that, we have a `BooksFilterVu` component that provides our application with certain fields to filter out the relevant books.

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

# Applying filtration on the `BookList` component

At lines 96 and 97, there is a new component `BooksFilterVu` inside `BookListView.py` module's component tree that we can find in the `bookapp/client/src/views/bookList/` folder, which will add a section of `TextField` components to enter filter criteria into.

Let's start with the `bookListFilter.py` module, which will also go with the other `bookList` view modules in the `bookapp/client/src/views/bookList/` folder.


# The `BooksFilterVu` component

The `BooksFilterVu` component takes two parameters: 

* At line 21, we have a list of `categories` from the lookup table to fill the "Category" select list filter.

* At line 22, we have a `setFilterParams()` function to set the filter criteria.

We have five different criteria that we'll be able to filter on, and we also have a state variable for each one of the following:
* Title
* Author
* Genre (also known as the `IsFiction` field)
* Category
* ISBN

---
## A new type of `setState()` function

Starting from line 30,  we have a single `setState()` function to set the state for five variables. It does a dictionary lookup based on the field name to determine the appropriate field-specific state variable update function to use. 

At line 37, it then passes the new value to that particular update function.  For example, if the field name is "Category" and the value is "History," `switch["Category"]` would evaluate to `setCategory` based on the `switch` dictionary, and it would ultimately get called as  `setCategory("History")`.  This is one way to efficiently emulate in Python. This would normally be a switch or select statement in other programming languages.

---

## About the component tree

Starting from line 60, the returned element tree of this component consists of five `TextField` components and a `Button` component. Each of the `TextField` components has the `handleInputChange()` function tied to its `onChange` event to keep the state variables synchronized with what is shown in the UI.

Two of the `TextField` components are set up as select boxes:
 
* The "Genre" `TextField` uses a static `option` list (line 74).
* The "Category" `TextField` uses the `CategoriesList` component where we have the `categories` prop that has the list of categories on through to that component to generate the list of `option` elements (line 86).

Starting from line 7, the `CategoriesList` component at the top of the module simply takes the list of `categories` that passes into it in line 8 and returns a list of HTML `option` elements, one for each category at line 17.

At line 108, the `Button` component `onClick` event triggers the `handleFilter()` function that converts the five state variables to a Python dictionary at line 47.

At line 53, it then filters that dictionary to include only non-empty values using a Python dictionary comprehension.  

Lastly, at line 54, it calls the `setFilterParams()` function with the result of that filtered dictionary to set the `fiterParams` state in the `BookList` parent component.

Learn how we can apply filters on a set of book records.

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

Filter Form