React native использует собственные представления UIView, Text и т.д. для отображения. У вас не может быть такой же базы кода для них. React native использует flex box (у него есть своя реализация), так что также не будет работать для веб-проектов.

Единственный способ - сохранить их отдельно. Также веб-приложение и приложение будут иметь разный дизайн.

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

Я знаю, что это может быть поздний ответ, но он будет полезен в будущем. Проверьте https://github.com/este/este, у него разные стеки для мобильных, веб-и серверов. Вы можете использовать общие компоненты в общей папке. Он использует firebase в качестве backend-сервиса, но вы можете переключиться на любую службу.

Прямо сейчас вы не можете делиться базой кода b/w. Реагировать на Native/React коды, поскольку каждый использует собственный код пользовательского интерфейса и другой html DOM. Существует интересный проект по объединению двух (https://github.com/necolas/react-native-web), но это отнюдь не готово к производству.

Хотя это правда, вы не можете использовать тот же самый код для реагирования на родной и реагировать на JS, вы можете архитектовать свою базу кода для повторного использования как можно большего количества кода. Посмотрите этот проект:

https://github.com/benoitvallon/react-native-nw-react-calculator

React Native полагается на собственный код пользовательского интерфейса, а не на html, что означает, что все компоненты просмотра должны быть перезаписаны. Однако, если вы сохраните все свои логические соображения из ваших "немых" функциональных компонентов в своем веб-приложении, вы сможете повторно использовать значительную часть своего веб-кода.

Например, у вас может быть внешний контейнер, который обрабатывает все, что вы хотите, на mount with componentDidMount, обрабатывает и определяет onClicks и определяет, какие компоненты представления визуализируются. Этот код может быть точно таким же, как в Интернете, так и в мобильном телефоне, а затем ваши "немые" функции представления компонентов будут отличаться тем, что в нем используются собственные элементы вида, а другой - HTML.

Фактически вы можете использовать тот же код с использованием WebView компонента в React-Native.

Вот ссылка: https://facebook.github.io/react-native/docs/webview.html

Вы можете поделиться большей частью своего кода между React и React Native (особенно если вы используете react-native-web.

Попробуйте эту статью: http://jkaufman.io/react-web-native-codesharing/ Это дает довольно аккуратный пример того, как это сделать.

Я настоятельно рекомендую вам хранить большую часть вашей логики домена (API-вызовы, поток и даже Smart-компонент для обработки логики) и переписывать немые компоненты, обрабатывающие представление, чтобы вы могли реализовать лучший UX для настольных или мобильных устройств.

Вы можете назвать свои файлы с немым компонентом так:

MyComponent.js(для вашего веб-приложения) MyComponent.native.js(для вашего собственного приложения) или MyComponent.ios.js и MyComponent.android.js, если у вас есть разные представления в соответствии с платформой.

Я предлагаю вам взглянуть на архитектуру Redux.

Вероятно, вы получите следующую архитектуру папок:

.
└── src
    ├── actions
    ├── components
    ├── containers
    └── reducers

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

Вся логика и даже организация могут использоваться повторно.

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

Другие примеры сокращения https://github.com/reactjs/redux/tree/master/examples

Чтобы ответить на второй вопрос: Redux - это менеджер состояния (данных). Он протекает однонаправленно.

Например, как обращаться с кликом пользователя?

• Событие запускается из компонента
• Контейнер (который содержит логику) отправляет действие (скажем BUTTON_CLICK)
• Редукторы получают BUTTON_CLICK с текущим состоянием, только соответствующие будут обновлять состояние приложения (например: увеличивать счетчик)
• Когда состояние обновляется, дерево рендеринга запускается

Вот полное объяснение потока редукции https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6#.z0bcil3i0

Чтобы лучше понять, почему этот беспорядок потрясающий, прочитайте это http://redux.js.org/

Я определенно думаю, что вы можете повторно использовать часть своего кода. Если вы используете сокращение, которое вы, вероятно, будете иметь, если у вас есть какая-то сложность - такие вещи, как действия и редукторы, легко можно повторно использовать. В то время как компоненты пользовательского интерфейса сами по себе не используются повторно, вы можете повторно использовать некоторые элементы, поддерживающие его. Как упоминалось в timvp, вы также можете использовать WebView для повторного использования кода, но я бы не рекомендовал, так как он не имеет такой же производительности, как и встроенные модули.

Код для веб-приложения и родных приложений не может быть одинаковым (или вам может быть хорошо с WebView wrapper как приложения). Полагаю, вы спрашиваете, потому что функциональность будет одинаковой для обоих интерфейсов. Внешний вид может быть (почти) одинаковым.

Если вы видите свои приложения только как виды, бэкэнд (контроллеры и модели) можно разделить на несколько платформ. Вы также можете попробовать Backend как услугу, например Firebrand или Parse. На самом деле это не ответ на часть редукса, но это простой способ получить удар.

Интересно, почему никто не упоминает ReactXP. ReactXP - это библиотека, поддерживаемая Microsoft, которая позволяет создавать веб, ios, andoid и windows приложения с помощью React:

XP означает X-Platform. Делитесь большей частью своего кода между Интернетом, iOS, Android и Windows.

https://microsoft.github.io/reactxp/

Другие варианты, как упоминалось,

• https://github.com/necolas/react-native-web
• https://github.com/este/este

Короткий ответ:

YES!...

React Native создается для кодирования приложения с использованием некоторых функций React, тогда как React создается для веб-приложений и веб-приложений, поэтому они имеют сходство в природе, синтаксисы и библиотеку, которая используется как. Поэтому в основном вам нужно переписать некоторые части вашего приложения, я могу сказать около 20% до 70% процентов, и это действительно зависит.

Я сравниваю React Native и React с некоторыми образцами кода из обоих для небольшого компонента, вы можете проверить различия, но просто дайте знать, для реального приложения, разница может быть намного больше, чем то, что вы видите здесь:

React Native

React Native позволяет создавать мобильные приложения только с помощью JavaScript. Он использует тот же дизайн, что и "Реакт", позволяя вам составить богатый мобильный пользовательский интерфейс от декларативных компонентов.

import React, { Component } from 'react';
import { Text, View } from 'react-native';

class WhyReactNativeIsSoGreat extends Component {
  render() {
    return (
      <View>
        <Text>
          If you like React on the web, you'll like React Native.
        </Text>
        <Text>
          You just use native components like 'View' and 'Text',
          instead of web components like 'div' and 'span'.
        </Text>
      </View>
    );
  }
}

подробнее здесь

Реагировать

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

Декларативные представления делают ваш код более предсказуемым и легче отлаживают.

import React, { Component } from 'react';

class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        <p>If you like React Native on the devices, you'll like React.</p>
        <p>You just use web components like 'div' and 'span',
         instead of native components like 'View' and 'Text'.</p>
      </div>
      );
   }
}

ReactDOM.render(<HelloMessage name="Jane" />, mountNode);

подробнее здесь

Я пытаюсь сделать то же самое. RN не все равно с React, вам придется иметь дело с собственными представлениями типа: Text, View, ScrollView, ListView и т.д. Кроме этого, они почти одинаковы.

Итак, вы можете упорядочить свой код следующим образом:    root src lib // code for all other three platform android // code for android only ios // code for ios only web // code for web only index.js //for web index.ios.js // for ios index.android.js // for android


React Native предназначен только для приложений, он генерирует полностью собственные компоненты, а React Native имеет специфический синтаксис для своих компонентов. Использование некоторого пакета для преобразования React Native code base в сеть не стоило бы того, поскольку вы были бы ограничены, и вы идете против React Native flow, это будет то же самое, что конвертировать Swift или Java-приложение в приложение через веб-интерфейс. Это не является оптимальным и ограниченным.

Это красота, которую вы изучаете javascript, и с помощью React (или любой другой библиотеки/рамки по вашему выбору) вы пишете наилучшее возможное веб-приложение с веб-опытом, в то же время используя свои знания в JS, вы можете доставить полностью родные опыт в ваших приложениях.

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