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 lesson, we’ll add the table lookup functionality to the landing page. First, we  call the final `LookupTable` component at the bottom of the component tree wrapped inside our main `Container` component.

This is what the application looks like:

> **Note:** To login 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 for the `lookupTable` component in `LandingPage`

Now that we have a way of displaying the lookup table data, let's see how we can control its visibility. We can find several modifications in our existing `landingPageView.py` module inside the `bookapp/client/src/views/landingPage/` folder to access the functionality of the new `lookupTable` components.

Below are the modifications:

* At line 10, we have an import for the new LookupTable component.

* At line 21, we have a lookupModal as a state variable to control when the modal view should appear. We also have a setLookupModal function to set our state variable value.

* Lastly, at line 113, we can see an attachment point for the `LookupTable` component and can make the rendering conditional on the value of the `lookupModal` state variable.

We will also look at some modifications inside the `landingPageMenu.py` module—which itself is located inside the `bookapp/client/src/views/landingPage/` folder—to update the action of the menu item that opens the `lookupTable` view.

At line 9, there is a new `setLookupModal` prop that we will use to open and close the `lookupTable` view.

In the `handleLookup()` function, at line 23, we have a call to the `setLookupModal()` function that will activate the `lookupTable` view.

One minor change in the menu items for the lookup tables is that we have a list of dictionaries for our lookup table information instead of a simple list of names. So, as indicated by line 58, we have the dictionary key `table['name']` that holds the name of each table when the application generates each `MenuItem` component for the lookup tables.

When we select a lookup table from the menu, a modal form will be displayed showing the existing records from the selected table.

Learn how to control the visibility of the application's menu.

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

Menu Control

About the application

Modifications for the `lookupTable`

Menu Control

About the application

Modifications for the lookupTable

Modifications for the `lookupTable`