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

# Application entry point

In this application, we have our `index.html` page, in which we can see a `meta` tag wrapped inside `head`  tag along with the `link` tag that holds the link for the `favicon.ico` file. Next, we have a `title` tag and a `div` with a `root` id wrapped up inside the `body` tag.


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

# Explanation

We have an `index.html` file that acts as the application entry point, which we’ll be hooking into with React. So, this will go into the `bookapp/client/src/` folder:

Let’s have a look at few extras that are added in this version of `index.html`:
* Line 5 and 6:  We configure the display area for different devices using a  meta tag.
* Line 9: The link for a custom favicon.ico file.
* Line 18: A few defaults like title and a temporary message that is displayed while our React application is loading the component tree. 
* Line 22: The temporary message (“Loading…”) in the inner HTML part of the root `div` will get replaced with the HTML elements generated by React once it finishes loading components.
Transcrypt can recognize and parse direct calls to JavaScript functions in our Python code without requiring us to define them.  However, Python linters, like what we might find in most IDEs, aren’t so accommodating and will generate warnings about unknown identifiers. To get around this, we can define some stub classes and functions so that the Python linter will be happy, but then we’ll use a Transcrypt compiler directive to tell Transcrypt to ignore those stubs during the compilation process.

Since the modules only use these JavaScript stub identifiers in the `bookapp/client/src/common/` folder, it makes sense to define these stubs right in the `__init__.py` file to identify the `bookapp/client/src/common/` folder as a Python package.

This stubs out all of the built-in JavaScript functions that we’ll be calling from other modules in the `bookapp/client/src/common/` folder. They don’t have to actually do anything, which is why they are all set equal to `None`, but are used to fill in Python namespace gaps. Then, we have the `skip/noskip` Transcrypt compiler directives at the beginning and end of the module to ignore this block of code at compile time.

## The pyreact module

Next, let’s take a look at our `pyreact.py` module that has all of our React specific JavaScript to Python mappings in it. This module will go into the `bookapp/client/src/common/` folder.

Following are the few additions we have made to this code:
* Line 18: There is a `React.Fragment` component that we use to return multiple elements from a component instead of just one, without adding unnecessary extra nodes to the DOM.
* Line 1 and 3: We add an import for a few Python stubs at the top to quiet the Python linter about the JavaScript functions being called here. Since the `skip/noskip` compiler directives are put in, Transcrypt will ignore these imports when it does its transpiling.
## The jsutils module

While we are in the `bookapp/client/src/common/` folder, notice we also have our `jsutils.py` module that maps miscellaneous JavaScript utilities.
In our `index.html` file, we have the page using a custom favicon so we’ll need something for it to use. 

We download the Python icon into bookapp/client/src/static/ folder, as a placeholder, and rename it to `favicon.ico` using the following command. This will also create the `src/static/` folder for us:```txt
wget -P ./src/static/ https://www.python.org/static/favicon.ico

### The main app module

Lastly, we just need a basic React application to test our setup. We’ll look at a slightly modified version of our first React application, just with updates to the import paths. Add this app.py file to the `bookapp/client/src/` folder.

We can see that since we have the `__init__.py` file in our `bookapp/client/src/common/` folder, it treats it as a Python package, and we can refer to the modules in that folder with dot notation to import them as indicated by line 1 and 2 of the app.py file in the `bookapp/client/src/` folder.

IIf we press “Run” in the widget above, it starts the application by issuing the following command: ```npm start```.
 This will build the application, and start up the Parcel development web server. When it finishes, we should be able to open it in our web browser.


Running Our First Application

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

Running Our First Application

Application entry point