Hello React Native!

仕事ではReactで開発を行っていますが、React Nativeを使った開発をしたことがなかったので調べてみました。

expo-cliをインストール。

yarn install -g expo-cli

Expo CLIでReact Nativeプロジェクトを作成します。

expo init example_project

プロジェクトの作成が終わったらディレクトリに入って開発サーバーを起動してみます。

ここで起動されるサーバーは、プロジェクトの管理サーバーのようです。

cd example_project
yarn start

サイドバーのRun in web browserを押してローカルで起動させてみます。

ブラウザが開いて下のフレーズが画面に出てくればうまくいっています。

Open up App.tsx to start working on your app!

サーバーがうまく立ち上がっていることを確認出来たら、いつものフレーズを追加します。

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.tsx to start working on your app!</Text>
      <Text>Hello React Native!</Text> {/* 追加 */}
      <StatusBar style="auto" />
    </View>
  );
}

ファイルを保存すると画面に表示されているテキストが変わっているはずです。

Open up App.tsx to start working on your app!
Hello React Native!

スマホアプリの開発が思ったより簡単に始められることがわかったので、テンションあがりますね！

参考：

ゼロから始める React Native + Expo 入門

1 liked