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

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

関連記事

ruby on rails4でtwitter bootstrap 3のgemを使用してscaffoldを作成する

概要 みなさんこんにちはcandleです。今回はrails4上でtwitterbootstrap3のgemを使ってscaffoldしてみたいと思います。 scaffoldとはご存知のようにいわゆるwe …

入門ReactでGSAPアニメーションの使い方

概要 みなさんこんにちはcandleです。今回はReactでGSAPを使ってみたいと思います。 簡単にアニメーションが使えるjsライブラリはjQueryが有名です。ただ、jQueryとReactは相性 …

Rails pluginでengineを使ったgemの作り方[6](config編)

概要 みなさんこんにちはcandleです。今回は前回に引き続き、gemの作成をやっていきます。 gemのconfigとは恐らく一般的に以下の様な状況の時に使う事になると思います。 例えば、gemのプロ …

phpのsnappyライブラリをmacで使用して、webサイトのサムネイルを取得する

概要 みなさんこんにちはcandleです。今回はsnappyを使用して、ウェブサイトのサムネイルを自動的に取得したいとおもいます。 snappyはそれ自体がhtmlを画像にするスクリプトではなく、wk …

CakePHPでhelloworld

概要 CakePHPでプログラミングのお約束helloworldを行いましょう。 helloworldとは動作確認も含めた、一番最初に書くプログラムコードです。 だいたいはhello worldと単純 …

  • English
  • 日本語

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