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

**(True or False)** In a list of repeating React components, each component in the list should have a unique key property added to it.

(True or False) In a list of repeating React components, each component in the list should have a unique key property added to it.

**(True or False)** Functions that return a React component must use the PascalCase naming convention.

(True or False) Functions that return a React component must use the PascalCase naming convention.

**(True or False)** Since Python lists are mutable, when used as a state variable they must be copied
before updating them.

(True or False) Since Python lists are mutable, when used as a state variable they must be copied
before updating them.

```py
React.createElement('ol', None,
    React.createElement('li', {'key': 1}, "Item 1")
    React.createElement('li', {'key': 2}, "Item 2")
    React.createElement('li', {'key': 3}, "Item 3")
)
```

```py
React.createElement('ol', {'key': True},
    React.createElement('li', None, "Item 1")
    React.createElement('li', None, "Item 2")
    React.createElement('li', None, "Item 3")
)
```

```py
React.createElement('ol', None,
    React.createElement('li', {'key': True}, "Item 1")
    React.createElement('li', {'key': True}, "Item 2")
    React.createElement('li', {'key': True}, "Item 3")
)
```

```py
React.createElement('ol', {'key': [1, 2, 3]},
    React.createElement('li', None, "Item 1")
    React.createElement('li', None, "Item 2")
    React.createElement('li', None, "Item 3")
)
```

What is the correct way to add a key attribute to repeating elements?

What is the correct way to add a key attribute to repeating elements?

`React.createElement('ol', None, MyItems())`

Which call to `createElement()` is appropriate for using the following React component?

```py
def MyItems():
    items = []
    for item in myList:
        element = el('li', {'key': item}, item)
        items.append(element)

    return items
```

Which call to <code>createElement()</code> is appropriate for using the following React component?
<pre><code class="language-py">def MyItems():
 items = []
 for item in myList:
 element = el('li', {'key': item}, item)
 items.append(element)

 return items
</code></pre>

Quiz: Lists

Quiz: Lists

Let’s test our knowledge on lists with the quiz below.

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

Quiz on Lists