Различные CMS

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

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 является важной вехой в веб-разработке, и он может стать важным инструментом в любой коллекции разработчика. Не отставайте.

Источник: code.tutsplus.com

Похожие записи

Загрузка ....