React Nativeは、JavaScriptと、Facebook社が開発したユーザーインターフェースライブラリであるReactを使って、ネイティブのモバイルアプリケーションを構築することができます。java（Android）やC++ + target C（iOS）に習熟していなくても、AndroidやiOSデバイス向けのコードを簡単に書くことができるようになるのです。

ここでは、React Nativeを使いこなすために必要な知識をご紹介します。

リアクティブ・ローカルの前提条件

すでにReactに慣れているのであれば、React Nativeを使い始める必要はないでしょう。インターネットに接続できる環境が必要で、ネットワーク経由でパソコンに接続できることが必要です。また、Linuxのコマンドラインの基本や、Windowsのコマンドラインの初心者のためのガイドもお読みください。

react nativeのインストール

React Nativeのインストールはこれ以上ないほど簡単ですが、最初にnode.jsをインストールする必要があります。

node.jsについては2013年にも紹介しましたが、簡単に言うと、JavaScriptを使って「ちゃんとした」デスクトップアプリケーションやサーバーアプリケーションを書けるようにするものです。

hospital-node.jsのダウンロードページにアクセスし、WindowsまたはmacOSのインストーラーを選択してください。 Linux版もありますが、インストールにはより多くの作業が必要です。

ダウンロード後、インストーラーを実行し、使用許諾契約に同意してインストールしてください。node.jsだけでなく、JavaScriptのパッケージマネージャであるnpmも利用できます。これを使えば、React Nativeのような他のパッケージもインストールできます。

React Nativeを使い始める最も簡単な方法は、コマンドライン・プログラム「create React Native app」を使用することです。新しいターミナルまたはコンソールを開き、以下の場所で npm を使ってインストールします。

npm install -g create-react-native-app

create react native appのインストールに問題がある場合、npmのパーミッションを修正する必要がある場合があります。

インストールが完了したら、アプリケーションの作成に取りかかります。

アプリケーションを簡単に作成する方法

create react native appをインストールしたので、最初のアプリを作成します。プロジェクトを格納する新しいフォルダを作成し、コマンドラインからそのフォルダにナビゲートします。

アプリケーションを作成するには、create react native app ユーティリティを使用します。このコマンドを実行すると、FirstAndroidAppというアプリケーションが作成されます。

create-react-native-app FirstAndroidApp

React Nativeは、プロジェクト名（FirstAndroidApp）を元に新しいフォルダを作成してくれます。このフォルダに移動して実行します。

npm start

これで開発用サーバーが起動します。

サーバーを再起動するためのオプションや、QRコード、サーバーのIPアドレスなどが表示されます。これで、**で実行する準備はすべて整いました。

端末でアプリケーションを実行する

Android端末でアプリをテストするには、Expoと呼ばれるアプリをインストールする必要があります。これでパソコンに接続され、アプリが読み込まれます。変更した場合は、アプリケーションを再読み込みします。非常によく機能し、アプリの開発に最適な方法です。

Expoをインストールしたら、**とあなたのコンピューターが同じネットワーク上にあることを確認してください。異なるネットワークやファイアウォールの向こう側では動作しません。

Expoアプリケーションを開き、「QRコードを読み取る」を選択します。コマンドラインのQRコードに**カメラを向けると、数秒後にアプリケーションが**に表示されます。コマンドラインに戻ると、いくつかの新しいステータスが表示されます。これらは、アプリケーションがビルドを完了し、お使いのデバイス上で動作していることを示すものです。

さあ、コードを書き始めましょう

ハロー、ワールド

FirstAndroidAppフォルダの中に、React Nativeはいくつかのファイルを作成します。アプリケーションをサポートするためにインストールするnodeパッケージを保存するためのnodeu modulesフォルダがあります。お好みのテキストエディタでapplication.jsを開いてください。

このファイルには24行のコードが含まれています。いくつかのインポート、Appというクラス、スタイルシートがあります。

import React from 'react';import { StyleSheet, Text, View } from 'react-native';export default class App extends React.Component { render() { return ( <View style={styles.container}> <Text>Open up App.js to start working on your app!</Text> <Text>Changes you make will automatically reload.</Text> <Text>Shake your phone to open the developer menu.</Text> </View> ); }}c***t styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', },});

これは複雑に見えるかもしれませんが、Reactのネイティブな構文に慣れれば簡単で、構文の多くはHTMLやCSSに似ています。

コードに飛び込んでみましょう。これらのインポートは、アプリケーションが動作するために必要なReactネイティブコンポーネントにアクセスできることを保証します。

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

中括弧（{StyleSheet, Text, View}）は、インポートする複数のファイルを指定します。

このクラスのアプリケーションが必要です。内部リターンは **表示されるコードです。このマークアップは、HTMLと似ていますが、Reactネイティブのカスタムマークアップで構成されています。

ビューマーカーは他のコンテナが格納されている場所です。style.container}属性は、このビューがドキュメントの一番下にあるスタイルシートを使用するように設定します。

ビューマーカーには、複数のテキストタグがあります。テキストは、テキストマークアップで配置する必要があります。これを行わないと、React Nativeは動作しません。

一番下には、定数として定義されたスタイルオブジェクトがあります。これはCSSと非常によく似ているが、よりオブジェクト指向的な外観を持っていることが特徴である。ただし、Reactネイティブ特有の構文を使用する必要があります。

このコードを修正して、文字だけでなく、周りの色も変えられるようにしてみましょう。

CSSで、backgroundColorを緑（または好きな色）に変更する:.

backgroundColor: '#4caf50',

なお、16進コードは必ずシングル・インバーテッド・カンマで記述すること。文章を改善しようテキストという新しいスタイルを作成します。色、フォントサイズ、フォントウェイトの属性を追加します。

text: { color: '#fff', fontSize: 34, fontWeight: 'bold'}

これを下のcontainer要素にカンマで区切って追加します。

c***t styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#4caf50', alignItems: 'center', justifyContent: 'center', }, text: { color: '#fff', fontSize: 34, fontWeight: 'bold', }});

最後に、App クラスのテキストを変更します。

<Text style={styles.text}>Hello, World!</Text>

styleプロパティを設定することで、事前にText Stylesで定義したスタイルに従ってテキストのスタイルを設定するようにReact Nativeに指示することができます。

プレイショップ、登場!

まだ基本的なことしか説明していませんが、これで素晴らしいアプリを構築するための強固な土台ができました。Reactネイティブの各機能の包括的な情報は、Reactネイティブのドキュメントをご覧ください。

また、ゲームを作るのが好きな方は、****でBuildboxを使ったゲームの作り方をご覧ください。