호기심으로 React 를 배우기 시작했고 React와 React Native의 차이점을 알고 싶었지만 Google을 사용하여 만족스러운 답변을 찾을 수 없었습니다. React와 React Native는 같은 형식 인 것 같습니다. 그것들은 완전히 다른 문법을 가지고 있습니까?

ReactJS 는 사용자 인터페이스 및 웹 애플리케이션 구축을 위해 프론트 엔드 웹과 서버에서 실행되는 것을 지원하는 JavaScript 라이브러리입니다.

React Native 는 기본 앱 구성 요소로 컴파일되는 모바일 프레임 워크로, ReactJS를 사용하여 구성 요소를 빌드하고 ReactJS를 구현할 수있는 JavaScript로 다양한 플랫폼 (iOS, Android 및 Windows Mobile)에 대한 기본 모바일 애플리케이션을 빌드 할 수 있습니다. 후드.

둘 다 JavaScript에 대한 JSX 구문 확장을 따릅니다.

둘 다 Facebook에 의해 공개 소스입니다.

다음은 React 프로젝트 입니다.

Facebook에서 React 를 개발 하여 JavaScript가 가상 DOM 모델을 사용하여 웹 사이트 DOM을 더 빠르게 조작 할 수 있습니다.

DOM 전체 새로 고침은 React virtual-dom 모델 과 비교하여 속도가 느려서 페이지의 일부만 새로 고칩니다 (읽기 : 부분 새로 고침).

이 비디오 에서 알 수 있듯이 Facebook은 부분 새로 고침이 기존의 것보다 빠르다는 것을 즉시 이해했기 때문에 React를 발명하지 않았습니다. 원래 그들은 페이스 북 애플리케이션의 재 구축 시간을 단축 할 수있는 방법이 필요했고 운 좋게도 부분적인 DOM 리프레쉬에 생명을 불어 넣었다.

반응 네이티브 는 반응 의 결과입니다. JavaScript를 사용하여 기본 앱을 빌드하는 플랫폼입니다.

React native 이전에는 기본 앱을 작성하기 위해 Java for Android 또는 iPhone 및 iPad 용 Objective-C를 알아야했습니다.

React Native를 사용하면 JavaScript에서 기본 앱의 동작을 모방 할 수 있으며 결국 플랫폼 별 코드를 출력으로 얻게됩니다. 응용 프로그램을 더 최적화해야하는 경우 기본 코드 와 JavaScript를 혼합 할 수도 있습니다 .

비디오 에서 Olivia Bishop이 말했듯 이 React 네이티브 코드베이스 의 85 %가 플랫폼간에 공유 될 수 있습니다. 이들은 일반적으로 응용 프로그램에서 사용하는 구성 요소와 공통 논리입니다.

코드의 15 %는 플랫폼에 따라 다릅니다. 플랫폼 별 JavaScript는 플랫폼의 풍미를 제공하고 경험을 변화시킵니다.

멋진 점은이 플랫폼 별 코드입니다. 이미 작성되었으므로 사용하면됩니다.

반응 :

React는 사용자 인터페이스를 구축하기위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리입니다.

네이티브 반응 :

React Native를 사용하면 JavaScript 만 사용하여 모바일 앱을 빌드 할 수 있습니다. React와 동일한 디자인을 사용하여 선언적 구성 요소에서 풍부한 모바일 UI를 작성할 수 있습니다.
React Native를 사용하면 "모바일 웹 앱", "HTML5 앱"또는 "하이브리드 앱"을 빌드하지 않습니다. Objective-C 또는 Java를 사용하여 빌드 된 앱과 구별 할 수없는 실제 모바일 앱을 빌드합니다. React Native는 일반 iOS 및 Android 앱과 동일한 기본 UI 빌딩 블록을 사용합니다. JavaScript와 React를 사용하여 이러한 구성 요소를 결합하면됩니다.
React Native를 사용하면 앱을 더 빠르게 구축 할 수 있습니다. 다시 컴파일하는 대신 앱을 즉시 다시로드 할 수 있습니다. 핫 리로딩을 사용하면 애플리케이션 상태를 유지하면서 새 코드를 실행할 수도 있습니다. 시도해보십시오-그것은 마술 같은 경험입니다.
React Native는 Objective-C, Java 또는 Swift로 작성된 구성 요소와 자연스럽게 결합됩니다. 애플리케이션의 몇 가지 측면을 최적화해야하는 경우 기본 코드로 간단하게 드롭 다운 할 수 있습니다. 또한 React Native에서 앱의 일부와 네이티브 코드를 사용하여 앱의 일부를 쉽게 빌드 할 수 있습니다. Facebook 앱이 작동하는 방식입니다.

기본적으로 React 는 javascript 와 JSX를 사용하여 웹 앱을 볼 수있는 UI 라이브러리 이며 React native 는 React 상단에 추가 라이브러리 iOS이며 Android장치 및 장치에 대한 기본 앱을 만듭니다 .

반응 코드 샘플 :

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')
);

네이티브 코드 샘플 반응 :

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에 대한 자세한 내용은 페이스 북 팀이 만든 공식 웹 사이트를 방문하십시오.

https://facebook.github.io/react

React Native 에 대한 자세한 내용은 아래 React native 웹 사이트를 방문하십시오.

https://facebook.github.io/react-native

ReactJS는 UI 구성 요소의 계층 구조를 작성하기위한 프레임 워크입니다. 각 구성 요소에는 상태 및 소품이 있습니다. 소품을 통해 데이터가 최상위 구성 요소에서 하위 구성 요소로 흐릅니다. 상태는 이벤트 핸들러를 사용하여 최상위 컴포넌트에서 업데이트됩니다.

React native는 React 프레임 워크를 사용하여 모바일 앱용 컴포넌트를 빌드합니다. React native는 iOS 및 Android 플랫폼 모두에 대한 기본 구성 요소 세트를 제공합니다. React Native의 일부 구성 요소는 네비게이터, TabBar, 텍스트, TextInput,보기, ScrollView입니다. 이러한 구성 요소는 기본 iOS UIKit 및 Android UI 구성 요소를 내부적으로 사용합니다. React native는 ObjectiveC for iOS 및 Java for Android로 작성된 코드를 JavaScript 내에서 사용할 수있는 NativeModules를 허용합니다.

첫째, 유사점 : React & React Native (RN)는 유연한 사용자 인터페이스를 만들도록 설계되었습니다. 이러한 프레임 워크에는 많은 이점이 있지만 가장 근본적인 점은 UI 개발을 위해 만들어 졌다는 것입니다. Facebook은 React 후 몇 년 후에 RN을 개발했습니다.

반응 : 페이스 북이 프레임 워크는 거의 태그가 "라고 이유를 당신의 HTML / XML,의 자바 스크립트 내부를 작성처럼 될 수 있도록 설계 JSX "(자바 스크립트 XML)와 익숙한 HTML과 같은 같은 태그와 유사 <div>하거나 <p>. React의 특징은 <MyFancyNavbar />RN에 존재하는 등의 사용자 지정 구성 요소를 나타내는 대문자 문자 태그입니다 . 그러나 React는 DOM을 사용 합니다 . DOM은 HTML에 존재하므로 웹 개발에 React가 사용됩니다.

네이티브 반응 : RN은 HTML을 사용하지 않으므로 웹 개발에 사용되지 않습니다. 그것은 거의 다른 모든 것에 사용됩니다! 모바일 개발 (iOS 및 Android 모두), 스마트 기기 (예 : 시계, TV), 증강 현실 등. RN은 상호 작용할 DOM이 없으므로 React에 사용 된 것과 동일한 종류의 HTML 태그를 사용하는 대신 자체적으로 사용합니다. 그런 다음 다른 언어로 컴파일됩니다. 예를 들어, <div>RN 개발자 는 태그 대신 RN의 내장 <View>태그를 사용합니다.이 태그는 다른 기본 코드로 컴파일됩니다 (예 : android.viewAndroid 및 UIViewiOS).

요컨대, 그것들은 (UI 개발을 위해) 매우 유사하지만 다른 매체에 사용됩니다.

1. React-Native는 Javascript 코드의 80 %-90 %를 공유하는 Android 및 iOS 애플리케이션을 개발하기위한 프레임 워크입니다.

React.js는 웹 애플리케이션 개발을위한 상위 Javascript 라이브러리입니다.

2. 당신 같은 태그를 사용하지만 <View>, <Text>매우 자주으로 반응-네이티브, React.js 같은 웹 html 태그 사용 <div> <h1> <h2>전용 웹 / 모바일 개발의 사전 동의어입니다.

3. React.js의 경우 HTML 태그의 경로 렌더링을 위해 DOM이 필요하지만 모바일 애플리케이션의 경우 : React-Native는 AppRegistry를 사용하여 앱을 등록합니다.

React.js와 React-Native의 빠른 차이점 / 유사점에 대한 쉬운 설명이기를 바랍니다.

우리는 그것들을 정확하게 비교할 수 없습니다. 있습니다 유스 케이스의 차이는 .

(2018 년 업데이트)

반응 JS

리 액트는 웹 개발 의 주요 초점 이다.

1. • 가상 DOM은 페이지의 일부만 새로 고치기 때문에 React의 가상 DOM은 기존의 전체 새로 고침 모델보다 빠릅니다 .
2. • React에서 코드 구성 요소 를 재사용 하여 많은 시간을 절약 할 수 있습니다 . (React Native에서도 가능합니다.)
3. • 비즈니스로서 : 서버에서 브라우저까지 페이지를 완전히 렌더링 하면 웹앱의 SEO 가 향상됩니다 .
4. • 그것은 디버깅 속도 향상 개발자의 삶을 쉽게.
5. • Cordova 또는 Ionic과 같은 하이브리드 모바일 앱 개발을 사용하여 React로 모바일 앱을 빌드 할 수 있지만 React Native를 사용하여 모바일 앱을보다 효율적으로 구축하고 있습니다.

네이티브 반응

모바일 개발에 관심 이있는 React의 확장 .

1. • 주요 초점은 모바일 사용자 인터페이스 에 관한 것 입니다.
2. • iOS 및 Android 가 적용됩니다.
3. • 재사용 가능한 React Native UI 구성 요소 및 모듈을 사용하면 하이브리드 앱을 기본적으로 렌더링 할 수 있습니다.
4. • 기존 앱을 정밀 검사 할 필요가 없습니다. 당신이해야 할 모든입니다 추가는 기존 응용 프로그램의 코드에 기본 UI 구성 요소 반응 재 작성하지 않고.
5. • HTML을 사용하여 앱을 렌더링하지 않습니다 . 비슷한 방식으로 작동하는 대체 구성 요소를 제공하므로 이해하기 어렵지 않습니다.
6. • 코드가 HTML 페이지에서 렌더링되지 않기 때문에 이는 이전에 React 에서 사용한 모든 종류의 HTML, SVG 또는 Canvas를 렌더링하는 라이브러리를 재사용 할 수 없음을 의미합니다 .
7. • React Native는 웹 요소로 만들어지지 않았으며 같은 방식으로 스타일을 지정할 수 없습니다. 안녕히 CSS 애니메이션!

잘만되면 나는 당신을 도왔습니다 :)

간단히 말해서 React와 React native는 사용자 인터페이스를 디자인하는 경우를 제외하고 동일한 디자인 원칙을 따릅니다.

1. React native에는 모바일 사용자 인터페이스를 정의하기위한 별도의 태그 세트가 있지만 둘 다 컴포넌트 정의에 JSX를 사용합니다.
2. 두 시스템의 주요 목적은 재사용 가능한 UI 구성 요소를 개발하고 해당 구성으로 개발 노력을 줄이는 것입니다.
3. 코드를 올바르게 계획 및 구성하면 모바일 및 웹에 동일한 비즈니스 로직을 사용할 수 있습니다

어쨌든, 그것은 모바일과 웹을위한 사용자 인터페이스를 구축하는 훌륭한 라이브러리입니다.

React는 사용자 인터페이스를 구축하기위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리입니다. 컴포넌트는 React에 렌더링 할 대상을 알려줍니다. 그러면 React는 데이터가 변경 될 때 올바른 컴포넌트 만 효율적으로 업데이트하고 렌더링합니다. 여기서 ShoppingList는 React 구성 요소 클래스 또는 React 구성 요소 유형입니다.

React Native 앱은 실제 모바일 앱입니다. React Native를 사용하면 "모바일 웹 앱", "HTML5 앱"또는 "하이브리드 앱"을 구축하지 않습니다. Objective-C 또는 Java를 사용하여 빌드 된 앱과 구별 할 수없는 실제 모바일 앱을 빌드합니다. React Native는 일반 iOS 및 Android 앱과 동일한 기본 UI 빌딩 블록을 사용합니다.

더 많은 정보

ReactJS는 반응 형 패턴을 기반으로 격리 된 구성 요소를 구축하기위한 핵심 프레임 워크입니다. 반응 형이 VVC라고 생각할 수 있습니다. 반응 형이 반응 형에 익숙하지 않은 경우 반응이 다른 느낌을 준다고 말하고 싶습니다. .

ReactNative는 일반적인 Android 및 iOS 플랫폼 용 세트 구성 요소를 갖기위한 또 다른 계층입니다. 따라서 코드는 ReactJS이기 때문에 기본적으로 ReactJS와 동일하지만 모바일 플랫폼에서 기본적으로로드됩니다. 또한 OS에 따라 Java / Objective-C / Swift를 사용하여보다 복잡한 플랫폼 관련 API를 브리지하고 React 내에서 사용할 수 있습니다.

React Native 는 주로 JavaScript로 개발 되었으므로 시작하는 데 필요한 대부분의 코드를 플랫폼간에 공유 할 수 있습니다. React Native는 기본 구성 요소를 사용하여 렌더링합니다. React Native 앱은 대상 플랫폼, iOS 용 Objective-C 또는 Swift, Android 용 Java 등에 필요한 언어로 개발됩니다. 작성된 코드는 플랫폼간에 공유되지 않으며 동작은 다양합니다. 플랫폼에서 제공하는 모든 기능에 제한없이 직접 액세스 할 수 있습니다.

React 는 사용자 인터페이스 구축을 위해 Facebook에서 개발 한 오픈 소스 JavaScript 라이브러리입니다. 웹 및 모바일 앱의 뷰 레이어를 처리하는 데 사용됩니다. ReactJS는 재사용 가능한 UI 구성 요소를 만드는 데 사용되었습니다. 현재 it 필드에서 가장 인기있는 JavaScript 라이브러리 중 하나이며 강력한 기반과 그 뒤에 많은 커뮤니티가 있습니다 .ReactJS를 배우려면 JavaScript, HTML5 및 CSS에 대한 지식이 있어야합니다.

React 는 React Native 와 React DOM 의 기본 추상화 이므로 React Native를 사용하려면 웹과 동일한 React ...가 필요하지만 React Native 대신 React DOM이 필요합니다.

React가 기본 추상화이기 때문에 일반적인 구문과 워크 플로는 동일하지만 사용하는 구성 요소는 매우 다르므로 이러한 차이를 알아야합니다. 이는 React (소위 모토라고 함) 인 "React once writewhere"입니다. React (base abstraction)는 다른 프로그래밍 언어, 구문 및 워크 플로를 배우지 않고도 플랫폼 간의 차이점을 간단히 배울 수 있다는 것을 알고 있습니다.

React-Native는 프레임 워크입니다. 여기서 ReactJS는 웹 사이트에 사용할 수있는 자바 스크립트 라이브러리입니다.

React-native는 기본 핵심 구성 요소 (이미지, 텍스트)를 제공합니다. 여기서 React는 많은 구성 요소를 제공하고 함께 작동합니다.

React Js는 React를 사용하여 더 빠른 웹 애플리케이션을 개발하고 실행할 수있는 Javascript 라이브러리입니다.

React Native를 사용하면 JavaScript 만 사용하여 모바일 앱을 빌드 할 수 있으며 모바일 애플리케이션 개발에 사용됩니다. 자세한 정보는 여기 https://facebook.github.io/react-native/docs/getting-started.html

구성 요소 수명주기 및 다른 모든 종과 휘파람과 관련하여 대부분 동일합니다.

차이점은 주로 사용 된 JSX 마크 업입니다. React는 html과 유사한 것을 사용합니다. 다른 하나는 react-native가 뷰를 표시하는 데 사용하는 마크 업입니다.

React Native는 모바일 애플리케이션을위한 것이고 React는 웹 사이트 (프런트 엔드)를위한 것입니다. 둘 다 Facebook이 발명 한 프레임 워크입니다. React Native는 크로스 플랫폼 개발 프레임 워크로, IOS와 Android 모두에 대해 거의 동일한 코드를 작성할 수 있으며 작동합니다. 나는 개인적으로 React Native에 대해 훨씬 더 많이 알고 있으므로 이것을 남겨 둘 것입니다.

React Js는 HTML Dom으로 조작하고 있습니다. 그러나 React native는 mobile (iOS / android) native ui 구성 요소로 조작하고 있습니다.

ReactJS 는 웹 인터페이스를 구축하는 데 사용되는 자바 스크립트 라이브러리 입니다. webpack과 같은 번 들러가 필요하며 웹 사이트를 구축하는 데 필요한 모듈을 설치하십시오.

React Native 는 자바 스크립트 프레임 워크 이며 다중 플랫폼 앱 (iOS 또는 Android 등)을 작성하는 데 필요한 모든 것이 포함되어 있습니다. 앱을 빌드하고 배포하려면 xcode 및 android studio가 설치되어 있어야합니다.

ReactJS와 달리 React-Native는 HTML을 사용하지 않고 유사한 iOS 및 Android를 사용하여 앱을 빌드 할 수있는 유사한 구성 요소를 사용합니다. 이 컴포넌트는 실제 네이티브 컴포넌트를 사용하여 iOS 및 Android 앱을 빌드합니다. 이 React-Native 앱으로 인해 다른 하이브리드 개발 플랫폼과 달리 실제 느낌이 듭니다. 구성 요소는 iOS 및 Android에서 동일한 사용자 인터페이스를 다시 만들 필요가 없으므로 코드의 재사용 성을 향상시킵니다.

간단히 말해서 ReactJS는 호스트 환경 (브라우저, 모바일, 서버, 데스크탑 등)에 따라 렌더링 할 것을 반환하는 부모 라이브러리입니다. 렌더링 외에도 수명주기 후크 등과 같은 다른 방법도 제공합니다.

브라우저에서 다른 라이브러리 react-dom을 사용하여 DOM 요소를 렌더링합니다. 모바일에서는 React-Native 컴포넌트를 사용하여 플랫폼 고유 (IOS 및 Android) 고유 UI 컴포넌트를 렌더링합니다. 그래서,

반응 + 반응-돔 = 웹 개발

반응 + 반응 네이티브 = 모바일 개발

REACT 는 Facebook과 같은 크고 작은 인터페이스 웹 응용 프로그램을 빌드하는 Javascript 라이브러리입니다.

REACT NATIVE 는 Android, IOS 및 Windows Phone에서 기본 모바일 애플리케이션을 개발하기위한 Javascript 프레임 워크입니다.

둘 다 페이스 북이 오픈 소스로 제공합니다.

내가 아는 차이점은 다음과 같습니다.

1. React Native는 React 대신 텍스트 처리에 사용합니다.
2. React Native는 일반 버튼 요소 대신 Touchable 컴포넌트를 사용하고 있습니다.
3. React Native에는 목록 렌더링을위한 ScrollView 및 FlatList 구성 요소가 있습니다.
4. React Native는 AsyncStorage를 사용하고 React는 로컬 스토리지를 사용합니다.
5. React Native 라우터는 스택으로 작동하지만 React에서는 경로 구성 요소를 사용하여 탐색을 매핑합니다.

요약 : 웹 개발 용 React.js와 모바일 앱 개발 용 React-Native

반응 JS

• React는 웹 사이트, 웹 앱, SPA 등을 만드는 데 사용됩니다.
• React는 UI 계층을 만드는 데 사용되는 Javascript 라이브러리입니다.
• UI 구성 요소의 렌더링을 담당하며 MVC 프레임 워크의 V 부분으로 간주됩니다.
• 가상 DOM은 페이지의 일부만 새로 고치므로 페이지 새로 고침 시간이 줄어들 기 때문에 React의 가상 DOM은 기존의 전체 새로 고침 모델보다 빠릅니다.
• React는 UI의 기본 단위로 컴포넌트를 사용하므로 재사용 할 수있어 코딩 시간이 절약됩니다. 간단하고 배우기 쉽다.

네이티브 반응

• React Native는 크로스 플랫폼 네이티브 앱을 만드는 데 사용되는 프레임 워크입니다. 이는 기본 앱을 만들 수 있으며 동일한 앱이 Android 및 iOS에서 실행됨을 의미합니다.
• React Native는 ReactJS의 모든 이점을 가지고 있습니다
• React native를 사용하면 개발자가 웹 스타일 방식으로 기본 앱을 만들 수 있습니다.
• 프론트 엔드 개발자는 쉽게 모바일 개발자가 될 수 있습니다.

React Js -React JS는 프론트 엔드 자바 스크립트 라이브러리이며 프레임 워크가 아닌 큰 라이브러리입니다.

• 
  재사용 가능한 UI 구성 요소 를 만드는 데 도움이되는 구성 요소 기반 접근 방식을 따릅니다.
  • 복잡한 대화식 웹 및 모바일 UI 개발에 사용됩니다.
  • 2015 년에만 오픈 소스로 제공되었지만이를 지원하는 가장 큰 커뮤니티 중 하나가 있습니다.

ReactNative -React Native는 오픈 소스 모바일 애플리케이션 프레임 워크입니다.

파티에 조금 늦었지만 여기에 더 포괄적 인 답변이 있습니다.

반응

React는 "섀도 DOM"을 사용하여 모든 변경에 대해 전체 DOM 트리를 다시 작성하는 대신 변경된 내용으로 DOM을 효율적으로 업데이트하는 구성 요소 기반 UI 라이브러리입니다. 처음에는 웹 앱용으로 제작되었지만 이제는 모바일 및 3D / vr에도 사용할 수 있습니다.

React Native는 기본 모바일 UI 요소에 맵핑되기 때문에 React와 React Native 사이의 구성 요소를 교환 할 수 없지만 비즈니스 로직 및 비 렌더링 관련 코드는 재사용 할 수 있습니다.

반응

처음에는 React 라이브러리에 포함되었지만 React가 웹 이외의 다른 플랫폼에 사용되면 분리되었습니다. DOM의 진입 점 역할을하며 React와 함께 사용됩니다.

예:

import React from 'react';
import ReactDOM from 'react-dom';

class App extends Component {
    state = {
        data: [],
    }

    componentDidMount() {
        const data = API.getData(); // fetch some data
        this.setState({ data })
    }

    clearData = () => {
        this.setState({
            data: [],
        });
    }

    render() {
        return (
            <div>
                {this.state.data.map((data) => (
                    <p key={data.id}>{data.label}</p>
                ))}
                <button onClick={this.clearData}>
                    Clear list
                </button>
            </div>
        );
    }

}

ReactDOM.render(App, document.getElementById('app'));

네이티브 반응

React Native는 React를 사용하고 "브릿지"를 통해 Javascript와 기본 대응 물 사이에서 통신하는 크로스 플랫폼 모바일 프레임 워크입니다. 이 때문에 React Native를 사용할 때 많은 UI 구조가 달라야합니다. 예를 들어, 목록 map을 작성할 때 React Native 's 대신 목록을 작성하는 데 사용하려고하면 주요 성능 문제가 발생합니다 FlatList. React Native는 스마트 시계 및 TV뿐만 아니라 IOS / Android 모바일 앱을 구축하는 데 사용할 수 있습니다.

엑스포

Expo는 새로운 React Native 앱을 시작할 때 사용됩니다.

Expo는 범용 React 애플리케이션을위한 프레임 워크 및 플랫폼입니다. iOS, Android 및 웹 앱에서 개발, 빌드, 배포 및 신속하게 반복 할 수 있도록 React Native 및 Native 플랫폼을 중심으로 구축 된 도구 및 서비스 세트입니다.

참고 : Expo를 사용할 때는 제공하는 Native Api 만 사용할 수 있습니다. 포함하는 모든 추가 라이브러리는 순수 자바 스크립트이거나 엑스포를 꺼내야합니다.

React Native를 사용하는 동일한 예제 :

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

export default class App extends Component {
    state = {
        data: [],
    }

    componentDidMount() {
        const data = API.getData(); // fetch some data
        this.setState({ data })
    }

    clearData = () => {
        this.setState({
            data: [],
        });
    }

    render() {
        return (
            <View style={styles.container}>
                <FlatList
                    data={this.state.data}
                    renderItem={({ item }) => <Text key={item.id}>{item.label}</Text>}
                />
                <Button title="Clear list" onPress={this.clearData}></Button>
            </View>
        );
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
});

차이점 :

• 렌더링 이외의 모든 항목은 동일하게 유지 될 수 있으므로 React 및 React Native에서 비즈니스 로직 / 라이프 사이클 로직 코드를 재사용 할 수 있습니다.
• React Native에서는 모든 컴포넌트를 반응 네이티브 또는 다른 UI 라이브러리에서 가져와야합니다.
• 네이티브 구성 요소에 매핑되는 특정 API를 사용하면 일반적으로 자바 스크립트 측의 모든 것을 처리하는 것보다 성능이 향상됩니다. 전의. flatlist를 사용하여 목록을 작성하기위한 구성 요소 맵핑
• 미묘한 차이점 : onClick로 전환 onPress, React Native는 스타일 시트를 사용하여 스타일을보다 성능 적으로 정의하고 React Native는 flexbox를 기본 레이아웃 구조로 사용하여 반응을 유지합니다.
• React Native에는 전통적인 "DOM"이 없으므로 React와 React Native 모두에서 순수 자바 스크립트 라이브러리 만 사용할 수 있습니다.

반응 360

React를 사용하여 3D / VR 응용 프로그램을 개발할 수도 있습니다. 컴포넌트 구조는 React Native와 매우 유사합니다. https://facebook.github.io/react-360/

reactjs는 브라우저 dom이 아닌 react-dom을 사용하지만 react native는 virtual dom을 사용하지만 두 개는 동일한 구문을 사용합니다. reactjs를 사용할 수있는 경우 react native를 사용할 수 있습니다. reactjs에서 사용하는 대부분의 라이브러리는 react native에서 사용할 수 있으므로 반응 탐색 및 공통된 다른 공통 라이브러리와 같이

위의 @poshest 의 주석에 대한 응답으로 여기에 이전에 React에 게시 된 시계 코드의 React Native 버전이 있습니다 (죄송합니다, 섹션에 직접 주석을 달 수 없었습니다. 그렇지 않으면 코드를 추가했을 것입니다).

네이티브 코드 샘플 반응

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

class Clock extends 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 (
      <View style={styles.container}>
        <Text style={styles.sectionTitle}>Hello, world!</Text>
        <Text style={styles.sectionDescription}>It is {this.state.date.toLocaleTimeString()}.</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'white',
    flex: 1,
    justifyContent: 'center',
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
    color: 'black',
    alignSelf: 'center',
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
    color: 'darkgrey',
    alignSelf: 'center',
  },
});

AppRegistry.registerComponent("clock", () => Clock);

스타일링은 전적으로 제 선택이며 React 코드에 사용 된 <h1>및 <h2>태그를 직접 복제하려고 시도하지 않습니다 .

몇 가지 차이점은 다음과 같습니다.
1- React-Native는 모바일 앱을 만드는 데 사용되는 프레임 워크입니다. 여기서 ReactJS는 웹 사이트에 사용할 수있는 자바 스크립트 라이브러리입니다.
2- React-Native는 React가 사용하는 동안 HTML을 사용하여 앱을 렌더링하지 않습니다.
3- React-Native는 모바일 앱만 개발하는 데 사용되는 반면 React는 웹 사이트 및 모바일에 사용합니다.

네이티브 반응

• JavaScript를 사용하여 기본 애플리케이션을 빌드하기위한 프레임 워크입니다.

• 기본 앱 구성 요소로 컴파일되므로 기본 모바일 응용 프로그램을 빌드 할 수 있습니다.

• 기존 앱을 정밀 검사 할 필요가 없습니다. 다시 작성할 필요없이 React Native UI 구성 요소를 기존 앱의 코드에 추가하기 만하면됩니다.

js를 반응 시키십시오

• 사용자 인터페이스 및 웹 응용 프로그램을 구축하기 위해 프런트 엔드 웹을 지원하고 서버에서 실행됩니다.

• 또한 재사용 가능한 UI 구성 요소를 만들 수 있습니다.

• React JS에서 코드 구성 요소를 재사용하여 많은 시간을 절약 할 수 있습니다.

React 또는 ReactJS라고도하는 React.js는 UI 구성 요소의 계층 구조를 작성하는 UI 라이브러리, 즉 UI 구성 요소의 렌더링을 담당하는 JavaScript 라이브러리입니다. 프론트 엔드 및 서버 측을 모두 지원합니다.

React Native는 JavaScript를 사용하여 기본 애플리케이션을 빌드하기위한 프레임 워크입니다. React Native는 기본 앱 컴포넌트로 컴파일되므로 기본 모바일 애플리케이션을 빌드 할 수 있습니다. React JS에서 React는 웹 플랫폼에 대한 React DOM의 기본 추상화이며 React Native의 경우 React는 여전히 기본 추상화이지만 React Native의 추상화입니다. 따라서 구문과 워크 플로는 비슷하지만 구성 요소는 다릅니다.