Trong bài này chúng ta sẽ tìm hiểu về các thành phần cơ bản nhất có trong React Native

Để làm việc với react native chúng ta cần phải biết được các khai niệm cơ bản sau :

Component
JSX
Props
State

PHẦN 1 : Components

React component là thành phần quan trọng trong react native mọi view, màn hình đều được coi là 1 component. trong 1 màn hình lại được chia thành các nhiều component

Trong React Native chúng ta có các loại component

Core components là các component được định nghĩa sẵn trong thư viện (Bài sau sẽ rõ)
community components là các component được viết bởi cộng đồng (Bài sau sẽ rõ)
core components là các component của chúng ta định nghĩa.

Các tạo 1 component của bạn (trong hướng dẫn của mình chỉ đề cập đến function component)

Tạo components Hello

import React from "react";
// cần import React khi khai báo component
import { Text } from "react-native";
// inport Text component core có sẵn ở thư viện để hiển thị text
const Hello = ()=>{
    return (
        <Text>Xin chào quí zị</Text> 
    )
}
export default Hello;
// export default để có thể sử dụng component Hello của bạn

Sử dụng components Hello trong App.tsx thôi nào?

Mở file App.tsx chỉnh sửa như sau :

import React from "react";
import Hello from "./components/Hello";
const App = ()=> {
  return ( 
        <Hello />
   );
}
export default App;

Chạy dự án và xem kết quả nhé:

PHẦN 2 : Cú pháp JSX:

JSX là một cú pháp mở rộng của javascript cho nên chúng ta có thể sử dụng biến và các biểu thức trong javascript

Trong react native JSX nằm trong thư viện React

Tìm hiểu thêm về JSX : https://reactjs.org/docs/introducing-jsx.html

import React from "react";
import { Text } from "react-native";
const App = ()=> {
    const fullName = 'Nguyễn Văn A';
    const check = true;
    const list = ['Nguyễn Văn A','Nguyễn Văn B'];
    return ( 
        <>
            <Text>{fullName} {check?'OK':'NOt'} </Text>
            <Text>{check ? HEllo : Ok}  </Text>

            {list.map((value,index)=>{
                return (
                   <Text> {value} </Text>
                )
            })}
        
    );
}
export default App;

Kết Quả :

PHẦN 2 : Props trong React Native:

Props viết tắt cua properties(thuộc tính)

Mỗi component có thể nhận props từ component cha các tham số này có thể là khác nhau khi chúng được tạo ra.

Giá trị của props sẽ không thay đổi trong các component, nó chỉ đọc giá trị của props mà thôi

Ví Dụ: Tạo component

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

type AccountProps = {
    name:string,
    age:number
}
const Account = ({name,age}:AccountProps)=>{
    

    return (
        <>
            <Text>Xin chào tên tôi : {name} tôi : {age} tuổi</Text>
        </>
    )
}


const App = ()=> {
    return ( 
        <>
            <Account name="Nguyễn Văn A" age={18} />
            <Account name="Nguyễn Văn B" age={20} />
        </>
    );
}
export default App;

Ở Ví dụ trên ta tạo ra component có nhận vào props là name, age ,và trong App component ta gọi đến component Account 2 lần và truyền vào giá trị props khác nhau.

PHẦN 2 : State trong React Native:

State là dữ liệu nội bộ của 1 component, khác với props state có thể thay đổi giá trị bất kể khi nào mong muốn.

State chỉ tồn tại trong phạm vi component chứa nó.

Khi giá trị State thay đổi thì component đó sẽ render lại.

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

type AccountProps = {
    name:string,
    age:number
}
const Account = ({name,age}:AccountProps)=>{
    const [check,setCheck] = useState(true);
    
    return (
        <>
            <Text>Xin chào tên tôi : {name} tôi : {age} tuổi</Text>
            <Button
                onPress={() => {
                    setCheck(false);
                }}
                disabled={!check}
                title={check ? 'Ấn vào tôi' : 'Thank you!'}
            />
        </>
    )
}

Trong vidu trên ta khai kháo state sử dụng useState

import React, { useState } from "react";

const [check,setCheck] = useState(true);

Cập nhật giá trị của state khi người dùng ấn vào button

<Button

onPress={() => {

setCheck(false);

}}

disabled={!check}

title={check ? 'Ấn vào tôi' : 'Thank you!'}

Sau đó render lại view

Bài 2 : Các thành phần cơ bản có trong React Native