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

We'll look at some modifications in our main `app.py` module. This module is required to only render certain UI components when the route is valid. In case of any invalid route, the application will not get rendered and will show the user an error message along with a link that will redirect the user to the landing page.

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

# Final modifications in the `app` module

Now that we can update the URL, let's see how we can factor that into our application routing mechanism. Instead of using state variables to track what view component needs to appear, the application can now use the URL in the web browser to route views. Let's watch that change in routing functionality in our main `app.py` module located inside the `bookapp/client/src/` folder.

Instead of using the `booksShow` state variable to indicate whether the `LandingPage` or `BookList` view component should be shown, at line 20, we now have the `pathname` prop that is based on the web browser URL to determine the view.  Because the user can manually manipulate the URL, the application will require some data validation to make sure the URL is something we are expecting.

## Route validation

At line 31, the `route_is_valid` local variable is based on whether the URL passed in is a valid route in our `router` dictionary, which is done with a simple dictionary key check.  When validating the user session, calling the REST service to check the login status is avoided if the requested view route is not valid. At line 39, when logging out, the application also sets the web browser URL to the default route using the `spaRedirect()` function, which will take the user back to the `landingPage` view when the logout is complete.

Starting from line 68, if the URL route is valid, the application will get rendered as before, except that instead of passing the `booksShow` state variable set function, it will now just forward the `props` passed into the `App` component. This way, the rendered view can utilize any URL `querystring` parameters that may exist.  

## Error message once invalidated

Starting from line 78, if the route is not valid, the application will render a raw HTML error page indicating the bad URL and provide a link to get back to the default `landingPage` view.

At line 66, one last extra thing we have to do is to add another call to Google Analytics that logs a page view any time the URL application is processing changes.  This is accomplished with the `useEffect()` hook function that monitors the `pathname` prop.

Learn how to modify the application in a way that it should only render the view if the provided route is valid.

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

Page Routing

About the application