joppot

コピペで絶対動く。説明を妥協しない

プログラミング

macでreact nativeの環境構築をして、iosアプリのhello worldをする

投稿日:


reactnativetop_thumb

概要

みなさんこんにちはcandleです。

今回は、react nativeの環境構築をmac上で行い、iosアプリでhello worldをしてみたいと思います。
react nativeはreact jsが書ければ、基本的に同じ様に開発できるとのことです。

前提

IOSアプリでhello worldを行うので、xcodeのバージョンは公式サイトにある様に、7以上が必要です。
nodeがインストールされている


react nativeプロジェクトを作成する

react nativeはreact-native-cliからiosのプロジェクトを作成します。
react-native-cliはnpmでインストールできるので、まずはそこからです。

下記のコマンドでインストールします。

npm install -g react-native-cli

install_react_native_cli

次に、プロジェクトを作成します。
名前は公式サイトにある「AwesomeProject」にします。
適当なフォルダで作成しますが、私はホームディレクトのreactフォルダに作成します。

cd ~/
mkdir react
cd react
react-native init AwesomeProject

initreactapp

上の画像をみてもわかる通り、IOSの場合の手順が出ています。
ひとまず、react-native run-iosのコマンドを打ち込んでみます。

cd AwesomeProject
react-native run-ios

色々、処理がバーっと流れます。

serverrun

最終的に、上の様な画面が表示されれば、ビルド成功です。

xcodeで開発したい場合は、ios/wesomeProject.xcodeprojをxcodeで開けば、開発できます。


hello worldを表示する

index.ios.jsを開いて、

Welcome to React Native!をHello Worldに変更して、他のテキストは削除し、保存します。

hello_world_react

iosのバーチャルコンソールに移動してCommand + Rを押して、リロードするとhello worldと表示されます。

react_helloworld_ok

まとめ

React Nativeの環境構築は簡単ですね。

スポンサードリンク

「為になったなぁ」と思ったら、シェアお願いします。

-プログラミング
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

MAMPのPHPからSQLite3データベースにアクセスして値を取得する

概要 みなさんこんにちはcandleです。MAMPのSQLiteデータベースとテーブルを作成して、レコードも挿入した事なので、値を取得してみましょう。 前提 phpのバージョンが5.3以上である SQ …

scikit-learnの4つの関数で機械学習などのデータを前処理する

概要 皆んさんこんにちはcandleです。今回はpythonの機械学習ライブラリ『scikit-learn』を使い、データの前処理をしてみます。 scikit-learnでは変換器と呼ばれるものを使い …

fabricでmysqlコマンドを実行する関数を自作する

概要 皆さんこんにちはcandleです。今回はfabricからリモート先のサーバのmysqlを実行するための環境変数と関数を作成したいと思います。 mysqlは一般にmysqlコマンドをログインしてか …

reactで最もシンプルなドロップダウンメニューを作成

概要 みなさんこんにちはcandleです。今回はreactで最もシンプルなドロップダウンメニューを作ってみたいと思います。 前提 Reactの知識がある 準備 以下のコマンドでreactプロジェクトを …

React webでreact-simple-formatを使う

概要 みなさんこんにちはcandleです。今回はreactでsimple-formatを使ってみたいと思います。simple-formatは割とRuby on Railsでは有名で、よく使われます。R …

  • English
  • 日本語

ベンチャー企業のCTOをやってます。大学時代にプログラミングを始め、javaから入門し、C++へて、PHPへと進み、会社ではRailsを使用。自動化が大好きなプログラマー