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
We can use inline CSS to apply style attributes to our React elements. Let’s remove the stylesheet reference in the HTML file, then move the CSS styles into our application and add them directly to the elements as a `style` prop.

from pyreact import useState, render, createElement as el

def App():
    newItem, setNewItem = useState("")
    editItem, setEditItem = useState("")
    listItems, setListItems = useState([])

    def handleSubmit(event):
        event.preventDefault()
        new_list = list(listItems)  # Make a copy
        if len(newItem) < 1: # Filter out empty strings
            return
        if len(editItem) > 0:  # In edit mode
            new_list[new_list.index(editItem)] = newItem
        else:  # In add mode
            new_list.append(newItem)  # Add the new item
        setListItems(new_list)  # Update our state
        setNewItem("")  # Clear the new item value
        setEditItem("")  # Clear the edit item value

    def handleChange(event):
        target = event['target']
        setNewItem(target['value'])

    def handleDelete(item):
        new_list = list(listItems)  # Make a copy
        new_list.remove(item)  # Remove the specified item
        setListItems(new_list)  # Update our state

    def handleEdit(item):
        setNewItem(item)  # Set the new item value
        setEditItem(item)  # Set the edit item value

    def ListItem(props):
        return el('li', None,
                  el('button', {
                     'type': 'button',
                     'onClick': lambda: handleDelete(props['item']),
                     'style': {'color': 'darkred',
                               'marginRight': '5px',
                               'width': '60px'
                               }
                     }, "Delete"
                    ),
                  el('button', {
                     'type': 'button',
                     'onClick': lambda: handleEdit(props['item']),
                     'style': {'color': 'blue',
                               'marginRight': '5px',
                               'width': '60px'
                               }
                     }, "Edit"
                    ),
                  props['item'],
                 )

    def ListItems():
        return [el(ListItem, {'key': item, 'item': item}) for item in listItems]

    if len(editItem) == 0:
        editStyle = {'color': 'darkgreen'}
    else:
        editStyle = {'color': 'blue'}

    return el('form', {'onSubmit': handleSubmit,
                       'style': {'fontFamily': 'Arial, sans-serif'}
                      },
              el('label',
                 {'htmlFor': 'editBox', 'style': editStyle},
                 "Add Item: " if len(editItem) == 0 else "Edit Item: "
                ),
              el('input', {'id': 'editBox',
                           'onChange': handleChange,
                           'value': newItem
                          }
                ),
              el('input', {'type': 'submit',
                           'style': {'margin': '10px',
                                     'color': 'darkgreen',
                                     'width': '60px'
                                    }
                          }
                ),
              el('ol', None,
                 el(ListItems, None)
                ),
             )

render(App, None, 'root')



<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="app.py"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>



# Load React and ReactDOM JavaScript libraries into local namespace
React = require('react')
ReactDOM = require('react-dom')

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


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

    document.addEventListener('DOMContentLoaded', main)


# JavaScript function mappings
alert = window.alert


def setTitle(title):
    document.title = title



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

# Changes made
The basic change we made here was to trade the `className` prop that referenced a style in an external stylesheet, for a `style` prop with all of the style attributes provided directly. When doing this, we provide a dictionary as the value for the `style` prop that has the style attributes that we wish to assign to the element. One thing to note is that React needs the attribute names to be modified if they contain a dash. If they do, they should be converted to `camelCase` format, removing the dash from the name. So in this case, `font-family` becomes `fontFamily` and `margin-right` becomes `marginRight`.

Another thing we did, was to move the style logic for the input label text color to an external variable. Moving the logic outside of the element rendering can help to declutter our code and make it easier to visualize the structure of the element tree that we are building. In general, if the inline CSS you are applying to an element gets to be too unwieldy or we need to apply the same CSS to multiple elements, moving the style attributes to a variable can be a good way to keep our code clean.

Use inline styling rather than using a stylesheet.

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

Inline Styles

Introduction

Changes made