Make Mobile Application With React Native (Full Function)

Aphichan Chaiyutthasart

Published in

Witsawa Corporation

2 min readMar 21, 2021

วันนี้ มาเพิ่ม skill ให้ทีม dev

เราก็เลยจะมาสร้าง mobile application ด้วย react native และผองเพื่อนกัน

เพื่อลองใช้ library ที่อยากลองกัน

แล้วผองเพื่อนมีอะไรบ้างหละ ?

ได้แก่

redux — state management
react-navigation — navigation
facebook sdk — เราจะใช้ facebook login
firebase — ก็มีหลาย service เดี๋ยวจะใช้ firestore ในการเป็นตัวเก็บข้อมูลกัน
google analytics — เอาไว้ติดตามว่า user ใช้งาน app เราอย่างไรบ้าง น่าจะเชื่อมผ่าน firebase analytics
deeplink, universal link — link สำหรับเปิด app
unit test — jest test function and

ใครอยากไปส่อง code ก่อนดูได้ใน Github Repository

ak1103dev/react-native-todolist-2021 (github.com)

แต่มีเฉพาะ config ของ android เนื่องจากเวลาน้อยนะครับ

เริ่มจาก init project react native ด้วย react-native cli ก่อนเลย

Getting Started · React Native

2. มา setup Redux ด้วย Redux Toolkit (เป็นท่าที่คล้าย Rematch ที่เป็น Redux framework เลย)

Quick Start | Redux Toolkit (redux-toolkit.js.org)

// src/components/Counter.js เอาไว้ลองว่า redux ใช้งานได้import React from 'react';
import {View, Button, Text} from 'react-native';
import {useSelector, useDispatch} from 'react-redux';
import {decrement, increment, incrementByAmount} from '../store/models/counter';const Counter = () => {
  const count = useSelector(state => state.counter.value);
  const dispatch = useDispatch();return (
    <View>
      <Button title="Increment" onPress={() => dispatch(increment())} />
      <Text>{count}</Text>
      <Button title="Decrement" onPress={() => dispatch(decrement())} />
      <Button
        title="IncrementBy4"
        onPress={() => dispatch(incrementByAmount(4))}
      />
    </View>
  );
};export default Counter;