Преодоление реакции с другими популярными языками Интернета

« `

Ruby JSX

Babel находится в основе Ruby-реализации gem react-rails и может быть настроен следующим образом:

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

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

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

питон

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

bash pip install react

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

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

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

bash node render_server.js

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

bash python app.py

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

Джанго

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

« `bash INSTALLED_APPS = (#… ‘реагировать’,)

REACT = {‘RENDER’: не DEBUG, ‘RENDER_URL’: ‘http://127.0.0.1:8001/render’,}

« `

метеор

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

bash meteor npm install --save react react-dom

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

« `bash import React from ‘реагировать’; импортировать {Метеор} из ‘Метеор / Метеор’; import {render} из ‘response-dom’;

импортировать приложение из ‘../imports/ui/App.jsx’;

Meteor.startup (() => {render ( , document.getElementById (‘render-target’)); }); « `

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

« `bash import React, {Component} из ‘response’;

импортировать заголовок из ./Headline.jsx;

// Компонент App — представляет весь класс экспорта приложения по умолчанию. Приложение extends Component {getHeadlines () {return [{_id: 1, text: ‘Легализация медицинской марихуаны идет по всему миру!’ }, {_id: 2, текст: «Мэтт Браун входит в культ саентологии»}, {_id: 3, текст: «Глубокая паутина: мечта преступников или завораживающая свобода?» },]; }

renderHeadlines () {вернуть this.getHeadlines (). map ((заголовок) => (<ключ заголовка = {headline._id} заголовок = {заголовок} />)); }

render () {return (<div className = «container»> <header> <h1> Последние заголовки </ h1> </ header>

  <UL>
       {this.renderHeadlines ()}
     </ UL>
   </ DIV>
 );  }} `` `

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

« `обычный импорт React, {Component, PropTypes} из ‘реакции’;

// Компонент заголовка — в нем будет отображаться отдельный заголовок новости из класса экспорта по умолчанию для повторного массива. Заголовок extends Component {render () {return (<li> {this.props.headline.text} </ li>); }}

Headline.propTypes = {// Этот компонент получает заголовок для отображения через объект React. // Мы можем использовать propTypes, чтобы указать, что требуется заголовок: PropTypes.object.isRequired,}; « `

Meteor готов к React и имеет официальную документацию .

Больше нет {{handlebars}}

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

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

Вывод

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

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

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

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

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