В чем разница между React Native и React?

React:

React — это декларативная, эффективная и гибкая JavaScript библиотека для создания пользовательских интерфейсов.

React Native:

React Native позволяет вам создавать мобильные приложения, используя только JavaScript. Он использует тот же подход, что и React, позволяя вам составлять богатый мобильный интерфейс из декларативных компонентов. С React Native вы не разрабатываете «мобильное веб-приложение», «HTML5 приложение» или «гибридное приложение». Вы создаете настоящее мобильное приложение, которое неотличимо от приложения, созданного с использованием Objective-C или Java. React Native использует те же основные строительные блоки пользовательского интерфейса, что и обычные приложения для iOS и Android. Вы просто объединяете эти строительные блоки, используя JavaScript и React.

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

React Native легко комбинируется с компонентами, написанными на Objective-C, Java или Swift. Если вам нужно оптимизировать некоторые аспекты вашего приложения, просто перейдите к родному коду. Также легко создать часть вашего приложения на React Native и часть — непосредственно с использованием нативного кода. Так работает приложение Facebook.

Итак, по сути, React — это библиотека UI для отображения вашего веб-приложения, использующая JavaScript и JSX, а React Native — это дополнительная библиотека на основе React, позволяющая создавать нативные приложения для устройств iOS и Android.

Пример кода на React:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

Пример кода на React Native:

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

class WhyReactNativeIsSoGreat extends Component {
  render() {
    return (
      <View>
        <Text>
          Если вам нравится React в вебе, вам понравится React Native.
        </Text>
        <Text>
          Вы просто используете нативные компоненты, такие как 'View' и 'Text',
          вместо веб-компонентов, таких как 'div' и 'span'.
        </Text>
      </View>
    );
  }
}

Для получения дополнительной информации о React посетите их официальный сайт, созданный командой Facebook:

https://reactjs.org/

Для получения дополнительной информации о React Native посетите сайт React Native по следующей ссылке:

https://reactnative.dev/

ReactJS — это библиотека для создания иерархии UI-компонентов. Каждый компонент имеет состояние (state) и свойства (props). Данные передаются от родительских компонентов к дочерним через props. Состояние обновляется в родительском компоненте с помощью обработчиков событий.

React Native использует библиотеку React для создания компонентов мобильных приложений. React Native предоставляет базовый набор компонентов как для платформы iOS, так и для Android. Среди компонентов в React Native можно выделить Navigator, TabBar, Text, TextInput, View, ScrollView. Эти компоненты внутренне используют родные компоненты пользовательского интерфейса iOS UIKit и Android. Также React Native позволяет использовать NativeModules, что дает возможность использовать код, написанный на Objective-C для iOS и Java для Android, в рамках JavaScript.

Важно отметить, что React Native как фреймворк позволяет разрабатывать мобильные приложения с синтаксисом, похожим на HTML и CSS. Компоненты React Native фактически заменяют HTML в нативной разработке.

React-Native — это фреймворк для разработки приложений на Android и iOS, который делит 80% - 90% JavaScript кода.

В то время как React.js является родительской библиотекой JavaScript для разработки веб-приложений.

1. В React-Native вы часто используете теги, такие как <View> и <Text>, тогда как в React.js используются веб-HTML теги, такие как <div>, <h1>, <h2>, которые по сути являются синонимами в словаре веб/мобильной разработки.
2. Для React.js вам нужен DOM для рендеринга HTML тегов, в то время как для мобильного приложения React-Native использует AppRegistry для регистрации вашего приложения.

Надеюсь, это простое объяснение поможет быстро понять основные различия и сходства между React.js и React-Native.

Мы не можем точно сравнить их, так как существуют различия в области применения.

(Обновление 2018 года)

ReactJS

React в первую очередь ориентирован на Веб-разработку.

1. • Виртуальный DOM React работает быстрее, чем традиционная модель полной перезагрузки, поскольку виртуальный DOM обновляет только части страницы.
2. • Вы можете повторно использовать кодовые компоненты в React, что экономит вам много времени. (Это также возможно в React Native.)
3. • В плане бизнеса: Полное рендеринг ваших страниц, от сервера до браузера, улучшит SEO вашего веб-приложения.
4. • Это увеличивает скорость отладки, что упрощает жизнь разработчикам.
5. • Вы можете использовать гибридную разработку мобильных приложений, такие как Cordova или Ionic, для создания мобильных приложений с использованием React, но более эффективно создавать мобильные приложения с помощью React Native по многим параметрам.

React Native

Расширение React, сфокусированное на Мобильной разработке.

1. • Его основное внимание уделено Мобильным пользовательским интерфейсам.
2. • Поддерживаются iOS и Android.
3. • Повторно используемые компоненты и модули пользовательского интерфейса React Native позволяют гибридным приложениям рендериться нативно.
4. • Нет необходимости полностью перерабатывать ваше старое приложение. Все, что вам нужно сделать, это добавить компоненты пользовательского интерфейса React Native в существующий код вашего приложения, без необходимости переписывать.
5. • Не использует HTML для рендеринга приложения. Предоставляет альтернативные компоненты, которые работают аналогично, так что вам не будет сложно их понять.
6. • Поскольку ваш код не рендерится на HTML-странице, это также означает, что вы не сможете переиспользовать любые библиотеки, которые вы ранее использовали с React, которые рендерят любой вид HTML, SVG или Canvas.
7. • React Native не построен из веб-элементов и не может быть стилизован тем же образом. Прощай, CSS-анимации!

Надеюсь, я помог вам 😃

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

1. React Native имеет отдельный набор тегов для определения пользовательского интерфейса для мобильных устройств, но оба используют JSX для определения компонентов.
2. Основная цель обеих систем — разработка переиспользуемых UI-компонентов и снижение усилий на разработку за счет их композиции.
3. Если вы правильно планируете и структурируете код, вы можете использовать одну и ту же бизнес-логику как для мобильных, так и для веб-приложений.

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