これは
React Native for Windowsのスタートをやってみたメモ的なものです。
React Native for Windows for Macなるものがあるという情報を見たので、その前にWindows向けを触ってみようと思って書いてます。
参考
公式を参考にしています。
microsoft.github.io
OSバージョン
- Windows10 ver.2004
まずは導入前の準備をします
参考にも書いてありますが、まずは必要な環境を用意します。
Windows設定アプリで開発者モードをオンにします
VisualStudio2019を入れます
Node.jsをいれます。
※方法はたくさんあるのでつかいやすい方法でで入れます。Chromeを入れます(一応オプションになります)
Yarnを入れます(これもオプションになります)
準備ができたら手順を進めていきます
インストールの流れとしては大体以下のような感じになります。 1.React Nativeプロジェクトの作成とインストール 2.React Native for Windowsのパッケージのインストール
1.React Nativeプロジェクトの作成とインストール
適当な場所で以下のコマンドを叩くとフォルダを作ってReact Nativeのために必要なものがインストールされます。
npx react-native init <好きなプロジェクト名> --version ^0.61.5
インストール時に指定したプロジェクト名のフォルダができているので移動します。
移動するとこんな感じで構成されていると思います。
2.React Native for Windowsのパッケージのインストール
必要なパッケージをインストールします。
npx react-native-windows-init --overwrite
うまくいったら起動していきます。
起動する
起動の方法は3種類あります。
1.コマンドで実行
2.VisualStudioを使う方法
3.VSCodeを使う方法
1.コマンドで実行
以下のコマンドを実行することで起動します。
npx react-native run-windows
2.VisualStudioを使う方法
slnファイルを開いてRunすることで実行できます。
3.VSCodeを使う方法
VS Code用のReact Native Toolsプラグインをインストールをしておきます。
プロジェクトのルートディレクトリに.vscode/launch.json
を作っておき、↓をコピペして保存します。
{ "version": "0.2.0", "configurations": [ { "name": "Debug Windows", "cwd": "${workspaceFolder}", "type": "reactnative", "request": "launch", "platform": "windows" } ] }
デバッグメニューで実行します。
やってみた。
起動が成功したら以下のアドレスにアクセスして確認します。
http://localhost:8081/debugger-ui/
次のステップ
この辺りを実施すればよいかもです。
microsoft.github.io
今日はここまで。