[React Native Cơ Bản] Bài 2 : Sử dụng Visual Studio Code

Hi các em để tiếp tục, seri trong bài ngày hôm nay anh hướng dẫn cách import dự án React Native vào chương trình code editor Visual Studio Code để lập trình nhé.

Bước 1 : Mở chương trình Visual Studio Code vào kéo thả thư mục chứa dự án HelloWorld đã tạo ở bài 1 vào cửa sổ chương trình, Chọn Add Folder to Workspace

Kết quả :

Các thành phần trong dự án React Native Expo

Các thư mục chứa thư viện : .expo , .expo-share , node-modules
(chúng ta ko tự chỉnh sửa các thư mục này nhé)

Các file .json và file babel.config.js dùng để chứa các thông tin của app như màn hình chào, icon, tên ứng dụng, phiên bản phần mềm, thư viện …

File App.js là file màn hình đầu tiên của ứng dụng, mở file này có nội dung như sau :

Dòng 1,2 : Import các thư viện sử dụng

Dòng 4 : khai báo function . trong lập trình React Native – mọi thứ chúng ta nhìn thấy trên màn hình điện thoại đều được viết bởi function

Dòng 6 : Nơi khai báo các giao diện cho ứng dụng như Text, Image, Button … Nó có cấu trúc dạng thẻ tương tự như html, css.

Dòng 13 : khai báo styles tùy biến giao diện, tương tự như css trong thiết kế web

Thử sửa nội dung của thẻ Text thành Hello World và nhấn Ctrl + S. Chương trình lập tức cập nhật lên máy ảo, chứ ko mất thời gian build như Android Studio hoặc Xcode

Như vậy, Anh đã hướng dẫn các em cách mở dự án với Visual Studio Code, trong bài tiếp theo, chúng ta học cách sử dụng 2 biến cơ bản là Props và State (Hooks) trong React Native nhé