フレームワークなしで始める
フレームワークではうまく対応できない制約がある場合、または独自のフレームワークを作成したい場合は、フレームワークを使用せずに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）から
Reloadを選択すると、変更が反映されます！
これで終わりです！
おめでとうございます！初めてのReact Nativeのベアボーンアプリを正常に実行し、変更しました。
次はどうしますか？
- この新しいReact Nativeコードを既存のアプリケーションに追加したい場合は、統合ガイドをチェックしてください。
- React Nativeについてさらに詳しく知りたい場合は、React Native入門をチェックしてください。