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

# Anonymous functions

Using anonymous inline functions in JavaScript React applications is a very common practice. In Python, the Python Enhancement Proposal (PEP) 8 style guide suggests using anonymous functions or lambdas sparingly, and there are more limitations to Python lambdas compared to JavaScript’s anonymous functions. The main restriction is that Python lambdas can only be a single-line statement. Contrarily, JavaScript anonymous functions can be many lines of code. In this case, the only option is to break out the function and create a named Python function to replace it. If the anonymous function is one line, then substituting it with a Python lambda is certainly an option. For example, take this `onClick` event property that uses an anonymous function to freeze the task parameter into the function call:

```js
onClick={() => this.handleEdit(task)}
```

This can be directly converted to Python by using a lambda function:

```py
'onClick': lambda: handleEdit(task)
```

If the anonymous JavaScript function is too complex for a one-line Python lambda, just create a named Python function, and use that function name in place of where the anonymous function used to be. Generally, it is good practice because it usually makes the code easier to read.

# Mapping functions

Like anonymous functions, the JavaScript `map()` function is also regularly used in JavaScript React applications. It takes an iterable like a JavaScript array and applies each element in the array to a supplied function. Python also has a `map()` function, and while that certainly can be used, the Python preference is to use a list comprehension instead. 

In our JavaScript example, a `map()` function is used to generate the list of task items:

```js
{this.state.taskList.map(this.renderTask)}
```

If we were to use the Python `map()` function, we would turn it into this:
```py
map(lambda task: el(ListItem, {'key': task['name'], 'task': task}), taskList)
```
# Using list comprehension

However, it is considered more Pythonic to use a list comprehension, so let’s use one of those. If you are not familiar with or are uncomfortable with list comprehensions, it is a Python construct worth learning about. It’s basically a one-line for loop that creates a new list based on a function.

With list comprehensions, sometimes it’s hard to remember which pieces go where, so one method is to start with the for loop:


```py
for task in taskList:
```

Then, based on the loop variable (`task`), figure out what the expression should be to create an item in the new list. In this case, we are creating a list of `ListItem` components:
```py
el(ListItem, {'key': task['name'], 'task': task})
```
Finally, since the list comprehension is creating a new list, we wrap those two things together in square brackets to represent the list:
```py
[el(ListItem, {'key': task['name'], 'task': task}) for task in taskList]
```
We can also filter the items that are included in the final list by using an if clause after the for clause.


Study anonymous functions and mapping functions.

Functions

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

Functions

Anonymous functions