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, the `bookEditForm` module holds the UI for displaying and editing all of the book fields. This module will be focusing more on the visual representation of the UI elements. 

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

## The `bookEditForm` module

This next module holds all of the edit fields that will be used for displaying and editing all of the book fields.  Because defining those text fields requires a lot of code, when combined with organizing the layout of those fields, it gets a bit long.  The good news is that a lot of that code is repetitive, and not as complex as it may first look.  All of the logic required for this component is passed in from its parent component, and this one contains only UI elements.  That said, we can go ahead and see the `bookEditForm.py` module inside `bookapp/client/src/views/bookEdit/` folder.

### More about its UI components

Most of this module consists of `Flexbox` components (essentially HTML `div` elements) for defining the layout, and `TextField` components for editing the data.  We also have a few `Divider` components (which end up as HTML `hr` elements) as well that help to better define the UI visually.  

---

**Note:** We could have broken some of these sections out into separate components to help to reduce the nesting somewhat, but we'll leave that for future optimization.

---

### The `BookEditView` component as state manager

The functionality for this modal view is mostly contained in the `BookEditView` component since that is where the state is being managed.  The downside is we have to pass all that functionality into lower-level components as props.  

At line 11, the `book` prop is a dictionary that has the current field values for the book being edited.  

Then, at line 12, the `handleInputChange()` function is used to keep those values synchronized with what is shown in the fields of the UI.

In lines 13-16, the list of items from each of the four lookup tables is also passed in as props.  While this data could have been loaded from the `BookEdit` component itself, it would have to reload that same data from the REST server each time a different book was loaded into the `BookEditView`.  By loading the lookup table data in the `BookList` component instead, we only have to make those four REST calls one time.  As long as the `BookList` stays open, we can pass that data already loaded to the `BookEdit` component as props each time a different book row is clicked.

At line 17, the `isDirty()` prop is used to determine if the "Save" button on the form should be enabled.  If no changes have been made, the "Save" button is disabled.  We also have a condition on the "Save" button that requires a book title to be entered in order to save any changes.  

At line 22, we also have the `isLoggedIn` value out of the React context variable to determine if the fields should be editable or read-only.  This also affects the "Delete" and "Save" buttons as well.

At lines 18 and 19, the `saveBook()` and `deleteBook()` functions that are passed in as props are what make the calls back to the REST server to update the back-end database.

# About the application

In this application, the `bookEditForm` module holds the UI for displaying and editing all of the book fields. This module will be focusing more on the visual representation of the UI elements. 

This is what the application looks like:
> **Note:** To log in, use the username `admin` and password `123`.


# The `bookEditForm` module

This next module holds all of the edit fields that will be used for displaying and editing all of the book fields.  Because defining those text fields requires a lot of code, when combined with organizing the layout of those fields, it gets a bit long.  The good news is that a lot of that code is repetitive, and not as complex as it may first look.  All of the logic required for this component is passed in from its parent component, and this one contains only UI elements.  That said, we can go ahead and see the `bookEditForm.py` module inside `bookapp/client/src/views/bookEdit/` folder.

## More about its UI components

Most of this module consists of `Flexbox` components (essentially HTML `div` elements) for defining the layout, and `TextField` components for editing the data.  We also have a few `Divider` components (which end up as HTML `hr` elements) as well that help to better define the UI visually.  

---

**Note:** We could have broken some of these sections out into separate components to help to reduce the nesting somewhat, but we'll leave that for future optimization.

---

## The `BookEditView` component as state manager

The functionality for this modal view is mostly contained in the `BookEditView` component since that is where the state is being managed.  The downside is we have to pass all that functionality into lower-level components as props.  

At line 11, the `book` prop is a dictionary that has the current field values for the book being edited.  

Then, at line 12, the `handleInputChange()` function is used to keep those values synchronized with what is shown in the fields of the UI.

In lines 13-16, the list of items from each of the four lookup tables is also passed in as props.  While this data could have been loaded from the `BookEdit` component itself, it would have to reload that same data from the REST server each time a different book was loaded into the `BookEditView`.  By loading the lookup table data in the `BookList` component instead, we only have to make those four REST calls one time.  As long as the `BookList` stays open, we can pass that data already loaded to the `BookEdit` component as props each time a different book row is clicked.

At line 17, the `isDirty()` prop is used to determine if the "Save" button on the form should be enabled.  If no changes have been made, the "Save" button is disabled.  We also have a condition on the "Save" button that requires a book title to be entered in order to save any changes.  

At line 22, we also have the `isLoggedIn` value out of the React context variable to determine if the fields should be editable or read-only.  This also affects the "Delete" and "Save" buttons as well.

At lines 18 and 19, the `saveBook()` and `deleteBook()` functions that are passed in as props are what make the calls back to the REST server to update the back-end database.

Explore more about the module that holds the visual representation of the UI elements.

Introduction

Environment Setup

Landing Page

Modal View

REST Service

Build a REST API in Flask

Books

Menus

User Login

Lookups

User Context

Editing Lookups

Filtering Data

Editing Books

SPA Redirect

Deploying the Application

Conclusion

Data Entry

About the application

The `bookEditForm` module

Build a REST API in Flask

Data Entry

About the application

The bookEditForm module

The `bookEditForm` module