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