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 some functions that are mainly handling session management by validating and invalidating user sessions. Our fetch function pings the desired routes and sets or unsets a user based on the response.

This is what the application looks like this:

> **Note:** To log in, use the username `admin` and the 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

# Session management with user state variable

Let's look at the `App` component, where the application handles the actual calls to the REST API to facilitate logging in.

Next, we'll now look at some of the modifications in the `app.py` module.

At  line 18, we have a state variable called `user` to store the logged-in user's name.  If there is no current login session, the `user` state variable is set to an empty string.

After that, we have three simple helper functions.  
* The `isLoggedIn()` function is a boolean function that indicates if there is a stored user name or not (line 31).

* The `login()` function is an alias for the `setUser()` state function (line 33).

* The `logout()` function resets the user state variable back to an empty string and calls the back-end server to invalidate the session (line 36).

# Session validation

At line 57, when the application loads, we call our `validateSession()` function via a React `useEffect()` hook function.  Since this function takes an empty watch list as a parameter, it will be called just once, right after the `App` component is loaded.

---
## Validating with API routes

When the application loads for the first time or the user reloads the application, we don't want the user to re-login if they already have a valid session established with the back-end server. 

At line 40, the `validateSession()` function will send a small request to the back-end server.  

* At line 55, if the response is an HTTP `401 Unauthorized`code, then we know there is no currently established session because of the way the Flask `/api/ping` route is set up in our REST server.

* At line 46, we have a valid session if the response is an HTTP `200 OK` code.  Next, it will send another request using the `/api/whoami` route to obtain the username tied to the current session.  Once it receives that back, it will take that information and set the `user` state variable in the `App` component.

---

# Additional `App` component features

Finally, we will look into the return value of the `App` component. In lines 62–64, in addition to passing the `isLoggedIn()`, `login()`, and `logout()` functions as props down the component tree, it also injects the functionality of the snackbar feature into the component tree by nesting the `SnackbarProvider` component. This works in the same way as our `ThemeProvider` does at line 59. It will allow us to access the functionality in any component further down the tree.

At line 60, the `maxSnack` property we pass into the `SnackbarProvider` component indicates the maximum number of stacked snackbars to show at any time. In this case, it’s three.

Learn how to validate or invalidate a user session.

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

Session User

About the application