Tìm hiểu về React Native (Phần 2)

Như đã nhắc ở cuối bài viết Tìm hiểu về react native(phần 1).Thì đây là những kiến thức về React component APIs cần nắm:

1. Components
2. JSX
3. props
4. state

Components là gì?

import React from 'react';
import {Text} from 'react-native';

const Cat = () => {
    return Hello, I am your cat!;
};

export default Cat;

Để có thể  định nghĩa Cat Component:

+ Sử dụng method “import” của JavaScript để import React

+ import “Text” Core Component từ react-native

+ Sử dụng functional Component

const  Cat = () => {};

+ Trong component bạn có thể hiển thị (render) các phần tử React 

ví dụ hiển thị  “Text” Core Component của react-native.

const Cat = () => {
  return <Text>Học React dễ mà, Bi ơi đừng sợ!</Text>;
};

Khi ra màn hình bạn sẽ nhìn thấy dòng chữ “Học React dễ mà, Bi ơi đừng sợ!“

React and React Native sử dụng cú pháp JSX, để viết các thành phần(components) bên trong JavaScript.

Nhìn thì giống thẻ HTML nhưng nó bắt đầu bằng chữ cái in hoa thay vì là chữ thường như thẻ HTML

ex: <Text>

Mọi biểu thức JavaScript thực hiện trong dấu ngoặc nhọn ‘{}’ bao gồm cả các lệnh gọi hàm:

ex: {getFullName(“Yến”, “Khải”, “Đạt”)}

import React from 'react';
import {Text} from 'react-native';

const getFullName = (
firstName: string,
secondName: string,
thirdName: string,
) => {
 return firstName + ' ' + secondName + ' ' + thirdName;
};

const Cat = () => {
 return <Text>Đây là người bạn của tôi {getFullName('Yến', 'Khải', 'Đạt')}!</Text>;
};
export default Cat;

Lưu ý: vì JSX được tích hợp trong thư viện React Nên cú pháp này sẽ không hoạt động nếu bạn không import React from ‘react’ ở đầu file component.js

Chỉnh sửa Components

Bạn có thể lồng 2 components vào bên trong “View” chúng sẽ được hiển thị cùng nhau.

ex: tôi có thể lồng Text, TextInput trong View component

import React from 'react';
import {Text, TextInput, View} from 'react-native';


const Cat = () => {
  return (
    <View>
      <Text>Hello, I am...</Text>
      <TextInput
        style={{
          height: 40,
          borderColor: 'gray',
          borderWidth: 1,
        }}
        defaultValue="Name me!"
      />
    </View>
  );
};


export default Cat;

Một vài điều lưu ý cho người lập trình:

Trên Android, View được đặt bên trong LinearLayout, FrameLayout, InteractiveLayout, v.v. để định nghĩa cách sắp xếp các view con trên màn hình. Trong React Native, View sử dụng Flexbox để sắp xếp view con. Bạn có thể tìm hiểu thêm trong hướng dẫn bố cục với Flexbox của chúng tôi.

Bất kỳ component nào hiển thị những components khác thì gọi là component cha.

ví dụ: chúng ta có hiển thị nhiều <Cat> components trong <Cafe> Component. Mỗi <Cat> là 1 thành phần duy nhất. Và bạn có thể custom thành phần này bằng “props”

import React from 'react';
import {Text, View} from 'react-native';


const Cat = () => {
  return (
    <View>
      <Text>I am also a cat!</Text>
    </View>
  );
};


const Cafe = () => {
  return (
    <View>
      <Text>Welcome!</Text>
      <Cat />
      <Cat />
      <Cat />
    </View>
  );
};


export default Cafe;

Props

Props là viết tắt của từ “properties”. Props giúp bạn có thể tùy chỉnh React components.

Ví dụ: tùy chỉnh cho mỗi <Cat> component hiển thị tên khác nhau.

import React from 'react';
import {Text, View} from 'react-native';


type CatProps = {
  name: string;
};


const Cat = (props: CatProps) => {
  return (
    <View>
      <Text>Hello, I am {props.name}!</Text>
    </View>
  );
};


const Cafe = () => {
  return (
    <View>
      <Cat name="Maru" />
      <Cat name="Jellylorum" />
      <Cat name="Spot" />
    </View>
  );
};


export default Cafe;

Hầu hết các React Native’s Core Components đều có thể tùy chỉnh với props.
ví dụ: chúng ta có tùy chỉnh nguồn lấy hình ảnh bằng cách props đường dẫn uri của “source”.

import React from 'react';
import {Text, View, Image} from 'react-native';


const CatApp = () => {
  return (
    <View>
      <Image
        source={{
          uri: 'https://reactnative.dev/docs/assets/p_cat1.png',
        }}
        style={{width: 200, height: 200}}
      />
      <Text>Hello, I am your cat!</Text>
    </View>
  );
};


export default CatApp;

<Image> component có rất nhiều thuộc tính khác có thể tùy chỉnh bao gồm cả style(thuộc tính liên quan tới thiết kế và giao diện của component)

Lưu ý: Để truyền JS object trong JSX, thì sử dụng dấu ngoặc kép “{{width: 200, height: 200}}“

Bạn có thể tùy chỉnh rất nhiều thứ với “props” nhưng để làm việc với những sự thay đổi tương tác trong component thì bạn cần sử dụng “state”

State

State được sử dung khi muốn giữ và quản lý state trong functional components .Hoặc khi muốn thay đổi dữ liệu và gọi hàm render lại UI khi state thay đổi.

sử dụng hook “useState” của React để thêm state vào component của bạn

const [state, setState] = useState(initialState);

 Có thể tìm hiểu thêm các loại hook ở bài này Các loại hook trong React 

– bạn cần  import useState from React ở đầu file component

import React, {useState} from 'react';

Mục đích sử dụng state:

• Lưu trữ và theo dõi trạng thái của ứng dụng 
• Ghi nhớ các giá trị thay đổi trong component

ví dụ: tôi cần tạo 1 biến state “isHungry” bằng cách sử dụng useState

const Cat = (props: CatProps) => {
  const [isHungry, setIsHungry] = useState(true);
  // ...
};

Bạn có thể sử dụng State để theo dõi sự thay đổi bất kỳ kiểu dữ liệu nào “strings, numbers, Booleans, arrays, objects”.
Ví dụ bạn có thể đếm số lần một con mèo được vuốt ve bao nhiêu lần với cú pháp:

const [soLanVuotVe, setsoLanVuotVe] = useState(0);

useState thực hiện 2 việc:

• Tạo ra 1 biến state(isHungry) và khởi tạo giá trị ban đầu cho biến này(true)
• tạo 1 hàm(setIsHungry) để thay đổi giá trị cho biến state(isHungry)

Bây giờ chúng ta sẽ gọi hàm này(setIsHungry) khi nhấn 1 nút thì thay đổi giá trị của biến state(isHungry) sẽ được tùy chỉnh thành (false). KhiisHungry có giá trị là false, disabled prop của button được set thành true và  title sẽ thay đổi.

<Button
  onPress={() => {
    setIsHungry(false);
  }}
  disabled={!isHungry}
  title={isHungry ? 'Pour me some milk, please!' : 'Thank you!'}
/>

import React, {useState} from 'react';
import {Button, Text, View} from 'react-native';


type CatProps = {
  name: string;
};


const Cat = (props: CatProps) => {
  const [isHungry, setIsHungry] = useState(true);


  return (
    <View>
      <Text>
        I am {props.name}, and I am {isHungry ? 'hungry' : 'full'}!
      </Text>
      <Button
        onPress={() => {
          setIsHungry(false);
        }}
        disabled={!isHungry}
        title={isHungry ? 'Pour me some milk, please!' : 'Thank you!'}
      />
    </View>
  );
};


const Cafe = () => {
  return (
    <>
      <Cat name="Munkustrap" />
      <Cat name="Spot" />
    </>
  );
};


export default Cafe;

Chú ý:
có 1 cú pháp thẻ mở “<>” và thẻ đóng </> ở bên trên sẽ được sử dụng khi bạn muốn trả về nhiều phần tử bằng cấp nhau(ở đây là phần tử Cat) không cần thẻ gói(thẻ để wap các phẩn tử con(Cat)).

Vì mỗi component khi hiển thị ra DOM sẽ trả về 1 thẻ gói(wrapper)

Nguồn dịch (https://reactnative.dev/)