# React Native筆記2 - 基礎

:::warning
4/3更新：
因為官網大更新，把教程全部翻新了(變更詳細&更清楚了)，所以我重新讀完做了一個新版本 >>> [在這](https://hackmd.io/G2wCt4S-Qr6B6LzaW_G5nA?view)
:::

這篇筆記包含官方文檔的Learn the Basics, Props, State三個部分

# Part 1 - 基礎

[官方文檔 - Learn the Basics](https://facebook.github.io/react-native/docs/tutorial)

## 蓋出Hello, world!的程式：

import React, { Component } from 'react';
import { Text, View } from 'react-native';

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

### ES2015
**ES2015**(又稱**ES6**)：Javascript的一種改良版本
React Native有兼容ES2015，包含```import```, ```from```, ```class```, ```extends```都是ES2015的功能
延伸閱讀：[ES2015功能](https://babeljs.io/docs/en/learn/) (之後有空我再讀xd)

### JSX
其中以下這段程式碼為 **JSX**，一種把XML嵌入Javascript的句法

<View><Text>Hello world!</Text></View>

### Component
上述程式碼就是寫了一個叫做HelloWorldApp的Component
所有在螢幕上看到的東西都是某種Component
一個Component可以非常簡單，但一定要有 ```render```方法 (把JSX return回去渲染)

----

# Part 2 - Props

[官方文檔 - Props](https://facebook.github.io/react-native/docs/props)

Props，即Properties的縮寫，是建立Components時的參數
ex. ```Image``` component的 ```source``` prop：控制顯示什麼圖片
在JSX中用大括號```{ }```把Javascript加進去~

import React, { Component } from 'react';
import { Image } from 'react-native';

export default class Bananas extends Component {
  render() {
    let pic = {
      uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
    };
    return ( //底下source是prop
      <Image source={pic} style={{width: 193, height: 110}}/>
    );
  }

## 自定義Props

import React, { Component } from 'react';
import { Text, View } from 'react-native';

class Greeting extends Component { {/*Greeting的component*/}
  render() {
    return (
      <View style={{alignItems: 'center'}}>
        <Text>Hello {this.props.name}!</Text>
      </View>
    );
  }
}

export default class LotsOfGreetings extends Component {
  render() {
    return (
      <View style={{alignItems: 'center', top: 50}}>
        <Greeting name='Rexxar' /> {/*Greeting是Component名稱，name是prop*/}
        <Greeting name='Jaina' />
        <Greeting name='Valeera' />
      </View>
    );
  }
}

用prop的方式使用```name```，讓我們可以客製化```Greeting```的Component
(可以重複使用Greeting，然後每次丟不同的參數(name)進去)

---

# Part 3 - State

[官方文檔 - State](https://facebook.github.io/react-native/docs/state)

一個Component由兩種資料控制：```props```和```state```
- ```props```：由parent設定，**固定不變**
- ```state```：**會變動**的資料
- 在constructor中初始化```state```
- 在想變更的時候呼叫```setState```

## 例子：用計時器來設定state的變動
- 文字的內容在一開始就會設定，所以是**prop**
- 文字關閉與開啟會變動，所以是**state**

import React, { Component } from 'react';
import { Text, View } from 'react-native';

class Blink extends Component {

  componentDidMount(){
    // 設定state變更會發生什麼事 & 變更的時間間隔
    setInterval(() => (
      this.setState(previousState => (
        { isShowingText: !previousState.isShowingText }
      ))
    ), 1000); // 1000是時間間隔
  }

  //state object
  state = { isShowingText: true };

  render() {
    if (!this.state.isShowingText) {
      return null;
    }

    return (
      <Text>{this.props.text}</Text>
    );
  }
}

export default class BlinkApp extends Component {
  render() {
    return (
      <View>
        <Blink text='I love to blink' />
        <Blink text='Yes blinking is so great' />
        <Blink text='Why did they ever take this out of HTML' />
        <Blink text='Look at me look at me look at me' />
      </View>
    );
  }
}

## 改變State的情況：
之後比起用計時器來變state，比較可能在**server傳新資料**或是**使用者輸入資料**的時候變state
這種時候推薦用state container來控制資料流動，如[Redux](https://redux.js.org/)和[Mobx](https://mobx.js.org/README.html)，而不是直接呼叫```setState```

所以放在計時器裡面，就是每一個時間間隔重新render一次
更多關於處理state可以閱讀[React.Component API](https://reactjs.org/docs/react-component.html#setstate)

React Native的基本概念學完嘍！
[下一篇](https://hackmd.io/@charlo0602/BkbjkvQLU)筆記開始教排版