React Native使ってる割に何も理解していないので、分からないなりにまとめる。備忘録。

クロスプラットフォームアプリ開発フレームワーク

FacebookとかinstagramがReact Nativeを使っている

AndroidとiOSでコードを共通化できるのが特徴

React Native for windows (for Mac)もあり、それぞれのOS向けのアプリをReact Nativeを使って作ることができる

JavaScript内に定義されたレイアウトを、ReactNativeが各プラットフォームのUIコンポーネントに翻訳して描画する。

Native moduleという仕組みを使えば自作のUIコンポーネントを組み込むこともできるらしい。

Node.js

サーバーサイドのJavaScript実行環境

Node自体は上記の目的のほかに、開発ツールとして、また、クライアントアプリ実行環境としても広く使われているらしい。ReactNativeはビルドにnodeを使う。

Watchman

ファイルの変更を監視してくれるらしい。

他にもあるけど割愛。

公式docを見よ。

M 1Macの場合、公式通りにやっても上手くいかない。こちらの記事を参考にすると上手くいくはず。

上記の環境構築が無事終わると、こんな感じのプロジェクトが作成される。今回はTypeScriptで作成した。理由は、今後TypeScriptを使う機会が増える予感がするため。

何も分からないので、とりあえず片っ端から見ていく。

• __test__

文字通りtestを置くところ

• android

android用に翻訳するところだと思う

• iOS

iOS用に翻訳するところだと思う

• node_modules

NPMから持ってきたたくさんのファイル

• .buckconfig

なんやこれ

buckというFacebook製のbuildツールのconfigファイル

• .editorconfig

知らん

フォーマッター(多分)

• .eslintrc.js

ESlintの設定

• .gitattributes

git のルールを決める(改行ルールとか)

• .gitignore

gitにあげる時に無視して欲しいのをここに書く

• .prettier.js

フォーマット関連の何か

フォーマッター

ESlintは構文チェック、これはコード整形って感じ

• .watchmanconfig

watchmanの設定ファイル

デフォルトは空

• app.json

アプリの設定を記述するところ

• App.tsx

実際にコードを書いていくところ

• babel.config.js

babelは、新しい書き方で書かれたJavaScriptのコードを古い書き方に直すもの

それのconfigファイル

• Index.js

アプリを起動したら最初に読まれるところ

ここでApp.tsxを呼んでる

• metro.config.js

bundler

いくつもあるJavaScriptのコードを一つのファイルにする

そして、コードを各OSが理解できるように翻訳する

• package.json

プロジェクト(パッケージのこと)の情報

どんなパッケージに依存しているかなどが書かれている

• tsconfig.json 

TypeScriptの設定ファイル

• yarn.lock

yarn installでパッケージをインストールするときにversionを指定するためのもの

このファイル構成を調べたあたりで力尽きたので今回はここまで。

• React Native公式doc
• React Native導入ガイド - 環境構築からクロスプラットフォーム開発のメリットまでを理解する
•  React Native の開発環境を整える（React Native開発実践～第0回）
• Metro Bundler in React native
• 【初心者向け】NPMとpackage.jsonを概念的に理解する