GAID

Please enter the google analytics ID for appData file.

Delve into using Transcrypt to seamlessly translate Python code to JavaScript for coherent web projects, unifying Python's back-end strengths with JavaScript's front-end flexibility.

tarball.tar.gz

ch02

ch03

ch04

ch05

ch06

ch08

ch09

ch10

ch01

ch12

ch13

ch14

ch15

ch16

ch17

ch18

ch19

ch20

ch21

ch24

ch10-2

ch06-exercise

ch12-jsx

ch19-2

ch25-copy

Python is already used in the back-end of most web-based applications. However, it does not work with the front-end of web browsers in those applications. This is where Transcrypt comes in. Transcrypt can help create more coherent web-based projects where Python is used to write the back-end and front-end. This course is primarily about using a transpiler called Transcrypt. It translates our Python code to JavaScript and then executes that JavaScript, letting us enjoy the neatness of Python with the front-end flexibility of JavaScript.

Using the Python Transcrypt Transpiler for Front-end Coding

## Introduction
So now that we have the React and ReactDOM libraries installed locally, we can modify our `react_hello2` files to utilize them. Then, as a housekeeping step, we can programmatically remove the global references for those libraries that are created when importing them from the HTML file by doing the following.


Run the widget below to run the server. The highlighted lines are modified.


from pyreact3 import useState, render, createElement as el

def App():
    val, setVal = useState("")

    def say_hello():
        setVal("Hello React!")

    def clear_it():
        setVal("")

    return [
        el('button', {'onClick': say_hello}, "Click Me!"),
        el('button', {'onClick': clear_it}, "Clear"),
        el('div', None, val)
    ]

render(App, None, 'root')



<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="./node_modules/react/umd/react.production.min.js"></script>
    <script src="./node_modules/react-dom/umd/react-dom.production.min.js">
    </script>
    <script type="module" src="__target__/react_hello3.js"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>



# __pragma__('skip')
# These are here to quiet the Python linter and are ignored by Transcrypt
window = None
document = None
# __pragma__('noskip')

# Create local references to the React and ReactDOM JavaScript libraries
React = window.React
ReactDOM = window.ReactDOM

# Remove the React and ReactDOM JavaScript libraries from the global namespace
# __pragma__('js', 'delete window.React;')
# __pragma__('js', 'delete window.ReactDOM;')

# Map React javaScript objects to Python identifiers
createElement = React.createElement
useState = React.useState


def render(root_component, props, container):
    """Loads main react component into DOM"""

    def main():
        ReactDOM.render(
            React.createElement(root_component, props),
            document.getElementById(container)
        )

    document.addEventListener('DOMContentLoaded', main)



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 did we change?
While there were only a few subtle changes to the `pyreact3.py` module, we now have more control over where the libraries are loaded. We no longer unnecessarily pollute the global namespace.

We use the `__pragma__('skip')` and `__pragma__('noskip')` compiler directives to break down this code at the top of the file and to tell Transcrypt to ignore the lines in between that contain some stub variables. This helps keep the Python linter from giving us errors due to unknown identifiers in the module.

After that, in **lines 8-9**, we assign the React and ReactDOM global objects to local variables that will make them explicitly available in our Python code. One of our design goals is to isolate the interface to the JavaScript libraries we will call. Our other code modules can remain as Pythonic and straightforward as possible.

The code in **lines 12-13** are Transcrypt compiler directives that allow us to directly insert unmodified JavaScript code into a generated JavaScript file. JavaScript statements that we provide to this compiler directive will get added to the transpiled JavaScript file verbatim:



# Introduction
So now that we have the React and ReactDOM libraries installed locally, we can modify our `react_hello2` files to utilize them. Then, as a housekeeping step, we can programmatically remove the global references for those libraries that are created when importing them from the HTML file by doing the following.


Run the widget below to run the server. The highlighted lines are modified.


# What did we change?
While there were only a few subtle changes to the `pyreact3.py` module, we now have more control over where the libraries are loaded. We no longer unnecessarily pollute the global namespace.

We use the `__pragma__('skip')` and `__pragma__('noskip')` compiler directives to break down this code at the top of the file and to tell Transcrypt to ignore the lines in between that contain some stub variables. This helps keep the Python linter from giving us errors due to unknown identifiers in the module.

After that, in **lines 8-9**, we assign the React and ReactDOM global objects to local variables that will make them explicitly available in our Python code. One of our design goals is to isolate the interface to the JavaScript libraries we will call. Our other code modules can remain as Pythonic and straightforward as possible.

The code in **lines 12-13** are Transcrypt compiler directives that allow us to directly insert unmodified JavaScript code into a generated JavaScript file. JavaScript statements that we provide to this compiler directive will get added to the transpiled JavaScript file verbatim:



Import local JS libraries into our Transcrypt project.

Introduction

The Setup

Write a “Hello, World” Application

JavaScript Functions

Sourcemaps

External JavaScript Libraries

Intro to React

React Concepts

Cleaner Code

Managing JavaScript Packages

Package Bundler

Text Input

Lists

Forms

React Components

JavaScript Examples

CSS

Material-UI

Parcel Web Proxy

Asynchronous Requests

React Context Hook

Transcrypt Miscellany

Application Versioning

Google Analytics

Developer Tools

Appendix

Using Local JavaScript Libraries

Introduction

What did we change?