Как использовать front end для Flask приложения?

[

Введение в ReactJS: разработка веб-приложения с использованием Flask

В этой статье мы рассмотрим небольшую, но мощную библиотеку JavaScript для создания пользовательских интерфейсов ReactJS и построим базовое веб-приложение. Данное приложение работает на Python 3 и фреймворке Flask на серверной стороне, а на клиентской стороне используется React. Кроме того, мы будем использовать инструменты gulp.js (task runner), bower (менеджер пакетов для фронтенда) и Browserify (бандлер зависимостей JavaScript).

Часть 1 - Начало работы

Перед началом работы необходимо установить несколько инструментов. Для этого загрузите и распакуйте код из репозитория, создайте и активируйте виртуальное окружение, а затем установите зависимости:

$ pip install -r requirements.txt

После установки зависимостей можно запустить приложение:

$ sh run.sh

Теперь давайте посмотрим на простой компонент React.

React: движемся от статического контента к React

Добавим следующий JSX-скрипт в наш файл hello.html. Посмотрите на него внимательно.

<script type="text/jsx">

  /*** @jsx React.DOM */

  var realPython = React.createClass({
    render: function() {
    }
  });

  ReactDOM.render(
    React.createElement(realPython, null),
    document.getElementById('content')
  );

</script>

Что здесь происходит?

Мы создали компонент, вызвав createClass(), и присвоили его переменной realPython. React.createClass() принимает единственный аргумент - объект.
Наконец, мы передали компонент в метод ReactDOM.render(), который рендерит компонент в DOM-элемент с идентификатором “content”.

Заключение

В данной статье мы рассмотрели основы работы с ReactJS и создали базовое веб-приложение с использованием Flask на серверной стороне. Мы также рассмотрели пример компонента React и его рендеринга. В следующей части мы продолжим разработку нашего приложения и создадим динамический поисковый инструмент.

Следите за обновлениями и не пропустите следующую статью!

— БЕСПЛАТНАЯ серия электронных писем —

🐍 Трюки на Python 💌

Python Tricks Dictionary Merge

Получите Трюки на Python »

🔒 Без спама. Отписаться можно в любой момент.

Browse Topics Guided Learning Paths

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