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

# Introduction
One of the most fundamental elements used in most web applications is the text box, or more specifically, an HTML **input element**. By default, the input element allows the user to enter any text value. By specifying the element’s type attribute, we can also get it to be a checkbox or render specifically formatted data like passwords or dates. Let’s look at a basic text input for now and see how we work with it in React.

# Reactive input
Remember that React re-renders the page or view whenever there is a change in state. This state change could be triggered by internal events of the application itself, such as data arriving from a network call. It could also be the result of an action by the user. This includes typing a new character into a text box, where the value (or state) of the input element changes every time a character is entered. To make sure that React stays in sync with what the user is doing, we need to make sure we capture and respond to the user by updating the contents of a text box. 

## Setting up a reactive input

We accomplish that by doing the following:

1. Create a state variable in our code to hold the current contents or value of an input box.
2. Set the value attribute of that input box to that variable.
3. Add an `onChange` event handler to the input box that updates the state
variable anytime the user changes the contents of the input box in the UI.

With those steps in place, anytime the value of the React state variable is updated, whether by the user or by our program, React will update the UI to reflect the current state.

Introduction of the HTML input box with Transcrypt.

Introduction

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

Introduction

Introduction