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="{"name":"John"}"></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 является важной вехой в веб-разработке, и он может стать важным инструментом в любой коллекции разработчика. Не отставайте.
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post