joppot

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

プログラミング

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

投稿日:

Pocket

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

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

関連記事

Twitterbootstrap3の開発環境構築とファイル配置、テンプレートを試す

概要 みなさんこんにちはcandleです。今回はtwitterbootstrap3のダウンロードを行い、ファイルを配置して、開発できる様に準備します。 twitterbootstrap3は最近リリース …

railsのrakeのmigrationファイルを削除しNO FILEとstatusに出た時の対処

概要 みなさんこんにちはcandleです。今回は誤ってデータベースに反映したマイグレーションファイルを不要だと思って削除した時に、NO FILEと出てきてしまった時の対処です。 言うなれば、下のような …

pythonのpipでfabricをインストールする

概要 みなさんこんにちはcandleです。今回はpipでデプロイメントツールのfabricをインストールしたいと思います。 前提 pipがインストールされている

railsのrakeで作成したmigrationファイルとstatus履歴を削除する

概要 みなさんこんにちはcandleです。今回はrakeコマンドで作成したマイグレーションファイルの管理を紹介します。rakeコマンドを使っていると、よくよく考えれば必要の無いファイルがある。とか重複 …

memcachedサーバとruby on railsのdalliを使用してセッションを管理する

概要 みなさんこんにちはcandleです。今回はmemcachedサーバを利用してrailsのセッションを管理してみたいと思います。 一般にrailsでセッション管理をしていると、ブラウザのcooki …

  • English
  • 日本語

プロフィール


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

スポンサードリンク

アーカイブ