読書その他ExpoでReactNativeのアプリを作成してHelloWorldをやってみる技術TwitterFacebook0はてブ0Pocket0LINEPinterest2019.06.10スポンサーリンクスポンサーリンク目次はじめに前提ExpoでReactNativeのアプリを作成してHelloWorldをやってみるexpo-cliをインストールするReactNativeのプロジェクトを作成するテンプレートはどうするか?設定値はどうするか?ソースコードを修正するネイティブアプリを起動するシミュレーターを起動するおわりにはじめにこんにちは!さいけです。今回は、「ExpoでReactNativeのアプリを作成してHelloWorldをやってみる」記事になります。実践入門的な内容になっています。前提nodeをインストールしているExpoでReactNativeのアプリを作成してHelloWorldをやってみるexpo-cliをインストールするまずはじめにExpoについて軽く説明します。Expoとは、ReactNativeアプリの構築、開発、ビルド、デプロイ等の様々な開発支援を行ってくれるサービスです。これらのExpoの機能を使えるように下記コマンドでexpo-cliを端末にインストールします。expo-cliさらにExpoを詳しく知りたい方は下記リンクで公式を見てみてください。React.expo.ioReactNativeのプロジェクトを作成する下記コマンドで、ReactNativeのプロジェクトの初期化・構築を行います。react-native-hello-appプロジェクト構築の際には対話式で色々聞かれます。テンプレートはどうするか?下記文言が表示されると思います。unimodulesこれは、初期構築時に利用するテンプレートはどうするか?聞かれています。様々なテンプレートが選べますが、今回はHelloWorldを表示することをゴールとしているので、シンプルなテンプレートを利用します。blankを選択しEnterを押します。設定値はどうするか?次に、下記文言が表示されると思います。}app.jsonの初期設定値をどうするか?聞かれています。nameとslugをreact-native-hello-appとします。ちなみに補足になりますが、app.jsonの設定値はいつでも変更できます。さいごにEnterを押します。すると、ReactNativeのアプリ構築が始まります。ソースコードを修正するプロジェクト直下のApp.jsを下記のように修正します。},});ネイティブアプリを起動するプロジェクト直下で下記コマンドを入力し、ネイティブアプリを起動させます。startシミュレーターを起動する無事にネイティブアプリが起動すると、ターミナル画面が以下のようになっているかと思います。exit.今回はiOSのシミュレーターで確認を行いたいです。simulatorを起動させます。World!が表示されていればOKです。7.👍🎉おわりに今回は、ExpoでReactNativeのアプリを作成してHelloWorldをやってみました。ExpoでReactNativeのプロジェクトを構築する手順は様々かと思いますが、現状はこれがシンプルではやいと思います。ReactNative自体は、ほぼReactの知識で書けちゃいます。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。ホーム技術スポンサーリンクプロフィールさいけ都内IT企業でエンジニアをしているさいけです。当ブログは主に管理人であるさいけが学んだことをわかりやすく記事にまとめて発信していきます。