คัมภีร์การเริ่มต้น React Native ฉบับ 20scoopsCNX 2021 (Part 1)

Photo by Syd Wachs on Unsplash

สวัสดีครับ ☺️ บทความนี้จะเป็น Getting started สำหรับ React Native แต่ก็อาจเป็นเรื่องใหม่ของคนที่เคยเขียนมาก่อนแล้วก็ได้นะครับ เพราะในบทความนี้เราจะใช้ Stack ใหม่ ซึ่งเป็น Stack ปัจจุบันที่ทาง 20scoops ใช้ทำงานกับฝั่งยุโรปครับ ซึ่ง Stack เหล่านั้น ได้แก่

• Phase 0: Setting up environment
• Phase 1: Creating a new project
• Phase 2: Adding Typescript
• Phase 3: Preparing stack with React Navigation
• Phase 4: Connecting GraphQL with Apollo
• Phase 5: Styling things with Styled components
• Phase 6: Making List with Recyclelistview
• Phase 7: Using SVG as an icon
• Phase 8: Let’s go to next screen
• Phase 9: Managing app ‘s state with Redux Toolkit
• Phase 10: Get specific info from GraphQL

Phase 0: Setting up environment

การ Setup environment นั้นทาง Official ได้มี Document ที่สามารถทำตามได้เลยครับ ตามนี้ครับ

Setting up the development environment · React Native

ต่อไปเราก็จะเริ่ม เนื้อหาจริงๆ ของบทความนี้กันครับ

Phase 1: Creating a new project

ตามที่บอกไปข้างต้นว่าเราจะใช้ Typesript กัน ซึ่งทาง React Native CLI ก็มี Command ที่สร้างมาแบบ Typescript template ให้อยู่แล้ว แต่ว่าในบทคามนี้เราจะสร้าง Project แบบดังเดิมแล้วใส่ Typesript เองกันครับ

เริ่มจาก การสร้าง Project ผ่าน CLI

npx react-native init AwesomeProject

หลังจากทุกอย่างเสร็จหมด เราก็มาลอง Run ดูผลลัพธ์กันครับ
ซึ่งวิธีการ Run project ก็มีหลายวิธีด้วยกันแล้วแต่ความชอบครับ จะรันด้วย xcode/Android studio หรือ Command

npx react-native run-android
npx react-native run-ios

แนะนำให้ Run ผ่าน Command line ก่อน เพราะเราจะยังไม่สนใจผลที่แสดงออกมานะครับ มันยังเป็น Default Template อยู่เลย 😀

Phase 2: Adding Typescript

เราจะมาเปลี่ยนภาษาที่ใช้ในการพัฒนาของ Project ให้กลายเป็น Typescript กันนะครับ เริ่มจากการลง Dependencies ตามนี้ 👇

npm install -D typescript @types/react @types/react-native

หลังจากนั้น เราก็จะสร้าง tsconfig.json ไว้ที่ Root folder ของ Project

ต่อมา เราก็จะแก้ Files หลัก ๆ ทั้งหมดจาก Javascript ให้เป็น Typescript ซึ่งใน Project ขณะนี้ก็จะมี App.js ซึ่งเราจะไม่ยุ่งอะไรกับ index.js อยู่แล้วครับ ซึ่งเราจะทำการเปลี่ยนชื่อไฟล์จาก App.js ไปเป็น App.tsx ก็พอ

หลังจากเปลี่ยนชื่อไฟล์แล้ว ถ้าหากเราใช้ IDE หรือ Text Editor ที่ Support Typescript อยู่แล้ว เราก็จะเห็น tsc error ขึ้นแดง ๆ เตือนในไฟล์ App.tsx แต่ถ้าไม่มีก็ให้เพิ่ม Script ลงใน package.json ตามนี้เลย

"scripts": {
  ...
  "tsc": "tsc"
},

ที่นี้ก็ลอง Run command ตามล่างเพื่อทำการ Complie ดูสิว่าจะเป็นอย่างไร 🤔

npm run tsc

ถ้าเห็น Error แล้วอย่าเพิ่งตกใจ และการแก้สิ่งที่เราไม่รู้เรื่องมันเสียเวลา และเราก็จะไม่ได้ใช้มันอยู่ดี เพราะฉะนั้นเราก็จะแก้ App.tsx ให้เป็นดังนี้ครับ

เพียงเท่านี้ Error ก็จะหายไปในพริบตา Magic 🧙‍♀️

Phase 3: Preparing stack with React Navigation

npm install @react-navigation/native

แล้วก็ตามด้วย Dependencies ที่แนะนำโดย Official Doc ตามนี้ได้เลย Copy + Paste + Enter แจ่ม!

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

และในบทความนี้เราจะเจาะจงไปที่การใช้ระบบ stack เราจึงต้องลง Package ที่ชื่อว่า Stack ด้วย

npm install @react-navigation/stack

ต่อไปเราจะกลับไป Update ไฟล์ App.tsx ตามที่ Official Doc ได้แนะนำไว้เพื่อป้องกันการ Crash ของ Application ของเรานะครับ

และเนื่องจากนี่จะเป็นการสร้าง Files ที่เกี่ยวข้องกับ App โดยตรง ผมก็จะชอบเอาไว้ใน Folder ที่ชื่อว่า src แล้วข้างในก็จะแยก Folder เป็นเรื่อง ๆ อีกที (เดี๋ยวจะค่อย ๆ บอกในแต่ละเรื่องอีกที) 📝

และสำหรับเรื่อง Routing ผมจะชอบแยกไว้ 2 folders คือ

• navigation: สำหรับใส่พวก Stack หรือ Setup ที่เกี่ยวกับการ routing
• screens: สำหรับเก็บพวก Components ที่จะทำเป็น Scene (ไม่รวม Components ย่อย)

ก่อนอื่น เราจะสร้างหน้าแรกของเราไว้ก่อนนะครับ ซึ่งผมจะใช้ชื่อว่า HomeScreen.tsx ไว้ที่ Screens

ต่อไปเราก็จะจัดการระบบ Stack ของเรา โดยผมจะตั้งชื่อว่า MyStack.tsx ไว้ที่ Navigation

หลังจากนั้นเราก็จะใช้ MyStack กับ App ของเราโดยการ Update App.tsx ดังนี้

เท่านี้ก็เป็นการเตรียม Stack ของเราเป็นที่เรียบร้อย งั้นเราลองมาดูผลลัพธ์กันดีกว่า

NOTE: การลง Dependency บางอัน เราก็ควรจะไป ทำการ Run command ที่โฟลเดอร์ iOS ด้วยคำด้านล่างนี้

pod install

Phase 4: Connecting GraphQL with Apollo

การเขียน Application โดยทั่วไปแล้วเรามักจะมีการติดต่อกับ Backend อยู่แล้ว ซึ่งในบทความนี้เราจะใช้ GraphQL เพื่อนำข้อมูลมาแสดงบน Application ของเรา ป่ะ เราไปทำพร้อม ๆ กัน

อันดับแรกเราก็จำเป็นต้อง Install package ของ GraphQL กันก่อน

npm install @apollo/client graphql

แล้วเราก็จะมา Update App.tsx เพื่อให้ต่อกับ GraphQL ดังนี้

จากนั้น เราก็จะ update HomeScreen.tsx ให้ลอง Query ข้อมูลมาดูครับ โดยโจทน์ของเราคือการทำเอาตัวละคร Hero ต่าง ๆ มาแสดงให้อยู่บน List หน้าตา Code ก็จะออกมาประมาณนี้ 🙌

ทีนี้เราก็จะมาลองดูค่าที่เรา console.log ไว้นะครับ โดยวิธีดูก็คือการเปิด Debugger และเราสามารถเปิดโดยการเลือก Open debugger ที่ Developer menu ส่วนวิธีการเปิด Developer menu มีดังนี้

• Android Emulator: cmd + m
• iOS Simulator: cmd + d หรือ Device -> Shake
• Real devices: เขย่าเครื่อง

ซึ่งเราจะถูกพาไปหน้าแสดงผลลัพธ์อัตโนมัติ และผลที่ได้ก็จะประมาณนี้ครับ

NOTE: เราจะลง React Native Debugger เพื่อเพิ่มประสิทธิภาพในการ Debugging ด้วย และในบทความนี้จะมีการใช้เพื่อ Debugging ในช่วงท้าย ๆ ของบทความนี้ครับ

Phase 5: Styling things with Styled components

หลังจากเรามีข้อมูลพร้อมเรียบร้อยแล้ว ก็มาถึงเวลาที่เราจะมาตกแต่งเพื่อแสดงข้อมูลในรูปแบบที่เราต้องการ ซึ่งเราจะใช้ตัวช่วยนั้นก็คือ Styled system และ Styled components ซึ่งสองอย่างนี้จะทำให้ Code ของเราดู​ Clean ขึ้นมาก และบวกกับถ้าคนที่คุ้นเคยกับ CSS ก็จะคุ้นเคยกับการ Styling เข้าไปอีก ซึ่งปกติแล้วการ Styling ของ React Native จะอยู่ในรูปแบบ Object 💪

เริ่มจากการ Install packages ที่คุ้นเคย

npm i styled-system styled-components

หลังจากนั้น เราก็จะมาเตรียม Theme เพื่อที่จะนำไปใช้โดยผมจะชอบแยก Folder แยกไว้เลยคือ Theme และข้างในก็จะ มี index.ts เพื่อรวบรวมค่า Theme ทั้งหมดกับ Files ย่อยแยกตามเรื่องต่างๆ เช่น colors.ts, fonts.ts และ spaces.ts เป็นต้น

แต่ในบทความนี้เราจะใช้กับ Colors อย่างเดียว ก่อนอื่นเราก็เตรียม colors.ts ไว้ที่โฟลเดอร์ Theme ดังนี้

และก็สร้างไฟล์ index.ts ที่โฟลเดอร์ Theme เพื่อให้เข้าใจง่ายต่อการนำไปใช้งาน

หลังจากนั้นเราก็จะเอา Theme ไปใช้กับ App ของเรา โดยการ Update App.tsx ดังนี้

เท่านี้ก็เป็นการเตรียม Theme และพร้อมที่จะเอาไปใช้กับ Styled system และ Styled components แต่เราจะเห็นว่ามี tsc error อยู่ที่บรรทัดนี้

import {ThemeProvider} from 'styled-components';

ซึ่งเราก็สามารถ Fix ได้โดยการลง type ของ dependency ดังนี้

npm install @types/styled-components @types/styled-components-react-native

แค่นี้ tsc error ก็จะหายไป เมื่อเราได้เตรียม Theme เรียบร้อยแล้ว เราก็จะมาลองสร้าง Component แรกกัน ซึ่งเริ่มจาก Component ง่ายๆ ที่ไม่ขึ้นอยู่กับข้อมูลนั้นคือ Loading state หรือ Spinner

ซึ่ง Component ย่อยๆ ผมจะชอบเก็บแยกไว้ที่ Folder ชื่อ components เริ่มจากสร้าง Spinner.tsx ไว้ที่ components ดังนี้

ต่อไปเราก็จะนำเอา Component Spinner ที่เราได้สร้างไว้ไปใช้ในการทำ Loading ของ HomeScreen.tsx ดังนี้

ซึ่งผลลัพธ์ที่ได้ก็จะออกมาดูดีประมาณนี้ครับ

ต่อไปก็ถึงเวลาที่เราจะทำตัวแสดงข้อมูลที่เราได้มาจาก GraphQL กันครับ เริ่มจากสร้าง Componet เพื่อแสดงข้อมูลของแต่ละ Row ก่อน ซึ่งผมจะตั้งชื่อว่า HeroCard.tsx และไว้ที่โฟลเดอร์ components ดังนี้

ต่อมาเราก็ต้องนำเอา Component ที่เราได้สร้างขึ้นมาประกอบเข้าด้วยกัน โดยการเข้าไป Update HomeScreen.tsx ดังนี้

Run ดูสักทีเป็นไรกันเชียว ซึ่งผลออกมาก็จะประมาณนี้ครับ

แล้วเมื่อได้ผลลัพธ์ตามที่คาดหวังแล้วมาเช็ค tsc error กันดีกว่าครับ และเราก็จะพบปัญหาอยู่การเรียกใช้ theme ใน styled-components ซึ่งเราก็สามารถแก้ไขโดยการสร้าง styled.d.ts ใน Folder ชื่อ theme ดังนี้

เพื่อให้ Typescript รู้ว่า Theme ของเราประกอบไปด้วยอะไรบ้าง

เอาล่ะ พักเบรคกันหน่อยนะครับ แล้วเราจะไปต่อกันที่ Part 2 กันนะครับ ซึ่งเป็นการทำให้ Application ของเราสมบูรณ์ยิ่งขึ้น จะมีการ Render ตามข้อมูลที่มีจนไปถึงแสดง Detail อีกหน้า ถ้าพร้อมแล้วก็ไปลุยพร้อม ๆ กันเลย 👇

คัมภีร์การเริ่มต้น React Native ฉบับ 20scoopsCNX 2021 (Part 2)

Happy Continue 👉