ReactNativeアプリ開発 -環境構築から動作確認まで

ReactNativeでアプリを開発してみようと思ったので、そのときに詰まった内容などをメモしておく

1. ReactNativeインストール

公式ガイド

npmがインストール済みの前提で
$ npm install -g expo-cli
次に、プロジェクト作成
$ expo init [プロジェクト名]
プロジェクト作成すると、下記のような.gitignoreもセットで作成されるという親切仕様

node_modules/**/*
.expo/*
npm-debug.*
*.jks
*.p8
*.p12
*.key
*.mobileprovision
*.orig.*
web-build/
web-report/
# macOS
.DS_Store

2. コメント文の書き方

React JSX コメントを書きたい!
こちらのサイトにある通り、最低限一行コメントと複数行コメントを抑えておく

一行コメント
{// ここがコメントになる(行末までコメントなので、改行必須)
}
{/* ここがコメントになる */}

複数行コメント
{/*
  ここがコメントになる
*/}

3. 文言の修正

App.tsxが一番最初に触るファイル

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.tsx to start working on your app!</Text>
      <Text>ほげほげ</Text>{/* ここを変える */}
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

4. 動作確認

公式ガイドの通り、
$ npm start で実行(2020/05/07 時点)
Run in web browserをクリック

https://localhost:19006/ のタブが新しく立ち上がり、下記の画面が出るので、いったん動作確認としては終了