JavaScriptしか知らない初心者のReact Native入門

プログラミング歴半年の素人が書いています。

間違いのないようご自身でも良く調べた上でお願いいたします。


# 対象読者

- モバイルアプリ開発をしたことがない人
- JavaScriptの基礎構文がわかる人
- Reactを知っている人
- Macの人

わたしです。 試行錯誤の記録となっておりますので、ベストプラクティスではない可能性が十分含まれておりますことご了承ください。

#環境構築

## Node.jsのインストール

https://nodejs.org/en/download/

上記リンクからダウンロードできます。

## ReactNativeのインストール

[公式チュートリアル](https://facebook.github.io/react-native/docs/getting-started)でもおすすめされているように、「**Expo CLI**」という「ReactNative+便利機能いろいろ」のパッケージをインストールしてみます。

ついでに、お手持ちのスマホのアプリストアで「Expo」を検索し、アプリをスマホにダウンロードしておくとよいでしょう。自分のスマホで、開発中の画面を確認することができます。

```bash
$ npm install -g expo-cli
```

上記のコマンドで「**Expo CLI**」をインストールできます。


## 新しいプロジェクトの作成

早速、アプリの開発にとりくみましょう。

```bash
$ expo init AwesomeProject
```

新しいプロジェクトを作成します。今回は「AwesomeProject」という名前をつけました。

途中、スターターテンプレートを何にするか聞かれます。
「Blank」とか「Blank with TypeScript」だとか、いろいろありますが、今回は初めてなので「Blank」を選択してみました。


```bash
cd AwesomeProject
npm start
```

プロジェクトの作成が済んだら、作成したディレクトリに移動して、`npm start`で起動します。
ブラウザにCLIが表示されたら成功です。


## Expoのダウンロードと登録

https://expo.io/

上記からExpoにアクセスし、SignUp します。
お使いのスマホがあれば、公式アプリをダウンロードします。


## Expoで開発画面を表示する

`npm start`してブラウザに表示された画面に、QRコードがあればそれをスマホで読み取ることで開発中の画面を表示することができます。

### ここでエラー！

私の場合はここでエラーがでました。

```bash
error Unable to resolve "@react-navigation/native" from "App.js"
```

うーん、初めてなのでなんのこっちゃモジュール。

ひとまず`App.js`を[公式チュートリアル](https://facebook.github.io/react-native/docs/getting-started)のとおり、シンプルに書き直すことで解決しました。

```react:App.js
import React, { Component } from 'react';
import { Text, View } from 'react-native';

export default class HelloWorldApp extends Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <Text>Hello, world!</Text>
      </View>
    );
  }
}
```

ちなみに、Hooksで関数コンポーネントにしても動きました。（`react-native: 0.61.4`）

```react:App.js
import React from 'react';
import { Text, View } from 'react-native';

const HelloWorldApp = () => {
    return(
        <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
            <Text>Hello, World!</Text>
        </View>
    )
}

export default HelloWorldApp
```

無事、Hello Worldまでたどりつきました。


![スクリーンショット 2020-02-12 21.21.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/452235/3b51b921-73fb-1583-d258-38d1be7151f0.png)


### React Native独自のコンポーネント

通常のJSXで使うことができる`<div>`や`<h1>`などのコンポーネントの代わりに`<View>`や`<Text>`を使います。

```md
- <View> : <div>や<span>
- <Text> : <p>など文字列の表示に使用
```

## 画像を表示する

「Hello, World!」の代わりに画像を表示します。
React Nativeでは`<img>`のかわりに`<Image>`が用意されているので、インポートして使います。

画像ソースを指定するプロパティは、`src`ではなく`source`です。


```react:App.js
import React from 'react';
// Imageコンポーネントをインポート
import { Text, View, Image } from 'react-native';

const HelloWorldApp = () => {
    // 画像へのパスを定義
    let pic = {
        uri: 'https://i.picsum.photos/id/237/300/200.jpg'
    }

    return(
        <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
            <Image source={pic} style={{width: 300, height: 200}} />
        </View>
    )
}

export default HelloWorldApp
```


## PropsとStateは通常のReactと同じ

同じ...だと思います。

ただし、Stateの管理は「Redux」で行うのが主流になりつつあるようです。（これはReact Nativeだけでなく通常のReactプロジェクトでも同じ）



# まとめ

...続く

https://qiita.com/ShinKano/items/025a1c2b42892335afec