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 will look at a state variable `aboutShow` to handle the state oof our `About` component. We have `setAboutShow` function to change our state variable's value. Then, we have `event.preventDefault()` to prevent the page from refreshing.


This is what the application looks like:

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 `About` view component

Now that we have a modal `About` view component, we’ll look at a way to open and close it. There are two things to pass into the `aboutModal` component, a `modalState` prop and an `onClose()` function.  We can see both of those items, as well as an `onClick` handler function for the `About` link, on the landing page in the  `app.py` module.

At line 11, we have a state variable `aboutShow` to handle the state of the `About` component.

Then at line 13, we have  a function that takes care of the `onClick` event of the `About` link on the landing page.

At line 14, the `event.preventDefault()` function call is there to stop the web browser URL from changing because of the `href` attribute of the `Link` component.  This is important because a change in the URL can actually cause the entire application to reload, causing the application to lose track of its current state.

At line 15, we have  `setAboutShow()` function to change the value of the `aboutShow` state variable to `True`. This causes the `App` component to re-render, sending the new value of `aboutShow` to the `About` component, which in turn causes that component to re-render and make itself visible.

## Adding the `About` component in the component tree

For the `Modal` component to be shown, it has to be added into the component tree. Here, we added it on to the end of everything else inside the `Container` component. Due to the way it renders in the DOM, it doesn’t matter too much where it is in the component tree, it just has to be there.

At lines 39 and 40, the `About` component expects two props to be passed in.  As we can see here, it will pass in the value of the `aboutShow` state variable as `modalState`.  And then, for the `onClose` function prop, it will actually send the `setAboutShow()` function with the parameter to close the modal view already filled in. It uses a Python `lambda` to wrap the function, in this case, to prevent it from getting called right away since we have the parenthesis after the function name. By doing it this way, the `About` component doesn't need to know about any of the implementation details. It just calls a function that doesn't take any parameters.

The `About` link on the landing page should be working. Clicking it should open the `About` modal view. Clicking the “X” icon in the upper right corner of the modal window should close it, just like clicking anywhere that is off the modal view itself (which triggers the `onRequestClose` event).

Our “About” page will have the following information on it:

* An image of the shelf full of books representing a library of books.
* A title that says “Library Management System.”
* A version number as indicated by the `version.py`.

# About the application

In this application, we will look at a state variable `aboutShow` to handle the state oof our `About` component. We have `setAboutShow` function to change our state variable's value. Then, we have `event.preventDefault()` to prevent the page from refreshing.


This is what the application looks like:

# The `About` view component

Now that we have a modal `About` view component, we’ll look at a way to open and close it. There are two things to pass into the `aboutModal` component, a `modalState` prop and an `onClose()` function.  We can see both of those items, as well as an `onClick` handler function for the `About` link, on the landing page in the  `app.py` module.

At line 11, we have a state variable `aboutShow` to handle the state of the `About` component.

Then at line 13, we have  a function that takes care of the `onClick` event of the `About` link on the landing page.

At line 14, the `event.preventDefault()` function call is there to stop the web browser URL from changing because of the `href` attribute of the `Link` component.  This is important because a change in the URL can actually cause the entire application to reload, causing the application to lose track of its current state.

At line 15, we have  `setAboutShow()` function to change the value of the `aboutShow` state variable to `True`. This causes the `App` component to re-render, sending the new value of `aboutShow` to the `About` component, which in turn causes that component to re-render and make itself visible.

# Adding the `About` component in the component tree

For the `Modal` component to be shown, it has to be added into the component tree. Here, we added it on to the end of everything else inside the `Container` component. Due to the way it renders in the DOM, it doesn’t matter too much where it is in the component tree, it just has to be there.

At lines 39 and 40, the `About` component expects two props to be passed in.  As we can see here, it will pass in the value of the `aboutShow` state variable as `modalState`.  And then, for the `onClose` function prop, it will actually send the `setAboutShow()` function with the parameter to close the modal view already filled in. It uses a Python `lambda` to wrap the function, in this case, to prevent it from getting called right away since we have the parenthesis after the function name. By doing it this way, the `About` component doesn't need to know about any of the implementation details. It just calls a function that doesn't take any parameters.

The `About` link on the landing page should be working. Clicking it should open the `About` modal view. Clicking the “X” icon in the upper right corner of the modal window should close it, just like clicking anywhere that is off the modal view itself (which triggers the `onRequestClose` event).

Our “About” page will have the following information on it:

* An image of the shelf full of books representing a library of books.
* A title that says “Library Management System.”
* A version number as indicated by the `version.py`.

Learn how to resolve page refresh issues for the application.

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

About Link

About the application

The `About` view component

Build a REST API in Flask

About Link

About the application

The About view component

The `About` view component