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

In this lesson, we will build upon what we went over previously and learn how we can dynamically add and remove elements in our application through examples. 

For this example, we are going to take the application code from the previous chapter. Instead of just displaying an alert when we click the "Submit" button, we will add the value in the input box to a list of displayed items. This time around, we are going to keep the HTML file and `pyreact.py` module the same as last time and update the `app.py` file as shown here.

## Adding states

Most of our core React `App` components are the same, but we add a few things to support the list we want to build. The first thing we do is store our list items. In **line 5**, by using the `React.useState()` method, we add a new state variable to our code called `listItems`. This also gives us the `setListItems()` method to use when we update the value of the `listItems` variable.

## Adding functionality

In **line 7**, the function `handleSubmit()` that handles the `onClick` event of the button, we change its behavior by removing the alert we had there previously and adding a code that will update our `listItems` state variable. We use setter functions to update them in a controlled manner and never modify them directly because React uses changes in the value of state and `prop` variables to know when the UI needs to be re-rendered. As such, state and `prop` variables are immutable, so in **line 9**, we need first to copy the current `listItems` state and store it in a local variable called `new_list`. After that, in **line 10** we can add the `newItem` value to the local copy of the list, which is then passed to the `setListItems()` update method to actually update the state of our `App` component.

Lastly, in **line 12**, we reset the value of the `newItem` state variable to an empty string by using the `setNewItem()` update method. Whenever we call `setNewItem()` or `setListItems()` to update our state, React will automatically re-render the UI to reflect the current state of the `App` component when the current event completes.

In **line 34**, we add a standard HTML ordered list element `(ol)` after the existing button element in the return statement of our `App` component. This will create a list with sequentially numbered list items. To generate the children of the `ol` element, we create the `getListItems()` function in **line 18** that loops through the items in our `listItems` state variable. Then for every item in `listItems`, it appends a new list item `(li)` element to a regular Python list. We then return that list from the function to be used as the `ol` element's children.

## Adding the key

Whenever you have a repeating list of React elements, you should add a `key` property to each element that uniquely identifies that particular element in the list. The value can be anything as long as it does not change between renders and it is not repeated anywhere else in that list. React uses this key to keep track of which elements have changed between renders to help it be as efficient as possible in determining which components need to be updated when there is a change in state.

### Removing the alert import

We also remove the import for the alert function since we are no longer using it here.

> **Note:** Run the coding widget to view the changes we have added.

# Introduction

In this lesson, we will build upon what we went over previously and learn how we can dynamically add and remove elements in our application through examples. 

For this example, we are going to take the application code from the previous chapter. Instead of just displaying an alert when we click the "Submit" button, we will add the value in the input box to a list of displayed items. This time around, we are going to keep the HTML file and `pyreact.py` module the same as last time and update the `app.py` file as shown here.

# Adding states

Most of our core React `App` components are the same, but we add a few things to support the list we want to build. The first thing we do is store our list items. In **line 5**, by using the `React.useState()` method, we add a new state variable to our code called `listItems`. This also gives us the `setListItems()` method to use when we update the value of the `listItems` variable.

# Adding functionality

In **line 7**, the function `handleSubmit()` that handles the `onClick` event of the button, we change its behavior by removing the alert we had there previously and adding a code that will update our `listItems` state variable. We use setter functions to update them in a controlled manner and never modify them directly because React uses changes in the value of state and `prop` variables to know when the UI needs to be re-rendered. As such, state and `prop` variables are immutable, so in **line 9**, we need first to copy the current `listItems` state and store it in a local variable called `new_list`. After that, in **line 10** we can add the `newItem` value to the local copy of the list, which is then passed to the `setListItems()` update method to actually update the state of our `App` component.

Lastly, in **line 12**, we reset the value of the `newItem` state variable to an empty string by using the `setNewItem()` update method. Whenever we call `setNewItem()` or `setListItems()` to update our state, React will automatically re-render the UI to reflect the current state of the `App` component when the current event completes.

In **line 34**, we add a standard HTML ordered list element `(ol)` after the existing button element in the return statement of our `App` component. This will create a list with sequentially numbered list items. To generate the children of the `ol` element, we create the `getListItems()` function in **line 18** that loops through the items in our `listItems` state variable. Then for every item in `listItems`, it appends a new list item `(li)` element to a regular Python list. We then return that list from the function to be used as the `ol` element's children.

# Adding the key

Whenever you have a repeating list of React elements, you should add a `key` property to each element that uniquely identifies that particular element in the list. The value can be anything as long as it does not change between renders and it is not repeated anywhere else in that list. React uses this key to keep track of which elements have changed between renders to help it be as efficient as possible in determining which components need to be updated when there is a change in state.

## Removing the alert import

We also remove the import for the alert function since we are no longer using it here.

> **Note:** Run the coding widget to view the changes we have added.

Work with HTML lists using React and Transcrypt.

HTML Lists

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

HTML Lists

Introduction

Adding states