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

# Introduction to the view routing mechanism

Now that we have both the landing page and book list as independent components, we still have to determine which one to show at any given time.  
We’ll continue looking into the `app.py` module.

Since the value of the `booksShow` state variable determines whether we should show the `LandingPage` component or the `BookList` component, we can use that to assign a pseudo URL path that will be further used for view routing that gives us a bit of context to a given route. With that, we can route views in Flask based on the URL.

Next, let's look into a Python dictionary that uses these routes as keys and the React component that we want to show as the value. We can create a kind of **switch statement view routing mechanism** that is extensible, allowing us to add additional view component options later.  So, to show the desired view, we can use the pseudo URL path as a key to look up the appropriate view component in the router dictionary.

As the `App` component is effectively the entry point and container of our entire client application, it keeps the outer theme-component in place regardless of which view to show since that is utilized application-wide. With all that refactoring, we now have a UI with a menu navigation option and componentized views.

Learn more about the View routing mechanism.

View Routing

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 Routing

Introduction to the view routing mechanism