フレームワークなしでの入門
フレームワークでは十分に満たされない制約がある場合、または独自のフレームワークを作成する方が良い場合は、フレームワークを使用せずにReact Nativeアプリを作成できます。
そのためには、まず開発環境をセットアップする必要があります。セットアップが完了したら、以下の手順に従ってアプリケーションを作成し、開発を開始してください。
ステップ1：新しいアプリケーションの作成
以前にグローバルな`react-native-cli`パッケージをインストールしている場合は、予期せぬ問題が発生する可能性があるため、削除してください。
npm uninstall -g react-native-cli @react-native-community/cli
新しいプロジェクトを生成するには、React Native Community CLIを使用できます。「AwesomeProject」という新しいReact Nativeプロジェクトを作成しましょう。
npx @react-native-community/cli@latest init AwesomeProject
既存のアプリケーションにReact Nativeを統合する場合、またはプロジェクトにExpoをインストール済みの場合、あるいは既存のReact NativeプロジェクトにAndroidサポートを追加する場合（既存のアプリとの統合を参照）は、これは必要ありません。Ignite CLIなど、サードパーティのCLIを使用してReact Nativeアプリをセットアップすることもできます。
iOSで問題が発生する場合は、次のコマンドを実行して依存関係を再インストールしてみてください。
- `cd ios` を実行して `ios` フォルダに移動します。
- `bundle install` を実行してBundlerをインストールします。
- `bundle exec pod install` を実行して、CocoaPodsによって管理されているiOS依存関係をインストールします。
[オプション] 特定のバージョンまたはテンプレートの使用
特定のバージョンのReact Nativeで新しいプロジェクトを開始する場合は、`--version`引数を使用できます。
npx @react-native-community/cli@X.XX.X init AwesomeProject --version X.XX.X
`--template`引数を使用して、カスタムReact Nativeテンプレートでプロジェクトを開始することもできます。詳細はこちらを参照してください。
ステップ2：Metroの起動
Metroは、React NativeのJavaScriptビルドツールです。Metro開発サーバーを起動するには、プロジェクトフォルダから次のコマンドを実行します。
- npm
- Yarn
npm start
yarn start
Web開発に精通している場合、MetroはViteやwebpackなどのバンドラーに似ていますが、React Native向けにエンドツーエンドで設計されています。たとえば、MetroはBabelを使用して、JSXなどの構文を実行可能なJavaScriptに変換します。
ステップ3：アプリケーションの起動
Metro Bundlerを独自のターミナルで実行します。React Nativeプロジェクトフォルダ内に新しいターミナルを開きます。次のコマンドを実行します。
- npm
- Yarn
npm run android
yarn android
すべてが正しく設定されていれば、すぐにAndroidエミュレータで新しいアプリが実行されているのが見えるはずです。
これはアプリを実行する1つの方法です。Android Studio内から直接実行することもできます。
うまくいかない場合は、トラブルシューティングページを参照してください。
ステップ4：アプリの変更
アプリの実行に成功したので、変更してみましょう。
- お好みのテキストエディタで`App.tsx`を開き、いくつかの行を編集します。
- Rキーを2回押すか、Devメニューから
リロードを選択します（Ctrl + M）変更を確認してください！
以上です！
おめでとうございます！最初のシンプルなReact Nativeアプリの実行と変更に成功しました。
次は？
- この新しいReact Nativeコードを既存のアプリケーションに追加する場合は、統合ガイドを参照してください。
- React Nativeについてさらに詳しく知りたい場合は、React Native入門を参照してください。