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

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

関連記事

railsのmodelで各データが何個あるかカウントする

概要 皆さんこんにちはcandleです。 今回は、railsでレコードのデータそれぞれ何個あるのか数える方法を紹介します。 mysqlだと簡単なのですが、railsだとよくわからなかったので、いろいろ …

railsのroutesでhttpのGETやPOSTを指定してルーティングを表示する

概要 みんさんこんにちはcandleです。今回は少し頭をひねれば分かる事ですが、少し迷ったので、記事にまとめました。 railsですごいwebアプリケーションを作っていると、ルーティングが複雑きわまり …

phpmyadminでmysqlデータベースの照合順序を変更する

概要 みなさんこんにちはcandleです。 ちょっとした事なのですが、意外に分からなかったのでまとめました。 phpmyadminを使ってデータベースを作ると、うっかり、utf8_general_ci …

ElastiCacheのmemcachedとEC2上のrailsとdalli-elasticacheを使ってキャッシュ管理する

概要 皆さんこんにちはcandleです。今回はaws上にあるElastiCacheというサービスを使って railsのキャッシュを管理したいと思います。 キャッシュというのはwebサービス上でよく使う …

MAMPのSQLiteManagerを使用してsqlite3のテーブルの作成とフィールドの設定、レーコードの挿入を試す

概要 みなさんこんにちはcandleです。前回と引き続き、SQLiteManagerを使用してsqlite3を試してみましょう。 はじめに、書いておきますが、MAMPのSQLiteManagerはSQ …

  • English
  • 日本語

プロフィール


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

スポンサードリンク

アーカイブ