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 have the `IconButton` component to add a new book in the table that is wrapped up inside the `ToolTip` component. It will appear on the left side of the title bar to open the form with blank fields. Next, we have a `BookEdit` component that will show a row for editing with the fields already filled with the data from before.

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

# Modifications in the `bookListView` module

Now that we have a view to edit book records in, there must be a way to open that view.  To edit a book record, the user needs to single-click a row in the list of books.  This will open up the modal `BookEditView` component with the fields of the form filled in with the appropriate information based on the book row that was clicked on.

To add a new book, we'll see an icon button on the left side of the title bar that will open the modal form with all of the fields blank.  This icon button to add a new record will only be visible for a logged-in user.

Let's look at some modifications in the existing `bookListView.py` module to add this functionality. This module will go inside the `bookapp/client/src/views/bookList/` folder.

First, at lines 6 and 7, we have imports for the `BookEdit` component and the `UserCtx` context variable. 

Then, at line 19, we have the `bookModal` state variable to indicate when the `BookEdit` component should appear.

At line 27, the `isLoggedIn` value from the context variable will tell us when we should be in read-only mode.  In that case, the icon button for adding new book records will not appear as indicated by line 117.

At lines 104 and 105, the `AddIcon` appears on the left side of the title bar in front of the window title that is wrapped in a `Tooltip` component to make it clear what that button is for.  By adding an inline conditional statement to that particular `createElement()` function call, we can control the visibility of that element without introducing any additional external logic.  We have seen this method several times already for controlling modal views, but keep in mind that it works for individual nested elements too.

At line 31, we have a helper function `setEdit()`,  to set the value of the `bookModal` state variable that determines when the `BookEdit` modal component should appear.

In lines 32 and 33, if `bookModal` has an ID value assigned to it, the modal view will be visible.  Our application needs to pass this function to the `BookTable` component so that the `bookModal` state variable can be updated when a row in the table is clicked, which then causes the modal `BookEdit` component to appear for editing that particular book record.

Lastly, from line 131 onwards, we have the `BookEdit` component attached to the element tree and pass in all of the required props.

# Modifications in the `bookListTable` module

Next, let's look at the modifications to the last existing module, `bookListTable.py` where we'll look at the functionality that shows the modal `BookEdit` view whenever a row is clicked. This module will also go inside the `bookapp/client/src/views/bookList/` folder.

At line 47, We have the `setEdit()` function as a prop that is passed into this `BooksTable` component from the parent `BookList` component. We destructure that prop by creating a local variable for it and then pass it on to the `BookRowVu` component, where our application will use it.

At line 9, in the `BookRowVu` component, we have the `setEdit()` function prop and extract the ID value from the `book` dictionary at line 11. 

At line 22, we then have an `onClick` event handler to each `TableRow` that calls the encapsulated `handleEdit()` function. When that function gets called, it sets the value of the `bookModal` state variable in the `BookList` component, resulting in the modal `BookEdit` component being visible when the row is clicked, as indicated by lines 19 and 20.

Explore the unique ways to add and edit records in the book table.

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

Edit Control

About the application