ReactNative入門② ~Hello Worldを出力する~ #React

他のプログラミング言語と同じように最初は Hello World を出力してみましょう。

Hello Worldを出力するコード

先にコードを見てみましょう。
App.jsに記述すると、Hello Worldの出力が確認できます。

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

export default class HelloWorldApp extends Component {
  render() {
    return (
      <Text>Hello world!</Text>
    );
  }
}

何をしているのか

先程のコードが何をしているのかを説明していきます。
コードはES2015(ES6)で記述します。

1,2行目

1,2行目では、importという記述があります。1行目では、「reactからReactとComponentをインポートする」という意味になります。2行目も同じようなものです。
インポートするには、クラスや関数をエクスポートしておく必要があります。つまり、ReactやComponent, Textはエクスポートされていることになります。
Componentは{}の中に入っていて、Reactはそのまま記述されてありますが、これはエクスポートに違いがあります。これについては、次の記述でexport defaultに触れるので、そのときに説明します。
この時点では、エクスポートの方法が異なれば、import時の記述が異なると思っておけば大丈夫です。

4行目以降

4行目以降は、Componentを作成しています。Componentとは、Reactでも使われている考えで、部品を意味しています。
例えば、ボタンや、フォームなどをComponentとして作成してエクスポートしておき、必要な場所で、Componentをインポートして使いまわします。
ここでは、Textというコンポーネントを作成、描画するHelloWorldAppというクラスを定義しています。render()が画面への描画を担当します。

exportについて

エクスポートには、export defaultとexportがあります。export defaultは文字通りインポートされるときのデフォルトになります。export defaultでエクスポートできるクラスや関数は１つになります。ファイル内に他のクラスや関数をエクスポートしたいときは、通常のexportを使用します。
importと記述するとexport defaultでエクスポートポートしたクラスや関数が対象になります。このクラスや関数を使用するには名前が必要です。なので、import hogeというようにインポートします。
最初のサンプルコードではimport Reactという記述がそうです。
サンプルコードで定義した、HelloWorldAppもexport defaultなので、インポートの際は、import HelloWorldAppのように記述することになります。

exportはデフォルトではないクラスや関数をエクスポートするときに使用します。以下のようなイメージです。

export default class DefaultClass

export class SecondClass

export class ThirdClass

exportでエクスポートされたクラスや関数は以下のようにインポートします。

import { SecondClass, ThirdClass } from ~~~

サンプルコードでは、ComponentやTextがexportでエクスポートされたものになります。