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


The following commands will be needed when implementing ideas from this course on your own machine. The course already has this setup implemented.

## Activating the Python environment

Activate the virtual environment using the appropriate command for our operating system:

For Windows, use this:
```shell
C:\> venv\Scripts\activate 
```
For Mac or Linux, use this:
```shell
$ source venv/bin/activate
```
Specify the Python version if you have multiple versions on your system. The first `venv` is the Python module name and the second `venv` is the environment name. When creating a virtual environment inside the terminal, be specific with the Python version.


## Using Transcrypt

```txt
transcrypt --nomin --map <python file name>
```
Use `react_hello` as the Python file that needs to be translated to JavaScript. The flag is set by `--nomin` so that Transcrypt does not minimize the generated code, and `--map` gives the command of generating the sourcemap for easier debugging.

## Using Python
```txt
python -m http.server
```
This command will start a simple HTTP server and it will serve the directory it is currently present in.

The `-m` switch allows us to execute a module as an executable file. 

### Setting up a Python virtual environment
```txt
python -m venv <name of environment>
```
These commands create the Python environment.
</br>For Windows, use this:

```txt
<name of environment>\Scripts\activate 
```
For Mac/Linux, use this:
```txt
source <name of environment>/bin/activate 
```

## Using npm

If `Node.js` or `npm` is not installed on your local setup, download the `Node.js` installation that is appropriate for your operating system from the[Node.js](https://nodejs.org) website.

To initialize a project, use
```txt
npm init -y
```
The `-y` flag simply says yes to all the questions when initializing an npm project.
```txt
npm start
```
The `start` command runs the start script in the `package.json`. 
```txt
 npm install <package name> --save-dev
```
This installs the package and lists it as a developer dependency. So it won’t be included in the final build.

## Using npx
```txt
npx parcel --log-level 4 --no-cache <HTML File Name>
```
This command uses `parcel`, which packages our Python application (first transpiling it) and then serves it on the port `1234`. The HTML file should call the Python file in this case.

# Activating the Python environment

Activate the virtual environment using the appropriate command for our operating system:

For Windows, use this:
```shell
C:\> venv\Scripts\activate 
```
For Mac or Linux, use this:
```shell
$ source venv/bin/activate
```
Specify the Python version if you have multiple versions on your system. The first `venv` is the Python module name and the second `venv` is the environment name. When creating a virtual environment inside the terminal, be specific with the Python version.


# Using Transcrypt

```txt
transcrypt --nomin --map <python file name>
```
Use `react_hello` as the Python file that needs to be translated to JavaScript. The flag is set by `--nomin` so that Transcrypt does not minimize the generated code, and `--map` gives the command of generating the sourcemap for easier debugging.

# Using Python
```txt
python -m http.server
```
This command will start a simple HTTP server and it will serve the directory it is currently present in.

The `-m` switch allows us to execute a module as an executable file. 

## Setting up a Python virtual environment
```txt
python -m venv <name of environment>
```
These commands create the Python environment.
</br>For Windows, use this:

```txt
<name of environment>\Scripts\activate 
```
For Mac/Linux, use this:
```txt
source <name of environment>/bin/activate 
```

# Using npm

If `Node.js` or `npm` is not installed on your local setup, download the `Node.js` installation that is appropriate for your operating system from the[Node.js](https://nodejs.org) website.

To initialize a project, use
```txt
npm init -y
```
The `-y` flag simply says yes to all the questions when initializing an npm project.
```txt
npm start
```
The `start` command runs the start script in the `package.json`. 
```txt
 npm install <package name> --save-dev
```
This installs the package and lists it as a developer dependency. So it won’t be included in the final build.

# Using npx
```txt
npx parcel --log-level 4 --no-cache <HTML File Name>
```
This command uses `parcel`, which packages our Python application (first transpiling it) and then serves it on the port `1234`. The HTML file should call the Python file in this case.

An appendix containing useful commands for local setups.

Appendix

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

Appendix

Local execution

Activating the Python environment