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

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:

<?php
// the library
$react_source = file_get_contents('/path/to/build/react.js');
// all custom code concatenated
$app_source = file_get_contents('/path/to/custom/components.js');

$rjs = new ReactJS($react_source, $app_source);
$rjs->setComponent('MyComponent', array(
  'any'   =>  1,
  'props' =>  2
  )
);

// print rendered markup
echo '<div id="here">' . $rjs->getMarkup() . '</div>';

// load JavaScript somehow - concatenated, from CDN, etc
// including react.js and custom/components.js

// init client
echo '<script>' . $rjs->getJS("#here") . '</script>'; 

// repeat setComponent(), getMarkup(), getJS() as necessary
// to render more components

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

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

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

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

<?php
// Router setup
require_once 'include/AltoRouter/AltoRouter.php';
$router = new AltoRouter();
$viewPath = 'views/';

// Router matches
//---
// Manual
$router->map('GET', '/', $viewPath . 'reactjs.html', 'reactjs');

$result = $viewPath . '404.php';

$match = $router->match();
if($match) {
  $result = $match['target'];
}

// Return route match 
include $result;

?>

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

JavaScript:

"use strict";

var Comment = React.createClass({
  displayName: "Comment",

  render: function render() {
    var rawMarkup = marked(this.props.children.toString(), { sanitize: true });
    return React.createElement(
      "div",
      { className: "comment" },
      React.createElement(
        "h2",
        { className: "commentAuthor" },
        this.props.author
      ),
      React.createElement("span", { dangerouslySetInnerHTML: { __html: rawMarkup } })
    );
  }
});

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

<!DOCTYPE html>
<html>
  <head>
    <title>React Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/JSXTransformer.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
  </head>
  <body>
    <div id="myContent"></div>
    <script type="text/jsx;harmony=true" src="assets/js/main.js"></script>
  </body>
</html>

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

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

Например:

@react_component('Message', [ 'title' => 'Hello, World' ], [ 'prerender' => true ])

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

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

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

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

<script src="{{ asset('js/my-react-code.js') }}"></script>

.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

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

@{
    Layout = null;
}
<html>
<head>
    <title>Hello React</title>
</head>
<body>
    <div id="content"></div>
    <script src="https://fb.me/react-15.0.1.js"></script>
    <script src="https://fb.me/react-dom-15.0.1.js"></script>
    <script src="@Url.Content("~/Scripts/Example.jsx")"></script>
</body>
</html>

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

var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        Hello, world! I am a CommentBox.
      </div>
    );
  }
});
ReactDOM.render(
  <CommentBox />,
  document.getElementById('content')
);

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

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

Rails

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

gem 'react-rails', '~> 1.7.0'

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

bundle install

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

rails g react:install

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

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

//= require react
//= require react_ujs
//= require components

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

<%= react_component('HelloMessage', name: 'John') %>
<!-- becomes: -->
<div data-react-class="HelloMessage" data-react-props="{&quot;name&quot;:&quot;John&quot;}"></div>

Ruby JSX

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

config.react.jsx_transform_options = {
  blacklist: ['spec.functionName', 'validation.react', 'strict'], # default options
  optional: ["transformerName"],  # pass extra babel options
  whitelist: ["useStrict"] # even more options
}

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

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

Python

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

pip install react

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

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

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

node render_server.js

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

python app.py

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

Django

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

INSTALLED_APPS = (
    # ...
    'react',
)

REACT = {
    'RENDER': not DEBUG,
    'RENDER_URL': 'http://127.0.0.1:8001/render',
}

Meteor

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

meteor npm install --save react react-dom

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

import React from 'react';
import { Meteor } from 'meteor/meteor';
import { render } from 'react-dom';
 
import App from '../imports/ui/App.jsx';
 
Meteor.startup(() => {
  render(<App />, document.getElementById('render-target'));
});

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

import React, { Component } from 'react';

import Headline from './Headline.jsx';

// The App component - represents the whole app
export default class App extends Component {
  getHeadlines() {
    return [
      { _id: 1, text: 'Legalisation of medical marijuana goes worldwide!' },
      { _id: 2, text: 'Matt Brown goes inside the cult of scientology' },
      { _id: 3, text: 'The deep web: A criminals dream or fascinating freedom?' },
    ];
  }
 
  renderHeadlines() {
    return this.getHeadlines().map((headline) => (
      <Headline key={headline._id} headline={headline} />
    ));
  }
 
  render() {
    return (
      <div className="container">
        <header>
          <h1>The latest headlines</h1>
        </header>
 
        <ul>
          {this.renderHeadlines()}
        </ul>
      </div>
    );
  }
}

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

import React, { Component, PropTypes } from 'react';
 
// Headline component - this will display a single news headline item from a iterated array
export default class Headline extends Component {
  render() {
    return (
      <li>{this.props.headline.text}</li>
    );
  }
}
 
Headline.propTypes = {
  // This component gets the headline to display through a React prop.
  // We can use propTypes to indicate it is required
  headline: PropTypes.object.isRequired,
};

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

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

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

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

Вывод

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

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

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

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

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