Fresopiya
場所にもお金にも時間にも、何にも縛られない自由な状態になったら一体人間は何をしてどこに向かうのか。 まずはとにかく自由を目指すエンジニアのブログです。

哲学とプログラミングとブログがメインになるかと。
プログラミング

【React Native】基本構文の解説

どうも、とがみんです。

iOSアプリ、アンドロイドアプリの両方に対応したプログラムを書くことのできるReact Nativeについて、

この記事では、プロジェクト作成後、App.jsというファイルにデフォルトで書かれているコードについて説明していきたいと思います。

プロジェクト作成後のサンプル

プロジェクト作成後、アプリを起動させると、ただの文字が表示されます。

以下のものは、ただただ、画面の中央に「とがみんブログ(togamin.com)」と表示するだけのサンプルです(笑)

これを表示するコードについて見ていきます。

App.jsファイル内のコード

プロジェクトを作成すると、App.jsというファイルが生成されます。

そのファイルの中身を見ていきます。

import/export

exportは、指定した関数、変数、オブジェクト、クラスなどを受け取り、任意のファイルでそれらを使えるようにするための構文です。

importは別ファイルからexportされた関数、変数、オブジェクト、クラスなどを読み込み、それらを使えるようにするための構文です。

①はreact.jsファイル内でexportされたReact要素を読み込むコードで、

②はreact-native.jsファイル内でexportされた、StyleSheet, Text, Viewを読み込んでいます。

③は、React.Componentクラスを継承したAppというクラスを他のファイルでも扱えるようにするためにexportしています。

export defaultは、ファイル内で1つだけ定義することができ、importする際に特に指定がなければ、default指定されたものを呼ぶというものです。

render

次にAppクラス内のrenderについて説明します。

これは、React.Componentクラスに必須のメソッドで、ReactがもつUIの要素を返す役割を持ちます。

>ReactDOMのrender()とReact.Componentのrender()の違いを理解する

>React.Component

StyleSheet

Styleは、色やフォントサイズ等デザインに関する詳細を書いて行きます。

<View style={styles.container}>にあるように、Viewcontainerが設定されているので、上記はViewに対して適用されます。

>【React Native入門】Java Scriptでアプリ作ろう【Reactやったことない人向け】

まとめ

プロジェクト作成後のApp.jsファイルの中のコードについて説明しました。

参考文献

>ReactDOMのrender()とReact.Componentのrender()の違いを理解する

>React.Component

>【React Native入門】Java Scriptでアプリ作ろう【Reactやったことない人向け】1