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がインストールされている

SPONSORED LINK


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

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

関連記事

basscss v8以降にv7以前のスタイルを追加する(自分用メモ)

概要 みなさんこんにちはcandleです。今回はbasscssのv8でかなりデフォルトのスタイルから削除されてしまったスタイルをインポートします。 v7以降からbasscssのスタイルはかなり分割され …

fluentdでrails logをtailで直接取得する方法

概要 追記) この記事はだいぶ古くなってしまったので、新しく書き直しました。 こちらの方を参照した方が多分良いことが書いてあります。 https://joppot.info/2017/03/17/35 …

railsのgonで別ページでリロード後turbolinksで移動したら変数がundefindする場合の対処

概要 (追記 2016/05/18 この方法を行うと、turbolinksで問題が起きました。 turbolinksで移動した回数だけ、javascriptが実行されてしまいました。 例えば、 < % ...

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

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

ruby on railsに最強のwysiwygエディタ、Squireを導入する

概要 みなさんこんにちはcandleです。今回はruby on railsにsquire editorを導入したいと思います。 squireはオープンソースの便利なwysiwygエディタです。 カスタ …

  • English
  • 日本語

プロフィール


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

スポンサードリンク

アーカイブ