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

## Improving our application 

We’ll build upon what we have been working on in the last few chapters and add the features of an HTML form element to our `app.py` file.

To convert our little application into a more conventional HTML form, we have to modify a few lines of code to get the desired results. While the UI hasn’t visibly changed, the behavior reflects the use of the form element.


## Using `form` instead of `div`

Most of the changes here are in the type of elements we are returning from our React component. Instead of wrapping everything in a plain `div` element, we change this to a `form`, passing in a prop containing the `onSubmit` event value set to call our `handleSubmit()` function.

From using `div`:
```py
el('div', None,
```
Now at **line 27**:
```py
el('form',  {'onSubmit': handleSubmit},
```
We don’t need our “Submit” button anymore because our form will now dictate what action gets taken on submit. However, we do provide an input element that has a prop passed to it that sets `type=submit`. This ends up getting rendered as a button that has the built-in action of causing the form to be submitted.

From using a `button`:
```py
el('button', {'onClick': handleSubmit}, "Submit"),
```
Now at **line 34**:
```py
el('input',  {'type':  'submit'}),
```
## Prevent default request

Normally when an HTML form gets submitted, it makes a request back to the web server, which returns a response to the web browser, which re-renders the entire page with a possibly updated URL. To get around this behavior, we add a statement to our `handleSubmit()` function in **line 9** that tells the web browser to not do what it normally does by default:



# Improving our application 

We’ll build upon what we have been working on in the last few chapters and add the features of an HTML form element to our `app.py` file.

To convert our little application into a more conventional HTML form, we have to modify a few lines of code to get the desired results. While the UI hasn’t visibly changed, the behavior reflects the use of the form element.


# Using `form` instead of `div`

Most of the changes here are in the type of elements we are returning from our React component. Instead of wrapping everything in a plain `div` element, we change this to a `form`, passing in a prop containing the `onSubmit` event value set to call our `handleSubmit()` function.

From using `div`:
```py
el('div', None,
```
Now at **line 27**:
```py
el('form',  {'onSubmit': handleSubmit},
```
We don’t need our “Submit” button anymore because our form will now dictate what action gets taken on submit. However, we do provide an input element that has a prop passed to it that sets `type=submit`. This ends up getting rendered as a button that has the built-in action of causing the form to be submitted.

From using a `button`:
```py
el('button', {'onClick': handleSubmit}, "Submit"),
```
Now at **line 34**:
```py
el('input',  {'type':  'submit'}),
```
# Prevent default request

Normally when an HTML form gets submitted, it makes a request back to the web server, which returns a response to the web browser, which re-renders the entire page with a possibly updated URL. To get around this behavior, we add a statement to our `handleSubmit()` function in **line 9** that tells the web browser to not do what it normally does by default:



Introducing and using HTML forms rather than HTML input.

Form Action

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

Form Action

Improving our application

Using `form` instead of `div`

Form Action

Improving our application

Using form instead of div

Using `form` instead of `div`