Khái niệm cơ bản về React

React là một thư viện JavaScript front-end do Facebook tạo ra. Nó tuân theo cách tiếp cận dựa trên thành phần giúp tạo các phần tử giao diện người dùng có thể tái sử dụng.

1. JSX trong React

Thường JSXchỉ đường cú pháp choReact.createElement(component, props, ...children)

Mã JSX:

<div>My Name is Hossain</div>

React.createElement("div", null, "My Name is Hossain");

Chúng tôi có thể chuyển bất kỳ biểu thức javascript nào trong đạo cụ với {}. Chạy ví dụ dưới đây:

<Component sum={5 + 9 + 1} />

3. Chữ viết chuỗi

Chúng ta có thể truyền một chuỗi làm chỗ dựa. có hai biểu thức JSX là tương đương. nó giống như thuộc tính HTML.

<Component name="Hossain" />
<Component name={'Hossain'} />

Chúng tôi đã có thể có các đạo cụ như một đối tượng và chúng tôi đã chuyển các đạo cụ trong JSX. chúng ta có thể sử dụng ...toán tử "lây lan" để chuyển một đối tượng đạo cụ.

const App = () => {
  const props = {name: 'Hossain', age: 20};
  
  return <Person {...props} />
}

Bạn có thể chuyển thêm JSX dưới dạng con props.childrenhoặc Hiển thị thành phần lồng nhau giống như HTML.

<Container>
  <App1 />
  <App2 />
</Container>

defaultPropscó thể được xác định tài sản trong classthành phần. nó đặt các đạo cụ mặc định trong class. Điều này được sử dụng cho undefindnhưng không sử dụngnull

class Container extends React.Component {
  // ...
}
Container.defaultProps = {
  color: 'red'
};

Nếu bạn không chắc chắn quy trình xây dựng của mình hiện được thiết lập, bạn có thể cài đặt Công cụ nhà phát triển React cho Chrome . nếu bạn truy cập trang web của mình với tâm trạng sản xuất React, bạn có thể thấy màu nền của Công cụ dành cho nhà phát triển React là tối. nhưng trang web của bạn đang ở trạng thái phát triển, bạn có thể thấy màu nền của React Developer Tools là màu đỏ. nếu bạn xây dựng trang web của mình bằng create-react-app, bạn có thể nhận được lời khen ngợi này:

npm run build
or 
yarn build

Cho đến bây giờ, chúng ta có thể sử dụng dữ liệu tĩnh, nhưng khi dữ liệu đang thay đổi để thay đổi trạng thái, chúng ta có thể sử dụng useStatebiểu mẫu React hooks. chảy ví dụ thổi: useStatelà một hàm. Giá trị mặc định của countgiá trị. nếu setCount()để thay đổi stategiá trị. countgiá trị đang thay đổi.

const App = () => {
  [count, setCount] = useState(0);
  
  const handleClick = () => {
    setCount(count + 1)
  }
  
  return (
    <div>
      <h3>{count}</h3>
      <button onClick={handleClick}>Click Me</button>
    </div>
  );
}

Trong JSX có thể sử dụng toán tử bậc ba để kết xuất có điều kiện.

<div>{name ? name : 'What is your name?'}</div>

Việc xử lý các sự kiện đối với phần tử phản ứng rất giống với việc xử lý các sự kiện trong phần tử DOM. có một số khác biệt về cú pháp

• Tên phần tử React sử dụng camelCase.
• Với JSX, bạn có thể chuyển một hàm như một trình xử lý sự kiện, thay vì một chuỗi.

<button onClick={() => console.log('Clicked me')}>
    Click me
</button>