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

```py
el('input', {'type': 'button', 'value': "Click It", 'class':
'myButton'})
```

```py
el('input', {'type': 'button', 'value': "Click It", 'className':
'.myButton'})
```

```py
el('input', {'type': 'button', 'value': "Click It", 'className':
'myButton'})
```

```py
el('input', {'type': 'button', 'value': "Click It", 'style':
'myButton'})
`

Which `createElement()` call will result in a red button based on the following CSS?
```css
.myButton{background-color: red}
```

Which <code>createElement()</code> call will result in a red button based on the following CSS?
<pre><code class="language-css">.myButton{background-color: red}
</code></pre>

Considering the following Python code, what color will the text be when rendered in the web browser?
```py
from pyreact import render, createElement as el
def App():
    lang = "Python"
    my_style = {'color': 'red'}
    return el('div',{'style': my_style if lang != "Python" else {'color': 'blue'}})

render(App, None, 'root')

Considering the following Python code, what color will the text be when rendered in the web browser?
<pre><code class="language-py">from pyreact import render, createElement as el
def App():
 lang = &quot;Python&quot;
 my_style = {'color': 'red'}
 return el('div',{'style': my_style if lang != &quot;Python&quot; else {'color': 'blue'}})

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

If a style attribute is used as a prop for an element, what data type is used for the value?

If a style attribute is used as a prop for an element, what data type is used for the value?

```py
el(Button, {'color': 'blue'}, 'Click')
```

```py
el(Button, {'style': {'color': 'blue'}}, 'Click')
```

```py
el(button, {'style': {'color': 'blue'}}, 'Click')
```

Which call to `createElement()` will result in the following component having blue text?
```py
def Button(props):
    _props = {'style': {'color': 'red'}}
    _props.update(props)
    return el('button', _props)
```

Which call to <code>createElement()</code> will result in the following component having blue text?
<pre><code class="language-py">def Button(props):
 _props = {'style': {'color': 'red'}}
 _props.update(props)
 return el('button', _props)
</code></pre>

Which of the following is not a valid value for the `className` attribute of an element?

Which of the following is not a valid value for the <code>className</code> attribute of an element?

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 CSS