Bài 3 : Làm quen với Props và State trong React Native

  • Bắt đầu tạo Project HelloWorld

Giống như khi bắt đầu học với mọi ngôn ngữ lập trình khác, điều đầu tiên sau khi cài đặt xong môi trường đó là các em sẽ tạo project đầu tiên đặt tên là HelloWorld. Nếu em nào quên mất các tạo và chạy thử project thì xem lại bài trước nhé.

Theo hướng dẫn của bài hôm trước, chúng ta sẽ sử dụng Visual Studio Code để lập trình React Native. Sau khi tạo project thành công các em làm theo các bước sau để mở project HelloWorld

B1 : Mở chương trình Visual Studio Code

B2 : Mở thư mục project và kéo thả thư mục vào cửa sổ chương trình Visual Studio Code hoặc các em chọn File -> Open -> Thư mục HelloWorld.

Sau khi hoàn thành chương trình có giao diện như sau :

Cấu trúc của project được tạo bởi Expo sẽ khác 1 chút so với project tạo bởi React Native . Các em sẽ không còn thấy file index.os.js or index.android.js nữa, thay vào đó là file App.js

Từ trên xuống project ReactNative được tạo bởi Expo có các thành phần chính mà chúng ta cần quan tâm trước tiên

  • assets : Là thư mục chứa toàn bộ ảnh của ứng dụng. Lưu ý : chỉ sử dụng ảnh .png
  • node_modules : là thư mục chứa các file thư viện js, chúng ta không thêm, sửa xóa tại thư mục này nếu không cần thiết. Lưu ý : khi gặp lỗi phát sinh từ thư mục này. Các em khắc phục bằng cách xóa thư mục và truy cập Terminal (hoặc CMD) nhập “npm install” để cài đặt lại
  • App.js : là màn hình đầu tiên ứng dụng sẽ hiển thị sau màn hình chào hay còn gọi là màn hình Splash
  • app.json : là file cài đặt 1 số thông tin của ứng dụng bao gồm : icon, tên, màn hình chào… và 1 số thiết lập cơ bản khác chúng ta sẽ tìm hiểu sau
  • Các file còn lại là các file thiết lập thư viện nếu không cần thay đổi trong các tình huống cụ thể, các em không chỉnh sửa để tránh lỗi phát sinh

Như vậy để bắt đầu chỉnh sửa code, các em sẽ mở file App.js. trong file App.js sẽ có các thành phần như sau :

import React from ‘react’;
import { StyleSheet, Text, View } from ‘react-native’;

Là dòng lệnh để import các thư viện cần thiết khi sử dụng.

Trong React Native, mọi thành phần hiển thị trên màn hình thiết bị đều là 1 Component. Trong hình 1 màn hình sẽ là 1 class được kế thừa React.Component.
Trong class App chúng ta sẽ thấy hàm render chịu trách nhiệm “vẽ” các giao diện nó chưa trong câu lệnh return.

Các em lưu ý : trong câu lệnh return chỉ chứa duy nhất được 1 đối tượng Component (ở đây là View) . Muốn tùy biến giao diện thì các thành phần khác sẽ nằm trong Root View này

styles là biến để tùy chỉnh giao diện như màu sắc, kích thước, vị trí … cho các Component hay các thành phần giao diện

  • Props là gì ?

Props là các tham số được khởi tạo sẵn và hầu như toàn bộ các Component trong React Native đều có sẵn các tham số này để lập trình viên tùy chỉnh

Ví dụ : Chúng ta có 1 component cơ bản trong ReactNative là Image – dùng để hiển thị ảnh .

Khi khởi tạo 1 Image để hiển thị ảnh chúng ta sử dụng propssource để truyền đường link ảnh muốn hiển thị vào Image
Các em lưu ý : các props – tham số này là cố định, chúng ta không thay đổi được chỉ áp dụng và truyền giá trị vào sử dụng và không sử dụng props để cập nhật dữ liệu lên màn hình được mà chúng ta cần sử dụng khái niệm state sẽ được giới thiệu ở phần tiếp theo trong bài này

Ngoài các props được khởi tạo sẵn từ React Native chúng ta cũng có thể sử dụng trong các Component tự khởi tạo như ví dụ sau

Trong ví dụ trên chúng ta khởi tạo 1 component mới là Greeting để hiển thị dòng chữ Hello + tham số truyền vào .
Tại component App chúng ta truyền vào tham số theo cú pháp
<Greeting name = ‘HuyNguyen’/>
Để lấy giá trị của tham số name truyền vào trong component Greeting thì cú pháp là {this.props.name}

  • State là gì ?

Như vậy chúng ta đã tìm hiểu props và hiểu các dùng cơ bản của props. Tiếp theo chúng ta cùng tìm hiểu sử dụng 1 khái niệm nữa đó là state. Vậy state là gì ?

state là 1 trong 2 loại dữ liệu dùng để điều khiển component trong React Native (loại còn lại chính là props mà mình vừa tìm hiểu). giá trị của props sẽ giữ nguyên trong suốt quá trình or vòng đời của component, với state thì ngược lại chúng ta sẽ sử dụng state khi mong muốn thay đổi, cập nhật giá trị của state . Cụ thể trong ví dụ sau :


Thông thường chúng ta sẽ khai báo state bằng câu lệnh trong hàm khởi tạo của component như hình với cú pháp this.state = { name : null , phone : null ….}
Khi cần thay đổi dữ liệu chúng ta dùng cú pháp : this.setState({ name : ‘HuyNguyen’ })
state có thể có nhiều tham số và cách nhau bởi dấu phẩy.
Trong ví dụ : khi người dùng nhấn nút Update. chương trình gọi câu lệnh bên trong hàm onPress và set dữ liệu cho tham số name trong state đã khai báo thì giá trị của name sẽ được cập nhật lên Text rồi hiển thị lên màn hình

Kết : Như vậy chúng ta đã tìm hiểu xong props và state trong lập trình React Native. Nếu có câu hỏi, thắc mắc nào các em có thể bình luận tại đây nhé. Thầy sẽ trả lời trong thời gian sớm nhất. Chúc các em 1 ngày học tập và làm việc hiệu quả, vui vẻ