Создание приложений React с Python

Этот контент был первоначально выпущен как загрузка на Leanpub.

Pull-Stack Python

Позвольте мне начать, получая это с пути: Мне очень нравится программирование в Python, и я не большой поклонник JavaScript. Но давайте посмотрим на него, JavaScript – это способ веб-сайта, а Python не работает в веб-браузере. Итак, конец истории, верно? Ну, не так быстро, потому что так же, как на популярном языке TeampScript проходит в JavaScript для запуска в веб-браузере, Transcrypt делает то же самое для Python.

Из-за того, как Transcrypt Maps типы данных Python и языковые конструкции для JavaScript ваш код Python может использовать полную экосистему библиотек JavaScript, которые существуют. Transcrypt действует как мост, который позволяет использовать преимущества существующих технологий веб-приложений JavaScript, а не пытаться их изобретать. И он делает это таким образом, который не влияет на производительность приложения по сравнению с использованием простого JavaScript или для этого требуется большой модуль выполнения в клиенте. И хотя мы использовать Библиотеки JavaScript нам не нужно кодировать в JavaScript для использования их API.

Особенности транспина включают в себя:

• Это установочный PIP
• Код Python транспортируется на JavaScript перед развертыванием
• Он использует очень небольшое время выполнения JavaScript (~ 40k)
• Он может генерировать SourceMaps для устранения неполадок Python в браузере
• Сгенерированный JavaScript – это читаемый человеком
• Сгенерированный JavaScript может быть заминирован
• Производительность сопоставима с родным JavaScript
• Он отображает типы данных Python и языковые конструкции для JavaScript
• Это действует как мост между мирами Python и JavaScript
• Он поддерживает практически все встроенные и язык Python конструкции
• Это только ограниченная поддержка для стандартной библиотеки Python
• Ваш код Python может «напрямую» вызовите функции JavaScript
• Сотрудный JavaScript может вызвать ваши функции Python
• Он поддерживает только 3-я партийные библиотеки Python, которые являются чистыми Python

NPM вместо PIP

Большинство конструкций языка Python и встроенные в Transcrypt были реализованы в Transcrypt, поэтому работая со стандартными объектами Python, как списки, словари, строки и больше будут чувствовать себя как Python. Вообще говоря, однако сторонние библиотеки Python не поддерживаются, если библиотека (и ее зависимости) не являются чистыми Python.

Что это значит, что вместо того, чтобы превращаться в урлыб или Запросы Библиотека Если вам нужно сделать HTTP-запрос из вашего веб-браузера, вы будете использовать window.fetch () или JavaScript Axios Вместо этого библиотека. Но вы все равно должны были бы кодировать эти библиотеки JavaScript с помощью Python.

Установка

Начало работы с Transcrypt довольно легко. В идеале, вы хотели бы создать виртуальную среду Python для вашего проекта, активируйте его, а затем используйте PIP, чтобы установить Transcrypt. Transcrypt в настоящее время поддерживает Python 3.9 или Python 3.7, поэтому вам нужно будет создать вашу виртуальную среду с одной из этих версий, а затем установить соответствующую версию Transcrypt:

$ Python3.9 -M VINV VINV или $ Python3.7 -M VINV VINV $ Source Venv/Bin/Activate (Для Windows используют Venv \ Scripts \ Activate ) (Венв) $ пипс install.9. или (Венв) $ пипс Установить.7.16

Привет мир

С установленным Transcrypt мы можем попробовать простой Здравствуйте, мир Веб-приложение, чтобы увидеть, как это работает. Мы создадим два файла: файл Python с несколькими функциями, и файл HTML, который мы откроемся в веб-браузере:

Листинг 1: Hello.py.py.

def say_hello():
    document.getElementById('destination').innerHTML = "Hello World!"

def clear_it():
    document.getElementById('destination').innerHTML = ""

Листинг 2: Hello.html.

    
        
        Click Me!
        Clear
        

    

Затем мы транспортируем файл Python с Transcrypt CLI: (Венв) $ Transcrypt --Nomin --map. Привет

Здесь мы прошли Transcrypt Команда три аргумента:

• --nomin отключает заминирование, чтобы оставить сгенерированный код в читаемом человеке формате
• --Кап Создает SourceMaps для отладки кода Python в веб-браузере
• Привет это название модуля Python для транпила

Мы можем служить вверх Здравствуйте, мир Приложение, использующее встроенный Python HTTP-сервер: (Венв) $ Python -m. http.server.

Это запускает веб-сервер, который обслуживает файлы в текущем каталоге, из которого мы можем открыть наш файл HTML по адресу: http://localhost: 8000/hello.html

Как видно с этой простой демонстрацией, у нас есть методы вызывающих Python объектов JavaScript с использованием синтаксиса Python, а JavaScript вызывает функции «Python», которые были транслированы. И как упоминалось ранее, генерированный код JavaScript довольно читаемый:

Листинг 3 (сгенерированный код): __Target __/Hello.js

// Transcrypt'ed from Python
import {AssertionError, ... , zip} from './org.transcrypt.__runtime__.js';
var __name__ = '__main__';  
export var say_hello = function () {  
   document.getElementById ('destination').innerHTML = 'Hello World!';  
};  
export var clear_it = function () {  
   document.getElementById ('destination').innerHTML = '';  
};  

//# sourceMappingURL=hello.map

SourceMaps.

Чтобы продемонстрировать функцию SourceMap, мы можем снова создать два исходных файла: файл Python с функцией, который будет транслирован, и файл HTML, который будет точкой записи для нашего приложения в веб-браузере. На этот раз наш файл Python будет иметь функцию, которая выводит текст на консоль веб-браузера, используя как методы JavaScript, так и Python, вместе с вызовом метода JavaScript, который будет генерировать ошибку во время выполнения:

Листинг 4: SourceMap.py.

def print_stuff():
    console.log("Native JS console.log call")
    print("Python print")
    console.invalid_method("This will be an error")

Листинг 5: SourceMap.html.

    
        
        Print
    

(Венв) $ Transcrypt --nomin --map sourceMap

На этот раз со встроенным Python HTTP-сервером начал использовать: (Венв) $ Python -m. http.server.

Мы можем открыть наше тестовое приложение по адресу: http://localhost: 8000/sourceMap.html

Если вы откроете консоль разработчиков в веб-браузере, а затем щелкните кнопку, первые два вызова будут выполняться, печатая текст на консоль веб-браузера. Вызов JavaScript console.log () Метод ведет себя так, как вы ожидаете. Но, как вы можете видеть здесь, Python Печать () Функция заканчивается трансформированным, чтобы вызвать JavaScript console.log () метод также.

Третий вызов функции генерирует ошибку, поскольку мы пытаемся вызвать несуществующий метод JavaScript Консоль объект. Тем не менее, что приятно в этом случае, это то, что SourceMap может направлять нас к причине проблемы в наших Python исходный файл. Таким образом, даже если это созданный JavaScript, который фактически работает в веб-браузере, используя SourceMap, мы все еще можем просматривать наш код Python прямо в веб-браузере и посмотреть, где ошибка произошла в файле Python.

Реагировать

Теперь, когда мы видели, как Transcrypt позволяет нам делать звонки на JavaScript, давайте выпустить его и использовать Transcrypt, чтобы сделать вызовы в библиотеку RACT. Мы начнем с другого простого Здравствуйте, мир Приложение снова, но на этот раз делает это реагированным способом. Мы будем придерживаться двух исходных файлов: файл Python, который будет транслироваться и файл HTML, который будет открыт в веб-браузере. Файл HTML будет делать небольшую дополнительную работу для нас в том, что он будет нести ответственность за загрузку библиотек javaScript javaScript.

Листинг 6: hello_react.py

useState = React.useState
el = React.createElement

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)
    ]

def render():
    ReactDOM.render(
        el(App, None),
        document.getElementById('root')
    )

document.addEventListener('DOMContentLoaded', render)

Листинг 7: hello_reaact.html.

  
    
    
    
    
  
  
    
Loading...
  

Теперь транпили файл Python с Transcrypt: (Венв) $ transcrypt --nomin --map hello_react

Еще раз, после того, как Transcrypt выполняется генерация файлов JavaScript, запускайте встроенный HTTP-сервер Python, используя:

(Венв) $ python -m http.server

Затем откройте демонстрационную реактивную приложение по адресу: http://localhost: 8000/hello_react.html

Хотя функционально то же самое, что и первое демонстрационное приложение, которое мы сделали, это время реагируют, добавляет динамически сгенерированный HTML в качестве ребенка указанного элемента – в этом случае «root» Div Отказ

Здесь мы добавили некоторые удобные переменные, Уместите и эль , чтобы сопоставить глобальные методы реагирования в локальные переменные Python. Реагирование творчество () Метод – рабочая лошадка библиотеки и используется для динамически генерации элементов HTML в браузере.

Реагирование является декларативным, функциональным и основана на состоянии. Что это значит, это то, что вы определяете вид, а затем реагируют обрабатывает, когда и как он обновляется, когда есть изменения в состоянии. По конструкции переменные состояния RACT неизменны и используют функцию сеттера для обновления. Это помогает отреагировать на то, когда происходит изменения в состоянии, поэтому он может потом повторно представить представление по мере необходимости. В этом примере мы использовали React Usestate () Метод для создания валь Переменная и ее соответствующие setval () Функция сеттера.

Отчет о возврате функционального компонента RACT, как правило, состоит из ряда вложенных и цепных вызовов к реакции творчество () Функция, которая в совокупности образует древесную структуру элементов HTML и/или компонентов реагирования. Это где представление декларивно определено. Может потребоваться некоторое время, чтобы принять удобнее, если вы не используете функциональное программирование в Python.

Реантзор Визуализация () Функция принимает комментарий реагирования верхнего уровня и ссылку на элемент HTML, чтобы прикрепить его к DOM. Именно здесь он добавляет динамически сгенерированное HTML-дерево, которое реагирует в реакцию в качестве ребенка указанного элемента.

Создание приложения React

Проделав простое приложение React Application, давайте теперь создадим тот, который имеет еще несколько движущихся частей. Эта демонстрация примет значение, введенное через пользовательский интерфейс, и добавьте его в список при отправке.

Большинство веб-приложений любой утилиты получит достаточно большие, где он становится слишком громоздким, чтобы управлять вручную. Именно здесь вступают менеджеры по пакетам и битлеры приложений. Для этого следующего примера мы будем использовать Bundler посылки для создания и установки приложения, чтобы вы могли посмотреть, как может выглядеть этот стек разработчика для более крупных приложений.

Во-первых, нам нужно установить необходимые библиотеки JavaScript для поддержки набора инструментов разработки. Это требует Node.js Чтобы быть установленным в вашей системе, чтобы мы могли использовать управляющий узел пакета. Начнем с инициализации нового проекта и установка библиотеки Bundler посылки вместе с плагином для TransCrypt:

$ NPM init -y $ NPM Установка посылки Bundler --save-dev $ NPM Установить Parcel-Plugin-Transcrypt --save-dev

Тогда мы можем установить библиотеки React: $ NPM Install Rect @ 16 React-DOM @ 16

Из-за несовместимости версии существует файл в текущем плагине Transcrypt, который требует патча. Обеспокоенный файл: ./node_modules/parcel-plugin-transcrypt/asset.js

В этом файле измените строку 2, которые загружают посылку Логин Модуль из этого:

const logger = require('parcel-bundler/src/Logger');

к этому:

const logger = require('@parcel/logger/src/Logger');

После того, как эта модификация сделана для изменения местоположения посылки Логин Модуль, плагин Transcrypt для посылки должен работать.

Примечание для пользователей Windows:

Для тех из вас, использующих Windows, необходимо сделать еще два изменения Asset.js Файл для него работать в средах Windows. Во-первых, значит изменить конфигурацию сборки TransCrypt по умолчанию, чтобы просто использовать версию Python, с которой вы устанавливаете виртуальную среду.

Для этого изменить строку 14, определяющую команду TransCrypt, чтобы просто использовать Python вместо Python3 , изменяя его из этого:

"command": "python3 -m transcrypt",

к этому:

"command": "python -m transcrypt",

Второе изменение связано с модификацией пути импорта файла, чтобы он использовал обратно в стиле Windows, а не вперед-косый в стиле Linux/Mac. Для этой модификации мы можем использовать строку заменить () Способ на линии 143, чтобы сделать встроенный коррекцию на путь к файлу для сред Windows. Так что измените эту строку:

this.content = `export * from "${this.importPath}";`;

к этому:

this.content = `export * from "${this.importPath.replace(/\\/g, '/')}";`;

В какой-то момент я ожидаю, что модификация будет включена в пакет Pubcel-Plugin-Transcrypt, чтобы этот взлом можно избежать в будущем.

Теперь, когда у нас есть Bundler на месте, у нас есть больше вариантов относительно того, как мы работаем с библиотеками JavaScript. Для одного, теперь мы можем воспользоваться узлом требовать () Функция, которая позволяет управлять пространством имен, в который загружаются библиотеки JavaScript. Мы будем использовать это для выделения наших сопоставлений Python-JavaScript в один модуль, который сохраняет остальные модули нашего кода все чистые Python.

Листинг 8: пиреакт

# __pragma__ ('skip')
def require(lib):
    return lib

class document:
    getElementById = None
    addEventListener = None
# __pragma__ ('noskip')

# Load React and ReactDOM JavaScript libraries into local namespace
React = require('react')
ReactDOM = require('react-dom')

# Map React javaScript objects to Python identifiers
createElement = React.createElement
useState = React.useState


def render(root_component, props, container):
    """Loads main react component into DOM"""

    def main():
        ReactDOM.render(
            React.createElement(root_component, props),
            document.getElementById(container)
        )

    document.addEventListener('DOMContentLoaded', main)

В верхней части файла мы использовали один из Transcrypt’s __pragma__ Директивы компилятора, чтобы сказать ему, чтобы игнорировать код между пропустить/noskip блокировать. Код в этом блоке не влияет на транспортируемый JavaScript, но он хранит любого Python Linter, который у вас может быть в вашей тишине IDE, заглушая команды JavaScript, которые иначе неизвестны Python.

Далее мы используем узел требовать () Функция для загрузки библиотек JavaScript javaScript в пространство имен модуля. Тогда мы рассмотрим React творчество () и Usestate () Методы для переменных на уровне модулей Python, как мы сделали раньше. Как мы увидим в ближайшее время, это позволит нам импортировать эти переменные в другие модули Python. Наконец, мы переехали Визуализация () Функция, которую мы создали ранее в этот модуль.

Теперь, когда у нас есть интерфейс JavaScript несколько самостоятельно, мы можем использовать его в нашем применении:

Листинг 9: приложение

from pyreact import useState, render, createElement as el


def ListItems(props):
    items = props['items']
    return [el('li', {'key': item}, item) for item in items]


def App():
    newItem, setNewItem = useState("")
    items, setItems = useState([])

    def handleSubmit(event):
        event.preventDefault()
        # setItems(items.__add__(newItem))
        setItems(items + [newItem])  # __:opov
        setNewItem("")

    def handleChange(event):
        target = event['target']
        setNewItem(target['value'])

    return el('form', {'onSubmit': handleSubmit},
              el('label', {'htmlFor': 'newItem'}, "New Item: "),
              el('input', {'id': 'newItem',
                           'onChange': handleChange,
                           'value': newItem
                           }
                 ),
              el('input', {'type': 'submit'}),
              el('ol', None,
                 el(ListItems, {'items': items})
                 )
              )


render(App, None, 'root')

Как уже упоминалось ранее, мы импортируем отображения JavaScript, которые нам нужны от Пиракт.пи Модуль, как мы бы любой другой импорт Python. Мы назвали реагированием творчество () Метод эль Чтобы сделать его немного легче работать с.

Если вы уже знакомы с реагированием, вы, вероятно, задаетесь вопросом на данный момент, почему мы звоним творчество () напрямую и не скрывая эти звонки за JSX. Причина связана с тем, что Transcrypt использует модуль Python AST для анализа файлов PY, и поскольку Syntax JSX не является действительным Python, это сломало бы это. Там являются Способы использовать JSX с Transcrypt, если вы действительно хотели, но на мой взгляд, как вы должны сделать это, поражает цель использования JSX в первую очередь.

В этом модуле мы создали две функциональные элементы реагирования. Приложение Компонент является основной точкой входа и служит верхней частью дерева компонентов, которое мы строим. Здесь у нас есть две переменные состояния, которые мы создаем вместе со своими функциями спутника спутника. Newitem Переменная состояния будет удерживать введенное значение, которое должно быть добавлено в список. предметы Переменная состояния затем удерживает все значения, которые были ранее введены.

Затем у нас есть две функции, один для выполнения действия, когда форма подает значение, которое было введено, и другое, которое синхронизирует значение, которое вводится с состоянием нашего актестера реагирования.

Затем в обратном отчете о Приложение () Функция, мы объявляем дерево элементов, которые определяют пользовательский интерфейс. Верхняя часть дерева элемента начинается с HTML Форма Отказ Это позволяет нам воспользоваться его кнопкой отправки по умолчанию, которая в этом случае вызывает нашу handlesubmit () Функция, которая добавит новые значения в список.

В handlesubmit () Функция, при добавлении нового элемента в наш список мы использовали директиву встроенной компилятора, чтобы позволить Transcrypt знать, что эта конкретная линия кода использует перегрузку оператора:

        setItems(items +  [newItem])  # __:opov`  

По умолчанию Transcrypt выключает эту возможность, поскольку она приведет к созданию генерируемого JavaScript, чтобы принять удар производительности, если оно было включено глобально из-за накладных расходов, необходимых для реализации этой функции. Если вы предпочитаете не использовать директиву компилятора, чтобы включить перегрузку оператора только в том случае, если это необходимо, в том случае, в том случае, вы также можете позвонить соответствующему методу перегрузки оператора Python, непосредственно, как показано на комментарии только над ним.

Внутри (или ниже), что у нас есть вход Элемент для ввода новых ценностей вместе с соответствующим этикетка элемент, который идентифицирует его в пользовательском интерфейсе. вход Элемент имеет HandleChange () функция как ее Onchange Обработчик событий, который сохраняет состояние реагирования, синхронизированное с тем, что отображается пользовательский интерфейс.

Далее в дереве элементов – это список значений, которые уже были введены. Они будут отображаться в интерфейсе UI, используя заказанный HTML-элемент списка, который будет загружать элементы, которые к нему добавляются.

Это приводит нас к второму функциональному компоненту этого модуля, ListiTems , что делает значения в нашем предметы Переменная состояния как HTML Ли элементы. предметы передаются в этот компонент как свойство, которое мы деконструируем в локальную переменную. Оттуда мы используем понимание списка Python для создания списка лита элементы, итерация по предметам.

Последний шаг – это позвонить импортированному Визуализация () Функция, которая прикрепит наше Приложение React Compont к точке крюка DOM, идентифицированных по «root» В файле HTML:

render(App, None, 'root')

Вы заметите это, потому что мы поставили все сопоставления для Python-JavaScript в Пиракт.пи Модуль, что этот модуль может быть на 100% чистого Pythonic Python. Нет смешивания языков, нет странных непрерывных контактов языка Python, а без JavaScript!

Чтобы завершить эту демонстрацию, теперь нам просто нужна точка входа в HTML, которую мы можем загрузить в веб-браузер:

Листинг 10: index.html.

На этот раз вместо того, чтобы бегать напрямую транспина, мы можем запустить посылка Команда с использованием узла NPX пакет бегун. И благодаря плагину Partcle Transcrypt он также будет запустить Transcrypt для нас и заблокировать сгенерированные файлы JavaScript:

(Венв) $ NPX Parcel - Log-Level 4 --no-Cache index.html

Это также запускает веб-сайт Development Parcel, который будет служить сгенерированному контенту с использованием маршрута по умолчанию по адресу: http://localhost: 1234

И с этим у нас есть основательная основа для создания приложений React с использованием Python!

Для большего…

Если вы заинтересованы в изучении более подробной информации о том, что представлено здесь, Реагировать на Python Книга погружает много глубже в то, что необходимо для разработки полных веб-приложений, используя этот подход.

Книга включает в себя:

• Настройка необходимых инструментов среды разработчика
• Создание форм Crud
• Асинхронные запросы с сервисом отдыха на колбе
• Основы использования библиотеки компонентов Material-UI
• Одиночные приложения
• Основные пользовательские сессии Управление сессией
• Маршрутизация SPA View.
• Включая Google Analytics в ваше приложение
• Идет вас через строительство Полный демонстрационный проект

Ресурсы

• Исходный код: https://github.com/jennasys/rtp_demo

• Transcrypt сайт: https://www.transcrypt.org

• Transcrypt Github: https://github.com/qquick/transcrypt

• Реагировать на книгу Python: https://pyreact.com.

Оригинал: “https://dev.to/jennasys/creating-react-applications-with-python-2je1”