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 can see few changes in our app.py. There is a state variable, booksShow, that tells our application when to show the list of books. We apply a ternary statement in a component tree to reflect the change in the UI.

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

# What changed in our `App` component?

After we add another view, we need to think about how we’ll switch between them. In this case, we only have the landing page and the new book list that we are looking into. To put it simply, we generally want to show the landing page unless the book list view is being shown. This is essentially the same behavior our modal view used with the `isOpen` prop of the `Modal` component.


So let's look into `booksShow` prop for our landing page in `app.py`.

This is the same landing page we previously saw in the main App component. The main difference is that now, at line 18, we have a new state variable, `booksShow`, to keep track of the `BookList` component and whether it should be shown or not. 

At lines #52 and #54, we can find the `booksShow` state variable in ternary statements at the end of the element tree code to determine if the landing page element tree should be used, or if it should show the `BookList` component instead.
 
At line 7 of the module, we have the `BookList` component itself imported. At line 9, the Google Analytics feature is initialized, which enables us to make a call to the back-end REST API whenever required. The account ID for Google Analytics is imported from the `appData.py` module that is located inside `bookapp/client/src/main/`.
 
To test if it’s working, we can again start the development proxy server with:
```txt 
npm run dev
```
Then, as long as the Flask application is already running on port `8000`, we can fetch the desired data using the predefined routes of our back-end Flask Service.

By using the proxy server to serve up our application, we are able to both open the front-end client and allow the application to fetch any needed data from the back-end Flask server.

Our web application is already set up above. It is highly recommended to run the application once to ensure that all the features we have seen up to this point are fully functional.

Switch between multiple views for the user.

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

View Control

About the application

What changed in our `App` component?

View Control

About the application

What changed in our App component?

What changed in our `App` component?