さくっとReact Native for Windowsに入門する

これは

React Native for Windowsのスタートをやってみたメモ的なものです。
React Native for Windows for Macなるものがあるという情報を見たので、その前にWindows向けを触ってみようと思って書いてます。

参考

公式を参考にしています。
microsoft.github.io

OSバージョン

  • Windows10 ver.2004

まずは導入前の準備をします

参考にも書いてありますが、まずは必要な環境を用意します。

microsoft.github.io

  • Windows設定アプリで開発者モードをオンにします

  • VisualStudio2019を入れます

    • Universal Windows Platform developmentを選択して一緒に入れます
    • Desktop development with C++を選択して一緒に入れます
  • 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

こんなReactのマークが出てうまくいったら
Image from Gyazo

インストール時に指定したプロジェクト名のフォルダができているので移動します。
移動するとこんな感じで構成されていると思います。
Image from Gyazo

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"
        }
    ]
}

デバッグメニューで実行します。

やってみた。

今回はyarnで実行することににしました。
Image from Gyazo

起動が成功したら以下のアドレスにアクセスして確認します。
http://localhost:8081/debugger-ui/

うまくいけば下の画面が表示されるはずです。
Image from Gyazo

次のステップ

この辺りを実施すればよいかもです。
microsoft.github.io

今日はここまで。