Bắt đầu ứng dụng React Native

Mở đầu:

Xem hướng dẫn cài đặt từ website: https://reactnative.dev/docs/environment-setup

Tra cứu tài liệu https://reactnative.dev/docs/ vào trang và sử dụng tính năng tìm kiếm để tra cứu

Bảng đối chiếu các thẻ trong code  https://reactnative.dev/docs/intro-react-native-components

Bạn nên cài thêm extension https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets vào phần mềm Visual Studio code

 

Bước 1: Tạo project mới

Xem câu lệnh mẫu https://reactnative.dev/docs/getting-started-without-a-framework

Tại cửa sổ lệnh bạn chạy lệnh:

npx @react-native-community/cli@latest init <Tên_project>

ví dụ tạo project có tên là Demo01

npx @react-native-community/cli@latest init Demo01

Chú ý: Sau khi tạo xong thì nên vào Menu File của vs code → open folder và chọn thư mục project vừa tạo để chỉ mở duy nhất 1 project trên 1 cửa sổ để tránh nhầm lẫn file khi bạn mở nhiều project. Nếu muốn mở project khác để tham khảo thì vào File → new window → mở thư mục khác.

Bước 2: Chạy project

npm start

Sau khi chạy lệnh trên màn hình Metro xuất hiện, bạn lựa chọn bằng cách bấm phím theo hướng dẫn để chọn thiết bị chạy. VD: bấm a để chạy android.

Bước 3: Sửa code

Sau khi chạy lên máy ảo thành công, thì mở file App.tsx ra xóa hết, viết code mới.
Viết code bằng cách sử dụng snipet:    viết rnfe  sau đó enter  (Chữ RNFE) VS code sẽ tự điền code mẫu:
Code đầu tiên sẽ chỉ đơn giản là hiển thị lên màn hình dòng chữ

import { View, Text } from 'react-native'
import React from 'react'
const App = () => {
 return (
   <View>
     <Text>Xin chào Zezo.dev</Text>
   </View>
 )
}
export default App

Sau khi sửa code, bấm Ctrl +S để lưu file, trên máy ảo sẽ tự load lại nội dung bạn sẽ nhìn thấy dòng chữ Xin chào Zezo.dev

Trong code trên:

– Thẻ View: là thẻ chia khối hiển thị nội dung

– Thẻ Text: là thẻ hiển thị chữ, bất kỳ chữ cái nào muốn in ra màn hình cũng phải để trong thẻ Text, không được để trực tiếp ở thẻ View

Bước 4: Cải tiến code để thêm định dạng

 

import { View, Text} from 'react-native'
import React from 'react'
// viết các lệnh js ở đây


const App = () => {
 // viết các lệnh js ở đây


 // lệnh return bắt buộc phải có 1 component gốc, ở ví dụ này là thẻ View
 return (
   <View style={     {backgroundColor:"yellow", margin:20, padding:20}     }>
     <Text>Viết chữ thì bắt buộc phải để trong thẻ Text </Text>
     <Text style={   {fontSize:30, color:"red",fontStyle:"italic"}   }>Dòng thứ 2</Text>
     <Text>Dòng thứ 3</Text>
   </View>
 )
}

Bước 5: Cải tiến code để tách phần định dạng ra ngoài phần view

import { View, Text, StyleSheet } from 'react-native'
import React from 'react'
// viết các lệnh js ở đây


const App = () => {
 // viết các lệnh js ở đây


 // lệnh return bắt buộc phải có 1 component gốc
 return (
   <View style={   st.khungBao       }>
     <Text>Viết chữ thì bắt buộc phải để trong thẻ Text </Text>
     <Text style={   st.vanBan  }>Dòng thứ 2</Text>
     <Text>Dòng thứ 3</Text>
   </View>
 )
}

// viết đối tượng style
const st = StyleSheet.create( {
     khungBao : {backgroundColor:"blue", margin:20, padding:20},
     vanBan : {fontSize:30, color:"yellow",fontStyle:"italic"}
});

export default App