React - Bài 1: Học React cơ bản - mở đầu về React

Tạo và lồng các thành phần:

React được tạo thành từ các thành phần (components). 1 component là 1 thành phần UI mà có logic và giao diện của nó. Có thể là button, hoặc 1 page. React component là 1 function JS trả về markup:

function MyButton() {
  return (
    <button>I'm a button</button>
  );
};

Bạn có thể lồng vào 1 component khác:

export default function MyApp() {
  return (
    <div>
      <h1>Welcome to my app</h1>
      <MyButton />
    </div>
  );
}

Viết markup với JSX:

Cấu trúc markup ở trên được gọi là JSX. Hầu hết dự án React dùng JSX. JSX chặt chẽ hơn HTML. Bạn phải dùng thẻ đóng như <br />. Component của bạn có thể trả về nhiều JSX tag. Bạn phải đóng nó lại trong 1 thẻ chung, ví dụ <div>...</div> hoặc thẻ trống <>...</>:

function AboutPage() {
  return (
    <>
      <h1>About</h1>
      <p>Hello there.</p>
    </>
  );
}

Thêm style:

Class: sử dụng className:

<img className="avatar" />

Viết CSS ở file CSS riêng:

.avatar {
  border-radius: 5px;
}

React không quy định việc thêm CSS. Cách đơn giản nhất là dùng <link> trong file HTML.

Hiển thị dữ liệu bằng dấu {...}:

return (
  <h1>
    {user.name}
  </h1>
);

return (
  <img
    className="avatar"
    src={user.imageUrl}
  />
);

Nhúng dữ liệu phức tạp hơn:

const user = {
  name: "John",
  imageUrl: "https://img.url/user/john.jpg",
  imageSize: 90,
}

export default function Profile() {
  return (
    <>
      <h1>{user.name}</h1>
      <img
        className="avatar"
        src={user.imageUrl}
        alt={'Photo of ' + user.name}
        style={{
          width: user.imageSize,
          height: user.imageSize,
        }}
      />
    </>
  );
}

Biểu thức điều kiện (conditional):

let content;
if (isLoggedIn) {
  content = <AdminPanel />;
} else {
  content = <LoginForm />;
}
return (
  <div>
    {content}
  </div>
);

Có thể dùng toán tử {conditional ? (op1) : (op2)}. Không giống như if, toán tử này hoạt động trong JSX:

<div>
  {isLoggedIn ? (
    <AdminPanel />
  ) : (
    <LoginForm />
  )}
</div>

Khi không cần else:

<div>
  {isLoggedIn && <AdminPanel />}
</div>

Render danh sách (list):

const listItems = products.map(product =>
  <li key={product.id}>
    {product.title}
  </li>
);

return (
  <ul>{listItems}</ul>
);

Phản hồi sự kiện:

Bạn có thể phản hồi sự kiện bằng cách khai báo event handler trong component:

function MyButton() {
  function handleClick() {
    alert('You click me!');
  }

  return (
    <button onClick={handleClick}>
      Click me
    </button>
  );
}

Update màn hình:

Sử dụng state để lưu trữ các trạng thái khác nhau của component và hiển thị ra màn hình.

Đầu tiên import useState từ React. Sau đó định nghĩa biến state trong component:

import { useState } from 'react';

function MyButton() {
  const [count, setCount] = useState(0);
  // ...

Bạn sẽ có 2 thứ: state hiện tại (count), và function để update (setCount). Ở lần đầu tiên button hiển thị, count = 0 vì bạn pass 0 cho useState(). Khi bạn muốn thay đổi state, gọi setCount() và set giá trị mới. Click button sẽ tăng giá trị biến đếm:

function MyButton() {
  const [count, setCount] = useState(0);
  
  function handleClick() {
    setCount(count + 1);
  }
  
  return (
    <button onClick={handleClick}
      Clicked {count} times
    </button>
  );
}

Nếu bạn sử dụng nhiều component <MyButton />, mỗi component sẽ có 1 state riêng.

Sử dụng Hooks:

Function bắt đầu bằng use được gọi là Hooks. useState là 1 hook được cung cấp bởi React. Bạn có thể tìm thêm các hook có sẵn tại API reference. Bạn cũng có thể tự viết hook. Hook hạn chế hơn các function khác. Bạn chỉ có thể gọi hook ở đầu component (hoặc hook khác). Nếu bạn muốn sử dụng useState trong 1 điều kiện hoặc vòng lặp, cần tạo ra 1 component mới và cho nó vào.

Chia sẻ dữ liệu giữa các components:

Ở ví dụ trước các button độc lập trạng thái (count). Để chia sẻ các trạng thái này với nhau, bạn cần di chuyển state này lên component cha. Trong ví dụ này chính là MyApp.

function MyApp() {
  const [count, setCount] = useState(0);
  
  function handleClick() {
    setCount(count + 1);
  }
  
  return (
    <div>
      <MyButton count={count} onClick={handleClick} />
      <MyButton count={count} onClick={handleClick} />
    </div>
  );
}

function MyButton({count, onClick}) {
  return (
    <button onClick={onClick}>
      Clicked {count} times
    </button>
  );
}

Javascript, React

React – Bài 1: Học React cơ bản – mở đầu về React

thietkeweb

Để lại một bình luận Hủy