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)** Python lambda expressions can be used to “freeze” values in a function call when the function is being used as a property value in a React element.

(True or False) Python lambda expressions can be used to “freeze” values in a function call when the function is being used as a property value in a React element.

  **(True or False)** It is acceptable for a React component function to return a value of `None`.

(True or False) It is acceptable for a React component function to return a value of <code>None</code>.

What is the act of breaking up large React components into smaller, more manageable components?


What is the act of breaking up large React components into smaller, more manageable components?

**(True or False)** Unlike state variables, React component property variables can be updated directly by value assignment.

(True or False) Unlike state variables, React component property variables can be updated directly by value assignment.

`if len(my_items) > 0 "Has Items" else "Is Empty"`

`len(my_items) > 0 ? "Has Items":"Is Empty"`

`"Has Items" if len(my_items) > 0 else "Is Empty"`

Python doesn’t support ternary expressions

Which one of the following expressions represents a Python ternary statement?


Which one of the following expressions represents a Python ternary statement?

As a prop for the `li` element in the `Item` component

As a prop for the `Item` element in the `Items` component

As a prop for the `Items` element in the `App` component

As a prop for the `ol` element in the `App` component

Given the following code, where does a key attribute need to be added?

```py
from pyreact import render, createElement as el
    
def Item(props):
    return el('li', None, props['item'])
def Items(props):
    return [el(Item, {'item': item, 'key': item}) for item in props['items']]
def App():
    items = ['first', 'second', 'third', 'fourth', 'fifth']

    return el('ol', None,
           el(Items, {'items': items})
    )

render(App, None, 'root')
```

Given the following code, where does a key attribute need to be added?
<pre><code class="language-py">from pyreact import render, createElement as el
 
def Item(props):
 return el('li', None, props['item'])
def Items(props):
 return [el(Item, {'item': item, 'key': item}) for item in props['items']]
def App():
 items = ['first', 'second', 'third', 'fourth', 'fifth']

 return el('ol', None,
 el(Items, {'items': items})
 )

render(App, None, 'root')
</code></pre>

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 React Components