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’ll mainly be focusing on a `react-modal` JavaScript library, which creates a window over the active application to display information. We’ll also look at a reusable `modalStyles` modal component that contains basic style information.

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

# react-modal library as an advantage

In web applications, it is preferred to use a pop-up window over the active application to display some information. In doing so, the main application underneath gets grayed out and disabled until the pop-up window is closed. Doing this manually can take a lot of effort. To make things easy on ourselves in making a modal view, we can take advantage of another JavaScript library called `react-modal`, which has a modal component for React. This lets us easily display a modal window on top of our main application whenever it is required. 

---
## Install react-modal

If it isn’t already installed, we can install it using `npm`:
```txt
npm install react-modal
```
---

Then, at line 11, we can see the JavaScript-to-Python mapping in our `pyreact.p`y module to give us access to it from our Python modules inside the `bookapp/client/src/common/` folder.

Since this JavaScript library has a default export for the `Modal` object, we didn’t need to do anything special with the `require()` function to bring it into the Python namespace.

# The modal component

The application will be reusing the modal component in a few places, so we have the basic style information for the `Modal` component in our `appTheme.py` module inside the `bookapp/client/src/main/` folder.

At line 76, we also have a `modalStyles` variable as a normal Python dictionary that we can import into other modules later on. We can see the modalStyles dictionary statement at the end of the `appTheme.py` module.

At line 78, the `content` style attribute of the `Modal` component mostly controls the positioning of the modal window when it opens.
Starting from line 77, the `overlay` attribute is there to ensure that the modal window always opens on top of any other content.

Discover what you can do with the react-modal component.


Modality

Discover what you can do with the react-modal component.

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

Modality

About the application