Search⌘ K
AI Features
Home
Courses
Using the Python Transcrypt Transpiler for Front-end Coding

Using Local JavaScript Libraries

Explore how to use local JavaScript libraries like React and ReactDOM in Transcrypt-based Python projects. Learn techniques to manage library imports, utilize compiler directives to keep code clean, and avoid global namespace pollution for better code organization and maintainability.

We'll cover the following...

Introduction

So now that we have the React and ReactDOM libraries installed locally, we can modify our react_hello2 files to utilize them. Then, as a housekeeping step, we can programmatically remove the global references for those libraries that are created when importing them from the HTML file by doing the following.

Run the widget below to run the server. The highlighted lines are modified.

from pyreact3 import useState, render, createElement as el

def App():
    val, setVal = useState("")

    def say_hello():
        setVal("Hello React!")

    def clear_it():
        setVal("")

    return [
        el('button', {'onClick': say_hello}, "Click Me!"),
        el('button', {'onClick': clear_it}, "Clear"),
        el('div', None, val)
    ]

render(App, None, 'root')
Importing local JavaScript libraries into the application

What did we change?

While there were only a few subtle changes to the ...