React未経験がReact Nativeを学ぶ

React 使ったことないけど React Native 使う事になったから頑張ってお勉強します

公式の Docs を見た時のメモを記載

（メモなので非常にゆる〜くふわっとしてる）

## わかるレベル

React はほぼ触れてないけど Vue.js は結構触っている

JavaScript は大好き

Youtube で React の動画は見てるので用語だけなんとなく知ってる

## React Native とは

Reactの書き方でマルチプラットフォームなアプリが作れる

最終的にSwiftとかKotlinとかHtmlCssとかになるみたい

最近流行りのFlutterとの一番の違いはネイティブUIなのか独自のUIなのかって感じらしい

ReactNativeで書いたやつはiOS、Android、ブラウザそれぞれでコンポーネントの見た目が違う

つまり全部テストしないといけない・・・？

## 参考

[公式 Docs](https://reactnative.dev/docs/getting-started)

これの「The Basics」を一通り見るだけでなんとなくわかった気になれる

コンポーネントの書き方に、関数とクラス両方の書き方を紹介してくれているのでとても助かる

（ネットの記事はクラスだけだったりが多かった）

ソースは全部公式 Docs から引用

## 基本的な使い方

```js
import React from "react";
import { Text, View } from "react-native";

const YourApp = () => {
    return (
        <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
            <Text>Try editing me! 🎉</Text>
        </View>
    );
};

export default YourApp;
```

## こいつらなんやねん！ →View Text

React Native が用意してくれてる Components

[ここ](https://reactnative.dev/docs/components-and-apis)で探せば色々見つかる

基本的な物として紹介されてたヤツら

- View
    - とりあえずこれ書いとけばいい感じに見た目を調整してくれるらしい
    - \<div>になるみたい
- Text
    - 読んで字のごとく
    - \<p>になるみたい
- Image
    - 読んで字のごとく
    - \<img>になるみたい
- ScrollView
    - View のスクロールしてくれる版
    - \<div>のスクロールでいる版（overflow:scrollが付いた版？）になるみたい
- TextInput
    - 読んで字のごとく
    - \<imput type="text">になるみたい

## そもそも React の書き方知らんがな

そんな奴はまず React から勉強してこいとか言わないで・・・

大体[このページ](https://reactnative.dev/docs/intro-react)の流用

### JSX

Vue.js だと 1 つのファイルに

-   template に html
-   script に js
-   style に css

と分けて書くけど、React は全部 js で書くらしい

js で書いてるから当然 ↓ みたいに変数だって使えるし

```js
const Cat = () => {
    const name = "Maru";
    return <Text>Hello, I am {name}!</Text>;
};
```

関数を代入する事もできる

```js
const getFullName = (firstName, secondName, thirdName) => {
    return firstName + " " + secondName + " " + thirdName;
};

const Cat = () => {
    return <Text>Hello, I am {getFullName("Rum", "Tum", "Tugger")}!</Text>;
};
```

#### 色々試してて思った・・・

if 文や for 文を return 内で書けるのは便利だった

vue だと v-if とか v-for を使うけど、結構 template が煩雑になるし、思うように動かせない場合がある

その点 React はもろ js なので汎用性が高い

```js
const Cat = ({ name }) => {
    if (name) {
        return <Text>Hello, I am {name}!</Text>;
    } else {
        return <Text>I am a cat. I don't have a name yet.</Text>;
    }
};
```

三項演算子とかもいける

```js
const Cat = ({ name }) => {
    return name ? <Text>Hello, I am {name}!</Text> : <Text>I am a cat. I don't have a name yet.</Text>;
};
```

ただし return()内の{}の中に if とか for みたいな構文は書けないらしい

そのときは ↓ のように関数を利用する

```js
const CatCaffe = () => {
    const cats = ["mugi", "sora", "reo", "koko"];
    return (
        <View>
            {cats.map((cat) => {
                return <Text key={cat}>Hello, I am {cat}!</Text>;
            })}
        </View>
    );
};
```

js だからとやりたい放題したらぐちゃぐちゃになりそう

何事もバランスが大事

#### その内調べる

この return は何を返してるんだろう・・・""で括ってないから文字列でもなさそうだし

### 独自でコンポーネントを作る

↑ の Cat は関数だけど、これを他の関数で流用することも可能

```js
const Cat = () => {
    return (
        <View>
            <Text>I am also a cat!</Text>
        </View>
    );
};

const Cafe = () => {
    return (
        <View>
            <Text>Welcome!</Text>
            <Cat />
            <Cat />
            <Cat />
        </View>
    );
};
```

### Props

親コンポーネンとから子コンポーネントへ情報を渡すときは関数の引数として渡す

引数名はなんでもいいっぽいけど props にするのが推奨ぽい

```js
const Cat = (props) => {
    return (
        <View>
            <Text>Hello, I am {props.name}!</Text>
        </View>
    );
};

const Cafe = () => {
    return (
        <View>
            <Cat name="Maru" />
            <Cat name="Jellylorum" />
            <Cat name="Spot" />
        </View>
    );
};
```

### State

状態の変化を検知したいときは State を使う

~~Vue.js でいう computed？~~
> ↑コメントにて指摘をいただきました
> どちらかというとdataに近いもので、コンポーネント内で所有するものみたいです
> 公式の[フック早わかり](https://ja.reactjs.org/docs/hooks-overview.html)がわかりやすかったです

関数コンポーネントとクラスコンポーネントで書き方が違うけどとりあえず関数コンポーネントがおすすめらしい

関数コンポーネントの書き方は Hooks って呼ぶみたい（フック）

変数とセッター？を１行でかけるから便利！

```js
import React, { useState } from "react";

const Cat = (props) => {
    const [isHungry, setIsHungry] = useState(true);

    return (
        <View>
            <Text>
                I am {props.name}, and I am {isHungry ? "hungry" : "full"}!
            </Text>
            <Button
                onPress={() => {
                    setIsHungry(false);
                }}
                disabled={!isHungry}
                title={isHungry ? "Pour me some milk, please!" : "Thank you!"}
            />
        </View>
    );
};
```

### フラグメント

注釈として書かれていたけど、へーって思ったので一応記載

```js
const Cafe = () => {
    return (
        <>
            <Cat name="Munkustrap" />
            <Cat name="Spot" />
        </>
    );
};
```

今まで`<View></View>`で囲っていたけど、急に出てきた`<></>`

１コンポーネントは１要素で囲まれなきゃいけないから、View って毎回書かなきゃいけないのかなと思っていたら

`<></>`これで囲んだらとりあえず OK みたい

## ScrollView の注意点

これ使うだけでスクロールが簡単に実装できる

けど・・・・画面内に収まっていない物でも全部レンダリングするからパフォーマンスが悪いっぽい

アイテムのリストが長すぎる場合は FlatList を使うんだって

## リスト表示

FlatList に data と renderItem を渡すことでリストを表示できる

いっぱいデータがある場合 ScrollView で表示するよりこっちの方がいいみたい

```js
const FlatListBasics = () => {
    const data = [
        { key: 1, value: "Devin" },
        { key: 2, value: "Dan" },
        { key: 3, value: "Dominic" },
    ];

    return (
        <View style={styles.container}>
            <FlatList
                data={data}
                renderItem={({ item }) => (
                    <Text style={styles.item}>
                        {item.key}:{item.value}
                    </Text>
                )}
            />
        </View>
    );
};
```

## style の書き方

SectionList の例から抜粋

StyleSheet 　は react-native のモジュールみたい

```js
import { SectionList, StyleSheet, Text, View } from "react-native";

const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: 22,
    },
    sectionHeader: {
        paddingTop: 2,
        paddingLeft: 10,
        paddingRight: 10,
        paddingBottom: 2,
        fontSize: 14,
        fontWeight: "bold",
        backgroundColor: "rgba(247,247,247,1.0)",
    },
    item: {
        padding: 10,
        fontSize: 18,
        height: 44,
    },
});

const SectionListBasics = () => {
    return (
        <View style={styles.container}>
            <SectionList
                sections={sections}
                renderItem={({ item }) => <Text style={styles.item}>{item}</Text>}
                renderSectionHeader={({ section }) => <Text style={styles.sectionHeader}>{section.title}</Text>}
                keyExtractor={(item, index) => index}
            />
        </View>
    );
};
```

Vue.js のクラスバインディングとかとで、普通の css なら`font-size`なのが`fontSize`になってるので注意

スタイルも全部 js でかけるし js 好きにはうれぴい

なんだか [tailwindcss](https://tailwindcss.com/) とかと相性良さそうだな〜と思った

ReactNative で React の UI コンポーネントは使えるのだろうか・・・

[material-ui](https://material-ui.com/)の見た目好きなんだが

## まとめ

こんな感じで ReactNative には色んなコンポーネントが用意されていて

それを使えば各プラットフォームに対応した UI が簡単に作れるらしい

しかも React の JSX は UI の記述も JavaScript ベースなので色々できる

Vue.js で学んだことは結構生かせるし、それを元にマルチプラットフォームなアプリが簡単に作れるとか神か！

これからちゃんと勉強しまっす

## どうでもいい話

１年前友達に「ReactNative 勉強し始めたわ」って LINE してた

そしてちょうど１年後に「ReactNative 勉強し始めたわ」ってまた LINE しちゃった

一度挫折したことがバレた