とがみんブログ
就活中、自己分析にハマり、心理学、脳科学の本を読み漁りつつ哲学チックなことをひたすら考えていました。このブログでは、そんなとがみんの考えや経験を綴っていきます。
React Native

【React Native】基本構文の解説

どうも、とがみんです。

ブログを管理するアプリFeedminを開発したのですが、

>ブログ・Newsサイト管理アプリ「Feedmin」

「Feedmin」はSwiftで開発したので、iOSにしか対応していません。

多くの人に使ってもらうために、アンドロイド版の「Feedmin」を作りたいので、React Nativeを勉強することにしました。

勉強したことのアウトプットをこのブログでもしていきます。

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

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

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

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

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

スポンサードリンク

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

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

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は、色やフォントサイズ等デザインに関する詳細を書いて行きます。

にあるように、Viewcontainerが設定されていすので、上記はViewに対して適用されます。

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

まとめ

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

参考になれば嬉しいです。

何か不明点等あれば、ご指摘いただけると嬉しいです。