Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React
Code

Связываем React с другими популярными веб-языками

by
Difficulty:IntermediateLength:MediumLanguages:

Russian (Pусский) translation by Ilya Nikov (you can also view the original English article)

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

Поскольку React работает как часть «V» в «MVC», мы можем создать наш собственный стек приложения исходя из наших собственных предпочтений. До сих пор в этом руководстве мы видели, что React работает с Express, фреймворке Node ES6/JavaScript. Другие популярные связки Node для React - это фреймворк Meteor и Facebook Relay.

Если вы хотите использовать превосходную компонентную JSX-систему от React, виртуальный DOM и его сверхбыстрый рендеринг в вашем существующем проекте, вы можете сделать это, реализовав одно из многих решений с открытым исходным кодом.

PHP

Поскольку PHP является серверным языком сценариев, интеграция с React может осуществляться в нескольких формах:

  • Использование react-php-v8js
  • Обработка запроса/ответа на стороне сервера (с маршрутизатором, например, Alto)
  • Вывод JSON через json_encode()
  • Обертка шаблонов, например Twig

Рендеринг на стороне сервера

Для рендеринга компонентов React на сервере есть библиотека, доступная в GitHub.

Например, с этим пакетом мы можем сделать следующее в PHP:

Сила объединения React с любым языком сценариев на стороне сервера - это способность подавать React с данными и применять вашу бизнес-логику как на сервере, так и на стороне клиента. Обновление старого приложения в Reactive приложение никогда еще не было проще!

Использование PHP + Alto Router

Для примера приложения, посмотрите этот репозиторий на GitHub.

Настройте свой AltoRouter следующим образом:

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

JavaScript:

Убедитесь, что вы включили библиотеки React, а также поместите HTML-код в тег body, который будет обрабатываться из вашего приложения PHP AltoRouter, например:

Пользователи Laravel

Для очень популярного фреймворка Laravel существует библиотека react-laravel, которая позволяет использоваться React.js прямо внутри ваших представлений Blade.

Например:

Флаг prerender сообщает Laravel о том, чтобы отобразить компонент на стороне сервера, а затем смонтировать его на стороне клиента.

Пример приложения Laravel 5.2 + React

Обратите внимание на этот замечательный репозиторий от Spharian в качестве примера использования Laravel + React.

Чтобы отрендерить ваш React код внутри вашего Laravel, установите источник файлов React внутри тега body index.blade.php, добавив следующие, например:

.NET

Используя фреймворк ReactJS.NET, вы можете легко подключить React в своем приложении .NET.

Установите пакет ReactJS.NET в среду разработки Visual Studio с помощью диспетчера пакетов NuGET для .NET.

Найдите доступные пакеты для «ReactJS.NET (MVC 4 и 5)» и проведите установку. Теперь вы сможете использовать любой код расширения .jsx в своем приложении asp.net.

Добавьте новый контроллер в свой проект, чтобы начать работу с React + .NET, и выберите «Empty MVC Controller» для вашего шаблона. После его создания щелкните правой кнопкой мыши на return View() и добавьте новое представление со следующими данными:

  • Название: Index
  • Движок: Razor (CSHTML)
  • Создание строго типизированного представления: Unticked
  • Создать как частичный вид: Unticked
  • Использовать макет или главную страницу: Unticked

Теперь вы можете заменить код по умолчанию следующим:

Теперь нам нужно создать Example.jsx, упомянутый выше, поэтому создайте файл в своем проекте и добавьте в него JSX следующим образом:

Теперь, если вы нажмете Play в своей среде Visual Studio IDE, вы должны увидеть пример Hello World.

Вот подробное руководство по написанию компонента для asp.net.

Rails

Используя react-rails, вы можете легко добавить React в любое приложение Rails (3.2+). Чтобы начать, просто добавьте gem:

И установите:

Теперь вы можете запустить скрипт установки:

Это приведет к двум вещам:

  • Файл манифеста components.js в app/assets/javascripts/components/; Вот где вы поместите все свои компоненты.
  • Добавьте следующее в application.js:

Теперь .jsx-код будет рендеринться, и вы можете добавить блок React к вашему шаблону, например так:

Ruby JSX

Babel лежит в основе реализации Ruby react-rails gem и может быть сконфигурирован так:

После того, как react-rails будет включен в проект, перезапустите сервер, и любые файлы .js.jsx будут преобразованы в ваши ресурсы.

Для получения дополнительной информации о react-rails обратитесь к официальной документации.

Python

Чтобы установить python-react, используйте pip:

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

Чтобы запустить сервер рендеринга, следуйте этому краткому руководству.

Теперь вы можете запустить свой сервер так:

Запустите приложение python:

И загрузите http://127.0.0.1:5000 в браузере, чтобы увидеть рендеринг кода React.

Django

Добавьте react в ваш INSTALLED_APPS и укажите некоторую конфигурацию следующим образом:

Meteor

Чтобы добавить React в проект meteor, сделайте это через:

Затем в client/main.jsx добавьте следующие, например:

Это создает экземпляр React компонента App, который вы определите в import/ui/App.jsx, например:

Внутри Headline.jsx вы используете следующий код:

Метеор готов к использованию совместно с React и имеет официальную документацию.

Больше никаких {{ скобок }}

Важно отметить: при использовании Meteor с React система шаблонов по умолчанию {{handlebars}} больше не используется, поскольку она перестает работать из-за того, что в проекте присутствует React.

Поэтому вместо использования {{> TemplateName}} или Template.templateName для помощников и событий в вашем JS вы определите все в компонентах View, которые являются подклассами React.component.

Вывод

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

React реализует слой UI View на основе компонентов. Работая логически с любым стеком, мы имеем универсальный язык интерфейса, который могут использовать дизайнеры во всех аспектах веб-разработки.

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

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

React является важной вехой в веб-разработке, и он может стать важным инструментом в любой коллекции разработчика. Не отставайте.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.