React Nativeの公式ドキュメントを和訳してみる 2 - 基本を学ぶ(Learn the Basics)

注意

当記事はReact Native 0.51の公式ドキュメントの独自和訳です。間違いなどあればご指摘ください。

バージョン0.51のドキュメントに準拠します。

参照リンク先は基本的に元サイトです。リンク先サイトを和訳したらそのページに差し替えます。

本家サイトではシミュレータがあり、コードを編集しながら実行でき便利です。

Facebook社に無断なので怒られたら消します。

元サイト
facebook.github.io

React NativeはReactのようですが、webコンポーネントの代わりにネイティブコンポーネントを用いブロックを組み立てていきます。よって、ReactNativeアプリの基本構造を理解するためには、JSX、コンポーネント、stateやpropsといった幾つかのReactの基本概念を理解する必要があります。もしすでにReactを知っているのであれば、あとはネイティブコンポーネントのようなReactNative固有のものを追加で学ぶ必要があります。このチュートリアルはReact経験の有無に関わらず全ての方を対象としています。

さぁ、やっていきましょう。

Hello World

古代からの風習に習い、アプリ構築の最初は”Hello World”と言わせる以外にないでしょう。このように。

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

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

// Create React Native App使ってたらこの行は飛ばす
AppRegistry.registerComponent('AwesomeProject', () => HelloWorldApp);

興味深いですか？(本家webサイト上の)シミュレータでは直接サンプルコードで遊ぶことができます。これをApp.js、index.iox.js、またはindex.android.jsのファイルに貼り付けることもできます。ローカルマシン上で実際のアプリを作成できるでしょう。

なにが起こっているの？

上のコードはJavaScriptらしくないと感じる部分もあるかもしれません。
慌てないでください。これが未来です。

まずはじめに、ES2015(ES6としても知られています)はJavaScriptの複数の改修をまとめたものであり、今では公式水準の一部となっています。しかし、未だに全てのブラウザでのサポートはされておらず、web開発の場においてもしばしば不採用となっています。ReactNativeはES2015サポートと共にリリースされました。したがって、これらの仕様に競合の心配はいりません。import, from, class, extends, そして()=> 記法といった上記の例内のものは全てES2015の特徴です。もしES2015に馴染みがなくとも、チュートリアル内にあるようなサンプルコードを読んで行くだけでその記法を選択するようになるでしょう。よければ、このページ(https://babeljs.io/learn-es2015/)にES2015の特徴の良い概要が載っているので見てみてください。
上記コードのHello world!も普段見ない書き方ですね。これはJSXという、JavaScript内にXMLを埋め込むための記法です。多くのフレームワークがそれぞれ特別なテンプレート言語を使い、マークアップ言語の中にコードを埋め込めるようにしています。Reactでは、その逆を行きます。JSXによってコード内にマークアップ言語を埋め込めるようになります。web上のHTMLのように見えますが、

やといったwebで言うところのタグの代わりにReactコンポーネントを用います。今回のケースでは、は文字列を表示するための構築済みコンポーネントです。

コンポーネント

と言うことで、このコードはHelloWorldAppという新しいコンポーネントを定義します。ReactNativeアプリを構築する際には新しいコンポーネントを大量に作ることでしょう。スクリーン上で見る全てのものはコンポーネントの並びで成り立っています。コンポーネント一つ一つは非常にシンプルです。必須なのは、描画するJSXを返すためのrenderファンクションただ一つのみです。

このアプリはたいしたことできないね

良い着眼点です。もっとコンポーネントが面白いことをできるように、propsについて学びましょう。