React-Native 始める (Hello World)

こんにちは！
javascript言語でiOSとアンドロイドアプリを作れるようにすることに興味を持つようになりました。

#ReactNativeとは
react-nativeはfacebookで公開したiOSとアンドロイドアプリ開発のためのライブラリです。

ReactiveとReactどちらで合いますか?
多くの人がReactiveとReactが何なのか混同します。
名前が似ていて混乱することがあります。
しかし、この二人はジャワとジャバスクリプトだけ名称が似ている、実際にはとても違った技術です。

• Reactは
  FacebookがWEB開発を容易にするために作った技術です。
  カスタムコンポーネントを作り、容易に組み合わせてビューを簡単に作ることができます。
• Reactiveは
  ストリームと非同期処理などをLINQに影響を受けた方法でキレイに処理できるようにしたパラダイムです。
• Reactnativeは
  Reactiveのアプローチをモバイルに拡張するフェイスブックのオープンソースプロジェクトです。

#ReactNative使用理由
ReactNativeは、javascriptを知っていれば、早く基本的なアプリを作ることができるというはっきりしたメリットがあります。
反面、nativeで直接開発した割には、新しい技術に遅れをとっており、プラットフォームごとの特性の機能を積極的に活用しようとするときに不利で、性能上のデメリットが存在します。
多くの短所にもかかわらず生産性が良いため、ReactNativeが多く注目されると思います

#開発環境設定
ReactNativeはできればMacで開発した方が良い。 理由はウィンドウの場合、iOSを直接ビルドすることができず、開発結果をすぐに確認することがむずかしいです

1. node.js install
   https://nodejs.org/
   LTSバージョンのnodeをインストールします。
2. expo-cli
   npm install -g expo-cli
   expo-cliを利用すれば簡単にプロジェクトを生成してすぐに開発することができます
3. xcode とandroidがインストール
4. 環境変数や個人の環境に合わせて設定
5. 確認

node --version
pod --version
java --version
javac -version
adb

↑ コマンドをターミナルに入力した時、バージョンが表示されれば完了したものである。

#プロジェクト生成
環境設定がうまく行ったら、プロジェクトを生成して実際にコードを確認してみます。
react-native init Hello
↑ コマンドを入力すると、プロジェクトフォルダが作られる。
app.jsファイルには実際表示される基本的な画面が作成されているのに不必要な内容を取り除いてくれてhelloというテキストを表示するように変えました。

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

import {
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

const App: () => React$Node = () => {
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <View>
          <Text>hello</Text>
        </View>
      </SafeAreaView>
    </>
  );
};

export default App;

生成が完了すると、↓のコマンドを使ってシミュレータを実行すると、helloが出力されます。

cd Hello
// iOS 実行
npm run ios
// android 実行
npm run android

#参考
react-nativeの説明書を見て提供されるコンポーネントとapi、javascript、reactの基本知識を活用すればモバイルアプリを作っていける。
https://facebook.github.io/react-native/docs/activityindicator