Почему одни люди более успешны, чем другие? Почему некоторые люди зарабатывают больше денег, живут более счастливой жизнью и достигают гораздо большего за то же количество лет, чем подавляющее большинство? В чем настоящий «секрет успеха»?

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

Цель этой статьи - помочь вам запустить собственное полнофункциональное веб-приложение с сервером Python Flask и интерфейсом React. Эта статья подходит для всех, кто имеет базовые представления о программировании и технологиях, кто хочет изучить красоту python-flask, npm, webpack и reactjs для создания полнофункционального веб-приложения.

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

Организация папок и файлов

Мы начнем с организации файлов и папок для нашего проекта. Эффективная организация статических файлов, таких как JavaScript, таблицы стилей, изображения и т. Д., Всегда является проблемой для всех веб-фреймворков. Flask рекомендует особый способ организации статических файлов в нашем приложении.

.
├── hello_template
    ├── configurations.py
    ├── __init__.py
    ├── README.md
    ├── run.py
    └── templates
        ├── hello
        │   ├── __init__.py
        │   └── views.py
        ├── __init__.py
        ├── public
        │   ├── css
        │   ├── fonts
        │   ├── images
        │   └── js
        └── static
            ├── index.html
            ├── __init__.py
            ├── js
               ├── components
               ├── index.jsx
               └── routes.js

Мы организовали наше приложение по модульному принципу. Мы достигли этого с помощью файла __init__.py в наших папках, которые должны использоваться как модули.

Конфигурация колбы

Flask - это микрофреймворк для Python, основанный на Werkzeug, Jinja2 и добрых намерениях.

Почему именно микро? Это просто относится к тому факту, что Flask стремится сохранить ядро ​​фреймворка небольшим, но в высшей степени расширяемым. Это делает написание приложений или расширений очень простым и гибким и дает разработчикам возможность выбирать конфигурации, которые они хотят для своего приложения, без каких-либо ограничений на выбор базы данных, механизма шаблонов и т. Д.

Я предполагаю, что вы уже настроили свою среду Python. Если нет, перейдите по этой ссылке, чтобы установить python и подготовиться. Давайте продолжим установку Flask, выполнив следующую команду pip install Flask

Чтобы убедиться, что все работает нормально, давайте создадим быстрое и простое веб-приложение на основе Flask. Скопируйте приведенный ниже код, вставьте его в hello_template/run.py файл и сохраните.

from flask import Flask
app = Flask(__name__)
@app.route('/')
def hello_world():
 return 'Hello to the World of Flask!'
if __name__ == '__main__':
 app.run()

В этом коде, как и в любом другом коде этой статьи, убедитесь, что вы сделали отступ там, где это необходимо.

Откройте терминал в корневом каталоге hello_template/ и выполните следующую команду для запуска приложения:
python run.py
Если все работает правильно, вам будет предоставлен адрес http://127.0.0.1:5000/, который вы можете открыть в своем любимом браузере и увидеть наш приложение запущено.

Чтобы увидеть все пакеты, от которых зависит Flask, вы можете установить Flask с помощью команды pip install -U flask.. -U относится к установке с обновлениями. Кроме того, здесь будут перечислены все пакеты, от которых зависит Flask, это flask, Werkzeug, Jinja2, itsdangerous и markupsafe. Flask не будет работать, если они отсутствуют

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

Откройте файл hello_template/configurations.py и вставьте приведенный ниже код.

class BaseConfig(object):
 '''
 Base config class
 '''
 DEBUG = True
 TESTING = False
class ProductionConfig(BaseConfig):
 """
 Production specific config
 """
 DEBUG = False
class DevelopmentConfig(BaseConfig):
 """
 Development environment specific configuration
 """
 DEBUG = True
 TESTING = True

Теперь мы можем использовать любой из предыдущих классов при загрузке конфигурации приложения через from_object() в hello_template/run.py как:

from templates import app
#Load this config object for development mode
app.config.from_object('configurations.DevelopmentConfig')
app.run()

Включение режима отладки заставит сервер перезагружаться в случае
любых изменений кода, а также предоставляет очень полезный отладчик Werkzeug
, когда что-то пойдет не так.

Также обратите внимание, что мы импортировали app из шаблонов. Мы собираемся определить наш app object в __init__.py файле в папке hello_template/templates/. Импорт сюда возможен, потому что мы организовали наше приложение по модульному принципу.

Загрузка статических файлов. Если на корневом уровне приложения существует папка с именем static, то есть на том же уровне, что и run.py, Flask автоматически прочитает содержимое папки без какой-либо дополнительной настройки. В качестве альтернативы мы можем предоставить параметр с именем static_folder объекту приложения при определении приложения в файле hello_template/templates/__init__.py.

from flask import Flask
app = Flask(__name__,
 static_folder = './public',
 template_folder="./static")
import templates.hello.views

Тогда у нас будет пустой hello_template/templates/hello/__init__.py файл, чтобы сделать папку, в которую она заключена, пакет Python. Наконец, hello_template/templates/hello/views.py будет:

from templates import app
from flask import render_template
@app.route('/')
@app.route('/hello')
def index():
 return render_template("index.html")

Мы можем определить циклический импорт между hello_template/templates/__init__.py и hello_template/templates/hello/views.py, где в первом случае мы импортируем представления из более поздних, а во втором мы импортируем приложение из первого. Таким образом, это фактически делает два модуля зависимыми друг от друга.

В нашей папке hello мы использовали представления для рендеринга HTML-файла, который будет отображаться всякий раз, когда он видит в конце URL-адресов / и /hello. Итак, нормальный процесс выполнения будет следующим:

  • Запустите приложение с hello_template/run.py
  • hello_template/run.py импортирует приложение изhello_template/templates/__init__.py
  • hello_template/templates/__init__.py инициализирует приложение и импортирует все представления
  • hello_template/templates/hello/views.py прослушивает URL-адреса / и /hello и отображает HTML-файл.

мы использовали render_template(“index.html”) для рендеринга HTML-файла вместо генерации HTML из Python, что неинтересно и на самом деле довольно громоздко, потому что вам нужно самостоятельно выполнять экранирование HTML, чтобы обеспечить безопасность приложения. И мы заметим, что мы настроили наше приложение с template_folder=”./static”,, поэтому статическая папка будет содержать наши файлы HTML-шаблонов, которые можно загружать напрямую, без повторного указания пути. Подробнее читайте здесь.

hello_template/templates/hello/views.py специфичен для React. Мы расскажем, как установить React позже.

Создание модульного веб-приложения с помощью схем. Схема - это концепция Flask, которая помогает сделать более крупные приложения действительно модульными. На самом деле это набор операций, которые можно зарегистрировать в приложении, и он представляет, как создать или построить приложение. Мы изменим наши представления для работы с чертежами.

Во-первых, наш hello_template/templates/__init__.py будет изменен как

from flask import Flask
app = Flask(__name__,
 static_folder = './public',
 template_folder="./static")
from templates.hello.views import hello_blueprint
# register the blueprints
app.register_blueprint(hello_blueprint)

Затем hello_template/templates/hello/views.py будет изменен как

from flask import render_template, Blueprint
hello_blueprint = Blueprint('hello',__name__)
@hello_blueprint.route('/')
@hello_blueprint.route('/hello')
def index():
 return render_template("index.html")

Мы определили план в файле представления, объект приложения нам больше не нужен, и наша полная маршрутизация определяется в шаблоне с именем hello_blueprint. Поэтому вместо @app.route мы использовали @hello_blueprint.route. Тот же самый план импортируется в hello_template/templates/__init__.py и регистрируется в объекте приложения. Эмпирическое правило состоит в том, что каждое представление должно иметь свой собственный план.

Установка и настройка Webpack

Webpack - это сборщик модулей, который будет использоваться для преобразования JSX и объединения модулей / зависимостей. Использование модулей помогает организовать код JavaScript, разбивая его на несколько файлов, каждый из которых объявляет свои собственные зависимости. Затем сборщик модулей автоматически упаковывает все вместе в правильном порядке загрузки.

Множество инструментов, которые обрабатывают этот промежуточный шаг, в том числе Grunt, Gulp и Brunch. Но в целом сообщество React приняло webpack как предпочтительный инструмент для этой работы.

Установка Webpack: Webpack можно установить с помощью npm. Установите его глобально с помощью npm install -g webpack или добавьте его как зависимость в свой проект с помощью npm install — save-dev webpack.

В этом проекте мы добавим веб-пакет в качестве зависимости. Итак, сначала мы создаем файл hello_template/templates/static/package.json. Чтобы создать этот файл, вы можете открыть терминал в папке hello_template/templates/static/ и выполнить команду npm init

Файл package.json - это стандартный манифест npm, который содержит различную информацию о проекте и позволяет разработчику указывать зависимости (которые могут автоматически загружаться и устанавливаться) и определять задачи сценария.

Команда init задаст вам ряд вопросов, касающихся вашего проекта (например, название проекта, описание, информация об авторе и т. Д.).

Установив файл package.json, установите webpack и webpack cli с

npm install --save-dev webpack && npm install -D webpack-cli

Примечание. Все установки, которые мы будем выполнять с npm, должны выполняться на терминале, открытом в каталоге hello_template/templates/static/, где находится package.json.

Определение файла конфигурации: основной синтаксис командной строки для webpack - «webpack {entry file} {destination for bundled file}». Webpack требует, чтобы вы указали только один файл входа - он автоматически определит все зависимости проекта. Кроме того, если у вас не установлен глобальный пакет webpack, как в нашем случае, вам нужно будет указать команду webpack в папке node_modules проекта. Команда будет выглядеть так:
node_modules/.bin/webpack js/index.jsx public/bundle.js

Однако у webpack есть много различных дополнительных опций, и он позволяет использовать загрузчики и плагины для преобразования загруженных модулей. Хотя можно использовать webpack со всеми параметрами из командной строки, как указано выше, процесс имеет тенденцию становиться медленным и подверженным ошибкам. Лучшим подходом является определение файла конфигурации - простого модуля JavaScript, в который вы можете поместить всю информацию, относящуюся к вашей сборке.

Создайте файл hello_template/templates/static/webpack.config.js. Он должен ссылаться на входной файл и место назначения для связанного файла, как показано ниже:

const webpack = require('webpack');
const resolve = require('path').resolve;
const config = {
 entry: __dirname + '/js/index.jsx',
 output:{
      path: resolve('../public'),
      filename: 'bundle.js',
      publicPath: resolve('../public')
},
 resolve: {
  extensions: ['.js','.jsx','.css']
 },
};
module.exports = config;

__dirname - глобальная переменная node.js, содержащая имя каталога, в котором находится исполняемый в данный момент скрипт.

Файл bundle.js, созданный веб-пакетом, будет сохранен в общей папке, как указано в path: resolve('../public') выше.

Добавить команду запуска: чтобы сделать процесс разработки более гибким, мы добавим несколько команд запуска (build, dev-build, и watch) в файл package.json.

Сборка используется для производственных сборок, а dev-build - для неминифицированных сборок. Watch похож на dev-build с дополнительным преимуществом, заключающимся в том, что он отслеживает файлы вашего проекта. Любые измененные файлы будут автоматически перестроены, а обновление в браузере покажет только что внесенные вами изменения.

Вот package.json

{
  "name": "hello_template",
  "version": "1.0.0",
  "description": "A template for creating a full stack wep app with Flask, NPM, Webpack, and Reactjs",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack -p --progress --config webpack.config.js",
    "dev-build": "webpack --progress -d --config webpack.config.js",
    "watch": "webpack --progress -d --config webpack.config.js --watch"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/Eyongkevin/my-portfolio.git"
  },
  "keywords": [
    "portfolio",
    "template",
    "python",
    "react",
    "npm",
    "webpack"
  ],
  "author": "Eyong Kevin",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/Eyongkevin/my-portfolio/issues"
  },
  "homepage": "https://github.com/Eyongkevin/my-portfolio#readme",
  "devDependencies": {
    "webpack": "^4.19.1",
    "webpack-cli": "^3.1.0"
  },
}

Ваш package.json может отличаться от моего из-за ответов, которые вы, возможно, предоставили при создании этого файла с помощью npm init

Вы можете заметить некоторые переменные с моей личной информацией, например url, author и homepage. Вы можете изменить его на свою личную информацию.

Создание исходных карт. Одна из наиболее важных и используемых конфигураций для веб-пакета - Исходные карты. Несмотря на то, что упаковка всех модулей JavaScript вашего проекта в один (или несколько) связанных файлов для использования в браузере дает много преимуществ, один явный недостаток заключается в том, что вы не сможете ссылаться на исходный код в исходных файлах. при отладке в браузере. Становится очень сложно определить, где именно код, который вы пытаетесь отладить, сопоставляется с исходным авторским кодом. Здесь на помощь приходит Source Maps - исходная карта предоставляет способ сопоставления кода в связанном файле с исходным исходным файлом, что делает код читаемым и более легким для отладки в браузере.

Чтобы настроить Webpack для создания исходных карт, указывающих на исходные файлы, мы используем параметр devtool. У него много вариантов, но в этом проекте мы будем использовать «eval-source-map», поскольку он генерирует полную исходную карту. Хотя у него есть некоторые недостатки, мы будем использовать его только в режиме разработки.

const webpack = require('webpack');
const resolve = require('path').resolve;
const config = {
 devtool: 'eval-source-map',
 entry: __dirname + '/js/index.jsx',
 output:{
      path: resolve('../public'),
      filename: 'bundle.js',
      publicPath: resolve('../public')
},
 resolve: {
  extensions: ['.js','.jsx','.css']
 },
};
module.exports = config;

Есть еще более быстрые варианты для devtool. Хотя эти
параметры работают быстрее, они не сопоставляют связанный код напрямую с исходными файлами
и больше подходят для больших проектов,
которых требует время сборки. Вы можете узнать больше обо всех доступных опциях в
документации webpack.

Загрузчики. Одна из самых интересных функций Webpack - это загрузчики. Используя загрузчики, webpack может предварительно обрабатывать исходные файлы с помощью внешних скриптов и инструментов по мере их загрузки для применения всех видов изменений и преобразований. Преобразования полезны во многих случаях, например, для синтаксического анализа файлов JSON в простой JavaScript или преобразования кода JavaScript следующего поколения в обычный JavaScript, понятный текущим браузерам. Загрузчики можно настроить с помощью клавиши «modules» в webpack.config.js.

В настройки конфигурации загрузчика входят:

  • test: регулярное выражение, которое соответствует расширениям файлов, которые должны выполняться этим загрузчиком (обязательно).
  • loader: имя загрузчика (обязательно).
  • включить / исключить: необязательный параметр, позволяющий вручную указать, какие папки и файлы загрузчик должен явно добавлять или игнорировать.
  • запрос: настройку запроса можно использовать для передачи дополнительных параметров загрузчику.

В этом проекте мы будем использовать babel в качестве загрузчика для преобразования JSX React в простой JavaScript, как показано ниже:

const webpack = require('webpack');
const config = {
        devtool: 'eval-source-map',
 entry: __dirname + '/js/index.jsx',
 output:{
  path: __dirname + '/dist',
  filename: 'bundle.js',
},
 resolve: {
  extensions: ['.js','.jsx','.css']
 },
 module: {
  rules: [
  {
   test: /\.jsx?/,
   loader: 'babel-loader',
   exclude: /node_modules/,
  }]
 }
};
module.exports = config;

В приведенном выше коде используется загрузчик «Babel». Продолжите ниже, чтобы узнать, как установить и настроить babel.

Мы исключили здесь node_modules, потому что не хотим, чтобы babel преобразовывал какие-либо модули узлов, что ускоряет загрузку.

Добавить поддержку Babel

Babel - это платформа для компиляции и инструментария JavaScript. Это позволяет вам;

  • Используйте следующие версии JavaScript (ES6, ES2015, ES2016 и т. Д.), Которые еще не полностью поддерживаются во всех браузерах.
  • Используйте расширения синтаксиса JavaScript, такие как JSX от React.

Хотя babel является самостоятельным инструментом, мы будем использовать его в этом проекте в качестве загрузчика, поскольку он очень хорошо сочетается с Webpack.

Babel распространяется в разных модулях npm. Основные функции доступны в пакете npm «babel-core», интеграция с webpack доступна через пакет npm «babel-loader», и для каждого типа функций и расширений, которые мы хотим сделать доступными для нашего кода, нам потребуется установить отдельный пакет (наиболее распространены babel-preset-es2015 и babel-preset-react, для компиляции ES6 и React JSX соответственно).

Откройте терминал в каталоге hello_template/templates/static/ и я nstall babel и все функции, необходимые для этого проекта в качестве зависимостей разработки, с помощью команды:
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

Теперь, когда мы установили babel, мы можем разрешить нашему проекту использовать модули и синтаксис ES6, а также JSX, добавив в качестве предустановок в файл the webpack.config.js.

const webpack = require('webpack');
const config = {
        devtool: 'eval-source-map',
 entry: __dirname + '/js/index.jsx',
 output:{
  path: __dirname + '/dist',
  filename: 'bundle.js',
},
 resolve: {
  extensions: ['.js','.jsx','.css']
 },
 module: {
  rules: [
  {
   test: /\.jsx?/,
   loader: 'babel-loader',
   exclude: /node_modules/,
   query:{
     presets: ['react','es2015']
   }
  }]
 }
};
module.exports = config;

Однако многие разработчики предпочитают создавать отдельную конфигурацию ресурса babel, а именно файл .babelrc (с начальной точкой). Единственная конфигурация, специфичная для babel, которая у нас есть, - это настоящее определение, которое может не оправдывать создание файла конфигурации, специфичного для babel. Но поскольку со временем будут добавлены дополнительные функции webpack и babel, нам лучше использовать файл конфигурации babel.

Создайте .babelrc файл в hello_template/templates/static/каталоге:
В Linux вы можете использовать gedit .babelrc
Это создаст несохраненный файл, который вы можете заполнить приведенными ниже кодами и сохранить

{
 “presets”: [“react”, “es2015”]
}

Babel будет искать a .babelrc в текущем каталоге транслируемого файла. Если таковой не существует, он будет перемещаться вверх по дереву каталогов, пока не найдет .babelrc, или package.json с хешем “babel”: {} внутри. Подробнее читайте на официальном сайте.

Добавить Reactjs

React - проект с открытым исходным кодом, созданный Facebook. Он предлагает новый подход к созданию пользовательских интерфейсов на JavaScript.

Существует множество фреймворков JavaScript MVC. Так почему Facebook создал React и зачем нам его использовать в этом проекте?

  • Реактивный рендеринг - это просто. Большинство фреймворков JavaScript используют привязку данных, чтобы поддерживать синхронизацию интерфейса с состоянием, что имеет недостатки в удобстве обслуживания, масштабируемости и производительности. React позволяет декларативно писать, как компоненты должны выглядеть и вести себя. И когда данные меняются, React концептуально снова отображает весь интерфейс. Концептуально в том смысле, что он использует легкое представление DOM в памяти под названием «virtual DOM».
  • Компонентно-ориентированная разработка с использованием чистого JavaScript. В приложении React все состоит из компонентов, которые являются автономными строительными блоками для конкретных задач. Это позволяет использовать подход «разделяй и властвуй», когда ни одна конкретная часть не должна быть особенно сложной. Таким образом, легко создавать сложные и более многофункциональные компоненты из более мелких компонентов. Эти компоненты написаны на простом JavaScript, а не на языках шаблонов, это дает вам полнофункциональный язык программирования для визуализации представлений, поскольку языки шаблонов могут ограничивать

Установите Node.js. Чтобы продолжить, вам потребуется установить Node.js. JavaScript был рожден для работы в браузере, но Node.js позволяет запускать программы JavaScript на вашем локальном компьютере и на сервере. Если у вас не установлен Node.js, вы можете установить его сейчас, скачав установщик для Windows, Mac или Linux здесь.

Установите React: откройте терминал в hello_template/templates/static/ и выполните команду

$ npm i react react-dom --save-dev

Создание файлов .js и .jsx. Напомним, что наш hello_template/templates/__init__.py файл импортировал наши представления из hello_template/templates/hello/ папки. И файл view.py в папке hello будет прослушивать URL-адрес и отображать файл шаблона ‘index.html ’, который находится в каталоге hello_template/templates/static/. Этот HTML-файл почти пуст, он просто загружает связанный javaScript и предоставляет Div для рендеринга реагирующих компонентов.

<!— index.html —>
<html>
  <head>
    <meta charset="utf-8">
    <!-- Latest compiled and minified bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
    <title>Creating a Full-Stack Python Application with Flask, NPM, React.js and Webpack</title>
  </head>
  <body>
    <div id="content" />
    <script src="public/bundle.js" type="text/javascript"></script>
  </body>
</html>

Местоположение этого HTML-файла было указано в hello_template/templates/__init__.py с помощью переменной template_folder='./static

Файл bundle.js - это единственный файл JavaScript веб-пакета, содержащий все модули, упакованные в правильном порядке. И его местонахождение указано в hello_template/templates/__init__.py as static_folder=’./public’

Теперь мы заполним файл hello_template/templates/static/js/index.jsx простым приложением React и загрузим соответствующий компонент из файла hello_template/templates/static/js/routes.js маршрутизатора в наш index.html файл.

import React from 'react';
import ReactDOM from 'react-dom';
import routes from "./routes";
ReactDOM.render(routes, document.getElementById("content"));

Наш hello_template/templates/static/js/routes.js file будет выполнять работу по вызову соответствующих компонентов и, следовательно, отображению нашего сообщения «Hello React!».

Установка реактивного маршрутизатора: React Router - наиболее популярное решение для добавления маршрутизации в приложение React. Он поддерживает синхронизацию пользовательского интерфейса с URL-адресом, связывая компоненты с маршрутами (на любом уровне вложенности). Когда пользователь меняет URL-адрес, компоненты отключаются и монтируются автоматически.

Маршрутизатор - это внешняя библиотека, она должна быть установлена ​​с npm (вместе с библиотекой History, которая является зависимостью узла React Router.

Используя npm:

$ npm install --save react-router-dom history

Добавьте в файл routes.js следующий код:

import React from 'react';
import { HashRouter, Route, hashHistory } from 'react-router-dom';
import Home from './components/Home';
// import more components
export default (
    <HashRouter history={hashHistory}>
     <div>
      <Route path='/' component={Home} />
     </div>
    </HashRouter>
);

routes.js импортирует класс Home из hello_template/templates/static/js/components/Home.jsx, поэтому этот класс необходимо экспортировать, чтобы его можно было импортировать.

Помните, мы говорили, что файл index.html содержит Div, в котором будет отображаться реагирующий компонент. Мы видим, что index.html имеет Div с идентификатором «content», в котором index.jsx отображает маршруты из routes.js

Компоненты React. В приложении React все состоит из компонентов, которые являются самодостаточными строительными блоками для конкретных задач. Разработка приложений с использованием компонентов позволяет применять подход «разделяй и властвуй», когда никакая конкретная часть не должна быть особенно сложной. Они остаются небольшими, и, поскольку их можно комбинировать, легко создавать сложные и более многофункциональные компоненты из более мелких компонентов.

Использование архитектуры компонентов React дает следующие преимущества:

  • Он позволяет использовать те же принципы для рендеринга HTML для Интернета, а также для встроенного представления iOS и Android.
  • События ведут себя согласованно и в соответствии со стандартами во всех браузерах и устройствах с автоматическим использованием делегирования.
  • Компоненты React могут отображаться на сервере для SEO и воспринимаемой производительности.

Таким образом, компоненты React - это просто строительные блоки пользовательских интерфейсов React, которые просто состоят из класса JavaScript с методом рендеринга, который возвращает описание пользовательского интерфейса компонента.

В этом проекте мы создадим только один компонент, который будет описывать домашнюю страницу нашего веб-приложения. Однако мы должны создать для каждого пользовательского интерфейса компонент, который позаботится об описании указанного пользовательского интерфейса.

Введите приведенный ниже код в файл hello_template/templates/static/js/components/Home.jsx

import React, { Component } from 'react';
export default class Home extends Component {
    render() {
       return (
          <h1>Hello React!</h1>
       )
    }
}

Мы можем заметить теги HTML в середине кода JavaScript. Как уже упоминалось, React имеет расширение синтаксиса для JavaScript, называемое JSX, которое позволяет нам писать XML (и, следовательно, HTML) встраивая в код. Следовательно, мы использовали babel для преобразования JSX в простой JavaScript.

Таблицы стилей: Webpack предоставляет два загрузчика для работы с таблицами стилей: css-loader и style-loader. Каждый загрузчик выполняет разные задачи: в то время как css-loader ищет @import и url statements и разрешает их, загрузчик стиля добавляет все вычисленные правила стиля на страницу. Вместе эти загрузчики позволяют встраивать таблицы стилей в пакет JavaScript Webpack.

Установите css-loader и style-loader с помощью npm

npm install — save-dev style-loader css-loader

Последовательно обновите файл конфигурации webpack, как показано ниже:

const webpack = require('webpack');
const config = {
        devtool: 'eval-source-map',
 entry: __dirname + '/js/index.jsx',
 output:{
  path: __dirname + '/dist',
  filename: 'bundle.js',
},
 resolve: {
  extensions: ['.js','.jsx','.css']
 },
 module: {
  rules: [
  {
   test: /\.jsx?/,
   loader: 'babel-loader',
   exclude: /node_modules/,
  },
  {
         test: /\.css$/,
         loader: 'style-loader!css-loader?modules'
  }]
}
};
module.exports = config;

Восклицательный знак («!») Можно использовать в конфигурации загрузчика, чтобы связать разные загрузчики с одними и теми же типами файлов.

Из webpack v4 было удалено расширение имени модуля автоматического загрузчика. Больше нельзя опускать расширение -loader при ссылке на загрузчики. Так что вместо прежнего loader: style!css теперь это
loader: ‘style-loader! css-loader

Теперь давайте напишем простой файл css для иллюстрации. Скопируйте приведенный ниже код в файл hello_template/templates/public/css/main.css

html {
 box-sizing: border-box;
 -ms-text-size-adjust: 100%;
 -webkit-text-size-adjust: 100%;
}
*, *:before, *:after {
 box-sizing: inherit;
}
body {
 margin: 0;
 font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6, p, ul {
 margin: 0;
 padding: 0;
}

Наконец, мы должны помнить, что Webpack запускается с входного файла, определенного в его файле конфигурации, и строит все дерево зависимостей, следуя таким операторам, как import, require, url среди других. Это означает, что главный файл CSS также должен быть импортирован где-нибудь в приложении, чтобы веб-пакет нашел его.

Давайте импортируем наш main.css в index.html

<!- index.html ->
<html>
  <head>
    <meta charset="utf-8">
    <!-- Latest compiled and minified bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
    <link rel="stylesheet" href="public/css/main.css">
    <title>Creating a Full-Stack Python Application with Flask, NPM, React.js and Webpack</title>
  </head>
  <body>
    <div id="content" />
    <script src="public/bundle.js" type="text/javascript"></script>
  </body>
</html>

Запуск приложения

Откройте терминал в папке hello_template/templates/static/ и запустите сервер наблюдения за разработкой

npm run watch

Если вы получите здесь ошибку, похожую на ** npm WARN [email protected] требует однорангового узла @babel/core fas@⁷.0.0 , но ни один не был установлен. **, то вам следует понизить версию своего загрузчика babel до 7.x следующим образом:

npm install babel-loader@^7 --save-dev

Откройте терминал в корневом каталоге этого проекта и запустите сервер python.

python run.py

Если все работает правильно, вам будет предоставлен адрес http://127.0.0.1:5000/, который вы можете открыть в своем любимом браузере и увидеть, как наше приложение работает и отображает сообщение «Hello React!»

Вот и все. Вы только что создали свое базовое полнофункциональное приложение.

Спасибо за ваше время, я буду обновлять эту статью соответствующим образом. Вы можете внести свой вклад, комментируя, предлагая и делясь этой статьей, чтобы мы вместе могли обучать мир.

Кроме того, если вам понравилась эта статья, вы можете продолжить обучение, следуя продолжению этой статьи здесь, где мы увидим, как сделать наше веб-приложение компонентно-ориентированным и ориентированным на данные -приводной

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