React Native | JavaScriptとReactだけでネイティブモバイルアプリを構築できる

JavaScriptとReactだけでネイティブモバイルアプリを構築できる

React Nativeでは、JavaScriptのみを使用してモバイルアプリを構築できます。Reactと同じシンタックスを使用しており、宣言的なコンポーネントから豊富なモバイルUIを作成できます。

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 Nativeアプリはネイティブなモバイルアプリです

React Nativeでは、「モバイルウェブアプリ」、「HTML5アプリ」、または「ハイブリッドアプリ」ではありません。 Objective-CまたはJavaを使用して作成されたアプリと区別がつかない、ネイティブモバイルアプリを構築します。 React Nativeは、通常のiOSやAndroidアプリと同じ基本的なUIビルディングブロックを使用します。JavaScriptとReactを使用して、これらのビルディングブロックをまとめているだけです。

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

class AwkwardScrollingImageWithText extends Component {
  render() {
    return (
      <ScrollView>
        <Image source={{uri: 'https://i.chzbgr.com/full/7345954048/h7E2C65F9/'}} />
        <Text>
          On iOS, a React Native ScrollView uses a native UIScrollView.
          On Android, it uses a native ScrollView.

          On iOS, a React Native Image uses a native UIImageView.
          On Android, it uses a native ImageView.

          React Native wraps the fundamental native components, giving you
          the performance of a native app, plus the clean design of React.
        </Text>
      </ScrollView>
    );
  }
}

コンパイル時間を無駄にしない

React Nativeを使用すると、アプリをより速く構築できます。再コンパイルするのではなく、即座にリロードすることができます。さらにホットリロードを使用すると、アプリケーションの状態を維持しながら新しいコードを実行することもできます。

必要なときにネイティブコードを使用する

React Nativeは、Objective-C、Java、またはSwiftで書かれたコンポーネントと簡単に結合します。アプリケーションの最適化する必要がある場合は、ネイティブコードに簡単にドロップできます。React Nativeでアプリケーションの一部を構築したり、ネイティブコードを直接使用してアプリケーションの一部を構築することも簡単です。

import React, { Component } from 'react';
import { Text, View } from 'react-native';
import { TheGreatestComponentInTheWorld } from './your-native-code';

class SomethingFast extends Component {
  render() {
    return (
      <View>
        <TheGreatestComponentInTheWorld />
        <Text>
          TheGreatestComponentInTheWorld could use native Objective-C,
          Java, or Swift - the product development process is the same.
        </Text>
      </View>
    );
  }
}

React Nativeをはじめる

どんなサービスがReact Nativeを利用していますか？

何千ものアプリケーションが、React Nativeを利用しています。React Nativeで何ができるかを知りたいなら、これらのアプリをチェックしてください！

これらの中にはReact Nativeとネイティブのハイブリッドアプリも含まれます。

React Nativeアプリをもっと見る