React Native : dev iOS ตอนท่ี 1

Intro ก่อน

React Native VS React — ข้อแตกต่างระว่างสองสิ่งนี้ก็คือ ตัว native มันใช้ native component แทนที่จะเป็น web component แต่เราก็จำเป็นต้องเข้าใจคอนเซปหลักของ React ในการศึกษา React Native ด้วย อาทิเช่น — JSX, components, state, และ props อีกทั้งยังมีสิ่งที่เป็น React-Native-specific ให้เราศึกษาเพิ่มเติมด้วย

React Native มันมาพร้อมกับ ES6 (ES2015) ซึ่งเป็นการพัฒนาจาก JavaScript แม้ว่าปัจจุบันมันจะเป็น official standard แล้วก็ตาม แต่บางบราวเซอร์ก็ยังไม่รองรับ ตัวอย่างของ ES6 syntax ก็เช่น import, from, class, extends และ () =>

อีกสิ่งหนึ่งที่น่าสนใจก็คือ JSX syntax เมื่อเปรียบเทียบกับ framework หลายๆตัวที่ยอมให้เรา embdedโค้ดเข้าไปใน markup language ได้ ในทางตรงข้าม React ยอมให้ embed XML เข้าไปในโค้ด (JavaScript) ยกตัวอย่างเช่นโค้ดข้างล่างนี้ (จะถูกเขียนในไฟล์ index.ios.js)

<Text>Hello world!</Text>

import React, { Component } from ‘react’;
import { AppRegistry, Text } from ‘react-native’;
class HelloWorldApp extends Component {
render() {
return (
<Text>Hello world!</Text>
);
}
}
AppRegistry.registerComponent(‘HelloWorldApp’, () => HelloWorldApp);

HelloWorldApp ถูกเรียกว่าเป็น component หนึ่ง ในแต่ละ component จำเป็นต้องมีฟังก์ชัน render เพื่อจะโยน JSX ออกมาแสดงผล

AppRegistry เป็นตัวที่บอก React Native ว่า component ไหนที่เป็นจุดเริ่มต้นของแอพพลิเคชัน

ก่อนจะลงรายละเอียดไปมากกว่านี้ ลองติดตั้ง environment ก่อนดีกว่า

เริ่มติดตั้ง

ติดตั้ง node และ watchman

$ brew install node 
$ brew install watchman

ติดตั้ง React Native CLI

$ npm install -g react-native-cli

ติดตั้ง Xcode

เริ่มสร้างโปรเจคใหม่

เปิด terminal ขึ้นมาแล้วไปที่ path ที่ต้องการให้เป็นที่อยู่ของแอพพลิเคชัน

$ cd path_you_want

​รันคำสั่งในการสร้างโปรเจคใหม่ (AwesomeProject เป็นชื่อของโปรเจค ที่เรากำลังจะสร้าง)

$ react-native init AwesomeProject

ลองสำรวจดูไฟล์และโฟลเดอร์ที่ถูกสร้างขึ้น
- โฟล์เดอร์ node_modules จะมี React Framework อยู่
- โฟล์เดอร์ ios จะมี Xcode project อยู่ รวมถึงโค้ดบางส่วนที่จำเป็นในการเริ่มรัน

- โฟล์เดอร์ ios จะมี Xcode project อยู่ รวมถึงโค้ดบางส่วนที่จำเป็นในการเริ่มรัน

ลองเปิด Xcode project ขึ้นมา แล้วรันโดยใช้ simulator simulator จะรันขึ้นมาพร้อมกับข้อความทักทายจาก React Native

อีกวิธีที่ใช้รัน simulator ขึ้นมาคือ ใช้ command

$ react-native run-ios

สังเกตได้ว่ามี terminal ถูกเปิดขึ้นมาด้วย ซึ่งเป็น React Native Packager ที่รันภายใต้ node ไม่ต้องปิด terminal นี้

Text Edit ที่ใช้

ในที่นี้ใช้ Brackets ในการโค้ด

เริ่มโค้ด!

เปิด project folder โดยใช้ Brackets แล้วมองหาไฟล์ index.ios.js แล้วแก้ไข code ที่เป็นข้อความที่แสดงใน simulator

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.