Інтеграція React з різними мовами програмування

React – JS-бібліотека, що реалізує створення компонентів в frontend-додатках. Вона може бути інтегрована в любий додаток, що використовує HTML та JavaScript.

React реалізує лише частину архітектури MVC (Model-View-Controller), а саме "View", що дозволяє обрати решту стеку технологій за вашим смаком.

І тому якщо вас приваблює система JSX-компонентів, віртуальний DOM та дуже швидкий рендеринг, і ви хочете інтегрувати їх в свій існуючий проект — ви можете зробити це, використовуючи велику кількість open-source-інструментів.

PHP

Так як PHP - серверна мова, інтегрувати React можна декількома шляхами:

• Використовуючи react-php-v8js

• Серверна обробка маршрутизації запитів та відповідей (з маршрутизатором, наприклад, Alto)

• Вивід JSON за допомогою json_encode()

• Шаблонізація (наприклад, Twig)

Серверний рендеринг

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

З нею, наприклад, можна робити таке:

setComponent('MyComponent', array(
  'any'   =>  1,
  'props' =>  2
  )
);
 
// вивід відрендериного компоненту
echo '<div>' . $rjs->getMarkup() . '</div>';
 
// Завантаження решти JS
// включаючи react.js та custom/components.js
 
// Ініціалізація клієнта
echo '<script>' . $rjs->getJS("#here") . '</script>'; 
 
// повторення setComponent(), getMarkup(), getJS() для рендера решти компонентів

Вигода від поєднання React з серверною мовою програмування полягає в тому, що ви можете передавати в React дані, а бізнес-логіку тримати на сервері.

Використання PHP + Alto

Для прикладу базового додатку, погляньте на цей репозитарій.

Сконфігуруйте AltoRouter:

map('GET', '/', $viewPath . 'reactjs.html', 'reactjs');
 
$result = $viewPath . '404.php';
 
$match = $router->match();
if($match) {
    $result = $match['target'];
}
 
// Повернення співпадаючого маршруту 
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 та помістили компонент в тег body, наприклад:

  
    <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>
  
  
    <div></div>
    <script src="assets/js/main.js" type="text/jsx;harmony=true"></script>
  

Для користувачів Laravel

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

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

Опція prerender вказує, що компонент повинен бути відрендерений на сервері, а до клієнта потрапити у вигляді готової розмітки.

Приклад Laravel 5.2 + React

Для кращого прикладу можете переглянути цей репозитарій, що ілюструє роботу зв'язки Laravel + React.

.NET

Фреймворк ReactJS.NET дозволяє з легкістю додати React в .NET-додаток. Встановити його до вашої Visual Studio можна використовуючи менеджер пакетів NuGET.

Знайти пакет можна за запитом "ReactJS.NET (MVC 4 and 5)". Після інсталяції ви зможете використовувати .jsx-розширення в вашому asp.net-додатку.

Додайте новий контроллер до вашого проекту, серед шаблонів оберіть "Empty MVC Controller". Після його створення натисніть ПКМ по return View() та додайте новий view з наступними параметрами:

• View name: Index
• View Engine: Razor (CSHTML)
• Create a strongly-typed view: Unticked
• Create as a partial view: Unticked
• Use a layout or master page: Unticked

Тепер ви можете замінити стандартний код на наступний:

@{
    Layout = null;
}


    <title>Hello React</title>


    <div></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 example.jsx")"="" scripts="" src="@Url.Content(" ~=""></script>

Тепер нам потрібно створити файл Example.jsx, що ми й зробимо. В нього ми запишемо наступний код:

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

Тепер, якщо ви запустите ваш додаток, то побачите компонент HelloWorld.

Ось тут можна знайти детальнішу інформацію.

Rails

Інтегрувати React в проект на Rails (3.2+) дуже просто. Майже всю роботу за вас виконає бібліотека "react-rails". Додамо її гем:

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_component('HelloMessage', name: 'John') %>

<div></div>

Ruby JSX

Babel вже включено в react-rails, тому сконфігурувати його можна прямо там:

config.react.jsx_transform_options = {
  blacklist: ['spec.functionName', 'validation.react', 'strict'], # стандартні опції
  optional: ["transformerName"],  # додаткові опції
  whitelist: ["useStrict"] # ще трошки опцій
}

Після інсталяції react-rails перезапустіть ваш сервер і кожен файл .js.jsx буде перетворено в пайплайн.

Для детальнішої інформації зазирніть до офіційної документації.

Python

Щоб встановити python-react, виконайте наступну команду:

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': 'https://web.archive.org/web/20230322085933/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'));
});

Це відрендерить компонент App з файлу imports/ui/App.jsx. Він може виглядати так:

import React, { Component } from 'react';
 
import Headline from './Headline.jsx';
 
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 headline="{headline}" key="{headline._id}">
    ));
  }
  
  render() {
    return (
      <div>
        <header>
          <h1>The latest headlines</h1>
        </header>
  
        <ul>
          {this.renderHeadlines()}
        </ul>
      </div>
    );
  }
}

Всередині Headline.jsx ми використовуємо такий код:

import React, { Component, PropTypes } from 'react';
  
export default class Headline extends Component {
  render() {
    return (
      <li>{this.props.headline.text}</li>
    );
  }
}
  
Headline.propTypes = {
  // наш headline обов'язковий
  headline: PropTypes.object.isRequired,
};

Meteor добре інтегрується з React і має офіційну документацію по цій темі.

Більше ніяких {{handlebars}}

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

Тому замість використання {{> TemplateName}} чи Template.templateName для хелперів і подій в вашому JS, ви повинні оголошувати все в ваших View-компонентах, що є дочірніми класами React.component.

Висновок

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

React базує UI на компонентах, що дозволяє більш ясно писати клієнтську логіку і дотримуватися чистоти коду. Він впроваджує єдину мову для написання інтерфейсу

React уніфікує ваш інтерфейс, а в великих та середніх проектах дозволяє повторно використовувати ваш код. Ви можете створити власну бібліотеку з компонентами та використовувати її будь-де.

Саме тому React класний інструмент, з яким потрібно хоча б бути знайомим.