react-native-project-creater

このスキルを使用するタイミング

ユーザーが次のことを希望する場合は、いつでもこのスキルを使用してください。

• React Native プロジェクトをゼロから新規作成する
• プロジェクトの初期化に React Native CLI と Expo のどちらを使用するか選ぶ
• TypeScript、バンドラー、ネイティブ依存関係を設定する
• ナビゲーションと状態管理を含む初期プロジェクト構成を整える

このスキルの使用方法

ワークフロー

1. 要件を確認する：プロジェクト名、組織、TypeScript の使用希望、Expo とベア CLI のどちらを使うか
2. 適切なオプションを指定して初期化コマンドを実行する
3. 初期依存関係（ナビゲーション、状態管理など）をインストールする
4. シミュレーターまたはデバイスでプロジェクトをビルドして実行できることを確認する

1. プロジェクトの作成（CLI）

# Using React Native Community CLI
npx @react-native-community/cli init MyApp

# With TypeScript template
npx @react-native-community/cli init MyApp --template react-native-template-typescript

2. プロジェクトの作成（Expo）

# Using Expo (recommended for new projects)
npx create-expo-app MyApp --template blank-typescript

3. プロジェクト構成

MyApp/
├── App.tsx            # Entry point
├── android/           # Android native project
├── ios/               # iOS native project
├── src/               # Application source code
│   ├── screens/
│   ├── components/
│   └── navigation/
├── package.json
├── tsconfig.json
└── metro.config.js    # Metro bundler configuration

4. 初期設定

# Install dependencies
npm install

# iOS: install CocoaPods
cd ios && pod install && cd ..

# Run on simulators
npx react-native run-ios
npx react-native run-android

ベストプラクティス

• プラットフォーム間で一貫した命名とパッケージ識別子を使用する
• 再現可能なビルドのために、Node.js と React Native のバージョンを固定する
• iOS にネイティブ依存関係を追加した後は、pod install を実行する
• デフォルトのテンプレートから始め、実行できることを確認してから、機能を段階的に追加する
• npx react-native run-android と run-ios の両方のビルド手順を含む CI を早期に設定する

リソース

• 環境のセットアップ：https://reactnative.dev/docs/environment-setup
• Expo の使用開始：https://docs.expo.dev/get-started/create-a-project/

キーワード

react native init、プロジェクトの作成、Expo、React Native CLI、初期化、クロスプラットフォーム、TypeScript、スキャフォールディング