Mô tả UI

Component đầu tiên của bạn

Ứng dụng React được xây dựng từ những phần UI độc lập gọi là component. Một React component là một JavaScript function mà bạn có thể thêm markup vào. Component có thể nhỏ như một nút bấm, hoặc lớn như toàn bộ trang. Đây là một component Gallery render ba component Profile:

function Profile() {
  return (
    <img
      src="https://i.imgur.com/MK3eW3As.jpg"
      alt="Katherine Johnson"
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

Ready to learn this topic?

Đọc Component Đầu Tiên Của Bạn để học cách khai báo và sử dụng React component.

Read More

---

Import và export component

Bạn có thể khai báo nhiều component trong một file, nhưng file quá nhiều component có thể khó sử dụng. Để giải quyết điều này, bạn có thể export một component vào file riêng của nó, và sau đó import component đó từ file khác:

import Profile from './Profile.js';

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

Ready to learn this topic?

Đọc Import và Export Component để học cách tách component vào file riêng của chúng.

Read More

---

Viết markup với JSX

Mỗi React component là một JavaScript function có thể chứa một số markup mà React render vào trình duyệt. React component sử dụng phần mở rộng cú pháp được gọi là JSX để hiển thị markup đó. JSX trông rất giống HTML, nhưng nó nghiêm ngặt hơn một chút và có thể hiển thị thông tin một cách linh động.

Nếu chúng ta dùng y hệt markup HTML vào một React component, nó chưa chắc sẽ hoạt động:

export default function TodoList() {
  return (
    // This doesn't quite work!
    <h1>Hedy Lamarr's Todos</h1>
    <img
      src="https://i.imgur.com/yXOvdOSs.jpg"
      alt="Hedy Lamarr"
      class="photo"
    >
    <ul>
      <li>Invent new traffic lights
      <li>Rehearse a movie scene
      <li>Improve spectrum technology
    </ul>

Nếu bạn hiện có HTML như thế này, bạn có thể sửa nó bằng cách sử dụng trình chuyển đổi:

export default function TodoList() {
  return (
    <>
      <h1>Hedy Lamarr's Todos</h1>
      <img
        src="https://i.imgur.com/yXOvdOSs.jpg"
        alt="Hedy Lamarr"
        className="photo"
      />
      <ul>
        <li>Invent new traffic lights</li>
        <li>Rehearse a movie scene</li>
        <li>Improve spectrum technology</li>
      </ul>
    </>
  );
}

Ready to learn this topic?

Đọc Viết Markup với JSX để học cách viết JSX hợp lệ.

Read More

---

JavaScript trong JSX với dấu ngoặc nhọn

JSX cho phép bạn viết markup giống HTML bên trong file JavaScript, để giữ logic render và nội dung ở cùng một nơi. Đôi khi bạn sẽ muốn thêm một chút logic JavaScript hoặc tham chiếu đến một thuộc tính động bên trong markup đó. Trong tình huống này, bạn có thể sử dụng dấu ngoặc nhọn trong JSX để “mở cửa sổ” đến JavaScript:

const person = {
  name: 'Gregorio Y. Zara',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>{person.name}'s Todos</h1>
      <img
        className="avatar"
        src="https://i.imgur.com/7vQD0fPs.jpg"
        alt="Gregorio Y. Zara"
      />
      <ul>
        <li>Improve the videophone</li>
        <li>Prepare aeronautics lectures</li>
        <li>Work on the alcohol-fuelled engine</li>
      </ul>
    </div>
  );
}

Ready to learn this topic?

Đọc JavaScript trong JSX với Dấu Ngoặc Nhọn để học cách truy cập dữ liệu JavaScript từ JSX.

Read More

---

Truyền props cho component

React component sử dụng props để giao tiếp với nhau. Mọi component cha có thể truyền một số thông tin cho component con của nó bằng cách cung cấp props cho chúng. Props có thể khiến bạn nhớ đến thuộc tính HTML, nhưng bạn có thể truyền bất kỳ giá trị JavaScript nào qua chúng, bao gồm object, array, function và thậm chí cả JSX!

import { getImageUrl } from './utils.js'

export default function Profile() {
  return (
    <Card>
      <Avatar
        size={100}
        person={{
          name: 'Katsuko Saruhashi',
          imageId: 'YfeOqp2'
        }}
      />
    </Card>
  );
}

function Avatar({ person, size }) {
  return (
    <img
      className="avatar"
      src={getImageUrl(person)}
      alt={person.name}
      width={size}
      height={size}
    />
  );
}

function Card({ children }) {
  return (
    <div className="card">
      {children}
    </div>
  );
}

Ready to learn this topic?

Đọc Truyền Props cho Component để học cách truyền và đọc props.

Read More

---

Render theo điều kiện

Component của bạn thường sẽ cần hiển thị những thứ khác nhau tùy thuộc vào các điều kiện khác nhau. Trong React, bạn có thể render JSX theo điều kiện bằng cách sử dụng cú pháp JavaScript như câu lệnh if, toán tử && và ? :.

Trong ví dụ này, toán tử && JavaScript được sử dụng để render dấu kiểm theo điều kiện:

function Item({ name, isPacked }) {
  return (
    <li className="item">
      {name} {isPacked && '✅'}
    </li>
  );
}

export default function PackingList() {
  return (
    <section>
      <h1>Sally Ride's Packing List</h1>
      <ul>
        <Item
          isPacked={true}
          name="Space suit"
        />
        <Item
          isPacked={true}
          name="Helmet with a golden leaf"
        />
        <Item
          isPacked={false}
          name="Photo of Tam"
        />
      </ul>
    </section>
  );
}

Ready to learn this topic?

Đọc Render Theo Điều Kiện để học các cách khác nhau để render nội dung theo điều kiện.

Read More

---

Render danh sách

Bạn sẽ thường muốn hiển thị nhiều component tương tự từ một tập hợp dữ liệu. Bạn có thể sử dụng filter() và map() của JavaScript với React để lọc và chuyển đổi mảng dữ liệu của bạn thành mảng component.

Đối với mỗi item trong mảng, bạn sẽ cần chỉ định một key. Thông thường, bạn sẽ muốn sử dụng ID từ cơ sở dữ liệu làm key. Key cho phép React xác định từng item trong danh sách ngay cả khi danh sách thay đổi.

import { people } from './data.js';
import { getImageUrl } from './utils.js';

export default function List() {
  const listItems = people.map(person =>
    <li key={person.id}>
      <img
        src={getImageUrl(person)}
        alt={person.name}
      />
      <p>
        <b>{person.name}:</b>
        {' ' + person.profession + ' '}
        known for {person.accomplishment}
      </p>
    </li>
  );
  return (
    <article>
      <h1>Scientists</h1>
      <ul>{listItems}</ul>
    </article>
  );
}

Ready to learn this topic?

Đọc Render Danh Sách để học cách render danh sách component và cách chọn key.

Read More

---

Giữ component thuần khiết

Một số JavaScript function là thuần khiết. Một function thuần khiết:

• Chỉ quan tâm đến công việc của nó. Nó không thay đổi bất kỳ object hoặc biến nào đã tồn tại trước khi nó được gọi.
• Cùng đầu vào, cùng đầu ra. Với cùng đầu vào, một function thuần khiết luôn trả về cùng kết quả.

Bằng cách chỉ viết component của bạn như các function thuần khiết một cách nghiêm ngặt, bạn có thể tránh được một loạt bug khó hiểu và hành vi khó đoán khi codebase của bạn ngày càng lớn. Đây là một ví dụ về component không thuần khiết:

let guest = 0;

function Cup() {
  // Bad: changing a preexisting variable!
  guest = guest + 1;
  return <h2>Tea cup for guest #{guest}</h2>;
}

export default function TeaSet() {
  return (
    <>
      <Cup />
      <Cup />
      <Cup />
    </>
  );
}

Bạn có thể làm cho component này thuần khiết bằng cách truyền prop thay vì thay đổi biến đã tồn tại trước:

function Cup({ guest }) {
  return <h2>Tea cup for guest #{guest}</h2>;
}

export default function TeaSet() {
  return (
    <>
      <Cup guest={1} />
      <Cup guest={2} />
      <Cup guest={3} />
    </>
  );
}

Ready to learn this topic?

Đọc Giữ Component Thuần Khiết để học cách viết component như những function thuần khiết, dễ dự đoán.

Read More

---

UI của bạn theo cấu trúc cây

React sử dụng cây để biểu diễn các mối quan hệ giữa component và module.

Một React render tree là sự biểu hiện của mối quan hệ cha và con giữa các component.

Component gần đỉnh của cây, gần root component, được coi là component cấp cao nhất. Component không có component con là leaf (lá) component. Việc phân loại các component này hữu ích để hiểu luồng dữ liệu và hiệu suất render.

Biểu diễn mối quan hệ giữa các JavaScript module là một cách hữu ích khác để hiểu ứng dụng của bạn. Chúng ta gọi nó là module dependency tree.

Một dependency tree thường được sử dụng bởi các công cụ build để đóng gói tất cả code JavaScript liên quan cho client tải xuống và render. Bundle có kích thước lớn sẽ làm giảm trải nghiệm người dùng của ứng dụng React. Hiểu được module dependency tree sẽ giúp khắc phục những vấn đề như vậy.

Ready to learn this topic?

Đọc UI Của Bạn Theo Cấu Trúc Cây để học cách tạo render tree và module dependency tree cho ứng dụng React và cách chúng là những mô hình tư duy hữu ích để cải thiện trải nghiệm người dùng và hiệu suất.

Read More

---

Tiếp theo là gì?

Hãy chuyển đến Component Đầu Tiên Của Bạn để bắt đầu đọc chương này từng trang một!

Hoặc, nếu bạn đã quen thuộc với những chủ đề này, tại sao không đọc về Thêm Tương Tác?