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)** The Material-UI library provides CSS classes that we use in the `className` attribute of our elements.

(True or False) The Material-UI library provides CSS classes that we use in the <code>className</code> attribute of our elements.

Which option does not get specified as part of a Material-UI theme?


Which option does not get specified as part of a Material-UI theme?

Which Material-UI feature can be used to set default style attributes for elements?


Which Material-UI feature can be used to set default style attributes for elements?

```py
def SmallButton(props):
    _props = dict(props)
    _props.update({'size': 'small'})
    return el(Button, _props)
```

```py
SmallButton = styled(Button)({'size': 'small'})
```

```py
useStyle = makeStyles({'root': {'size': 'small'}})
classes = useStyle()
el(Button, {'className': classes.root})
```

```py
el(Button, {'style':{'size': 'small'}})
```

Which of the following code snippets is a valid way to set default properties for Material-UI components?


Which of the following code snippets is a valid way to set default properties for Material-UI components?

To use a Material-UI theme, we must use which of the following elements at the top of the React component tree?

To use a Material-UI theme, we must use which of the following elements at the top of the React component tree?

`classes = useStyle({'my_color': 'red'})`

`classes = ThemeProvider({'my_color': 'red'})`

`classes = makeStyles({'my_color': 'red'})`

What function needs to be run in order to utilize the following style class?
```py
useStyle = makeStyles({
    'root': {
        'margin': '1rem',
        'color': lambda props: props['my_color']
    }
})
```

What function needs to be run in order to utilize the following style class?
<pre><code class="language-py">useStyle = makeStyles({
 'root': {
 'margin': '1rem',
 'color': lambda props: props['my_color']
 }
})
</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 Material-UI