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

In this application, we'll look at how we can also apply a filter on a lookup table data as well, so that it is able to fetch relevant data from any selected table.

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 a filter on a lookup table

In addition to using the filter parameters that the application collects in the `BookFilterVu` component, it also needs to get the lookup table data. With that, it can populate any select lists that it may have. Let's look at this capability in the existing `bookListView.py` module located inside `bookapp/client/src/views/bookList/`.

At line 15, we have a new state variable `filterParams` to hold the filter criteria in the form of a Python dictionary.  

From lines 17-20, we also have state variables for each of the lookup tables: 
* `categories`
* `publishers`
*  `formats`
* `conditions`.

The lookup table data gets loaded at line 76 after the `BookList` component loads by using a `useEffect()` hook function with an empty list as the watch criteria.  This calls the `getLookups()` function, which then in line 67 calls `getLookup()` for each of the lookup tables it needs to load. 

The `getLookup()` function works just like the `getItems()` function that we have for loading the `LookupView` component.  

Technically, we could reuse this version in both places, but we'll go with both and keep the components more modular for this application.

As indicated by line 77, we send the `filterParams` dictionary state variable as a parameter to the `fetch()` function call to apply the filter criteria.  The `fetch()` function will further take care of turning the dictionary into a properly formatted and URL encoded query string for us.

From there, the Flask REST service takes care of retrieving the matching book records. 

**Note:** While the "Category", "Genre," and "ISBN" fields filter exact matches, the "Title" and "Author" filters will do partial matches because of how the Flask REST route is designed.

Learn how we can apply filters on the lookup table 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

Lookup Data

About the application