ìm hiểu React Hook useState - ự học ReactJS căn bản đến nâng ca

import React, { useState } from "react";

const [nameState, funcUpdate] = React.useState(defaultState)

// Khởi tạo một state trong 
// class component
// Giá trị luôn là một object
this.state = {
  website: 'Zaidap.com.net'
}

// Khởi tạo state trong functional component
// sử dụng React hook: useState

//Khởi tạo state có kiểu dữ liệu là string
const [website, setWebsite] = React.useState('Zaidap.com.net');

//Kiểu dữ liệu là boolean
const [isLoading, setLoading] = React.useState(false);

.....

//Gọi React và useState
import React, { useState } from "react";

//Component hiển thi thêm nội dung
const MoreContent = () => {
  return (
    <p>
      
      1500s, when an unknown printer took a galley of type and scrambled it to
      make a type specimen book. It has survived not only five centuries, but
      also the leap into electronic typesetting, remaining essentially
      unchanged. It was popularised in the 1960s with the release of Letraset
      sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem
      Ipsum.
    </p>
  );
};

export default function App(props) {
  //Sử duụng useState 
  // isShow là một state
  // setShow là function giúp cập nhật state
  // Giá trị mặc định ban đầu của state là false
  const [isShow, setShow] = useState(false);
  return (
    <div>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</p>

      {isShow === true ? <MoreContent /> : ''}
      {isShow === false ? <a href="/#" onClick={() => {
        // Khi click vào button
        // cập nhật state bằng cách gọi hàm
        // setShow đã được khai báo bên trên/
        setShow(true)
      }}>Read more</a> : ''}
    </div>
  );
}

npm i axios

//Gọi React và useState
import React, { useState } from "react";
import axios from "axios"; //Sử dụng axios

//Component hiển thị danh sách người dùng
const ShowUser = (props) => {
  //Lấy giá tri của props listUser
  const { listUser } = props;

  // Render ra list user
  // React.Fragment cho phép bọc JSX lại.
  // List Keys :  chỉ định key, giúp loại bỏ cảnh báo.
  return (
    <div>
      {listUser.map((user, index) => {
        return (
          <React.Fragment key={user.id}>
            <ul>
              <li>{user.name}</li>
              <li>{user.email}</li>
            </ul>
            <hr />
          </React.Fragment>
        );
      })}
    </div>
  );
};

export default function App(props) {
  //Khai báo state, sử dụng hook: useState
  const [listUser, setListUser] = useState([]);
  const [isLoading, setLoading] = useState(false);

  //API chứa dữ liệu người dùng
  const getUserAPI =
    "https://5df8a4c6e9f79e0014b6a587.mockapi.io/Zaidap.com/users";

  //Hàm fetch API để lấy dữ liệu ng. dùng
  const getUser = () => {
    //Cập nhật lại giá trị của state loading
    setLoading(true);

    //Thực hiện gọi api
    axios
      .get(getUserAPI)
      .then((res) => {
        //Cập nhật giá trị của state listUser
        setListUser(res.data);
      })
      .catch((err) => {
        //Trường hợp xảy ra lỗi
        alert("Không thể kết nối tới server");
      })
      .finally(() => {
        // Câu lệnh trong này được khởi chạy mỗi khi call API xong
        // bất kể thất bại hay không.
        // ...
        setLoading(false); //Cập nhật giá trị của state isLoading
      });
  };

  return (
    <>
​      <code>Zaidap.com.net</code> <br />
      {isLoading ? "loading..." : <button onClick={getUser}>Get User</button>}
      <ShowUser listUser={listUser} />
    </>
  );
}

//Gọi React và useState
import React, { useState } from "react";
import axios from "axios"; //Sử dụng axios

//Component hiển thị danh sách người dùng
const ShowUser = (props) => {
  //Lấy giá tri của props listUser
  const { listUser } = props;

  // Render ra list user
  // React.Fragment cho phép bọc JSX lại.
  // List Keys :  chỉ định key, giúp loại bỏ cảnh báo.
  return (
    <div>
      {listUser.map((user, index) => {
        return (
          <React.Fragment key={user.id}>
            <ul>
              <li>{user.name}</li>
              <li>{user.email}</li>
            </ul>
            <hr />
          </React.Fragment>
        );
      })}
    </div>
  );
};

export default function App(props) {
  //Khai báo state, sử dụng hook: useState
  const [listUser, setListUser] = useState([]);
  const [isLoading, setLoading] = useState(false);

  //API chứa dữ liệu người dùng
  const getUserAPI =
    "https://5df8a4c6e9f79e0014b6a587.mockapi.io/Zaidap.com/users";

  //Hàm fetch API để lấy dữ liệu ng. dùng
  const getUser = () => {
    //Cập nhật lại giá trị của state loading
    setLoading(true);

    //Thực hiện gọi api
    axios
      .get(getUserAPI)
      .then((res) => {
        //Cập nhật giá trị của state listUser
        setListUser(res.data);
      })
      .catch((err) => {
        //Trường hợp xảy ra lỗi
        alert("Không thể kết nối tới server");
      })
      .finally(() => {
        // Câu lệnh trong này được khởi chạy mỗi khi call API xong
        // bất kể thất bại hay không.
        // ...
        setLoading(false); //Cập nhật giá trị của state isLoading
      });
  };

  return (
    <>
      <code>Zaidap.com.net</code> <br />
      {isLoading ? "loading..." : <button onClick={getUser}>Get User</button>}
      <ShowUser listUser={listUser} />
    </>
  );
}

npm start