Những kiến thức cơ bản về react cho người mới bắt đầu.
Khi tiếp cận một công nghệ mới, mỗi developer cần một khoảng thời gian để tìm hiểu và hình dung ra cách tổ chức và hoạt động của nó. Khi mới đầu đọc tài liệu tôi thường hay có những chiều hướng suy nghĩ sai lệch hoặc quá xa vời dẫn đến mất nhiều thời gian để có thể sử dụng được. Nhưng khi hiểu được ...
Khi tiếp cận một công nghệ mới, mỗi developer cần một khoảng thời gian để tìm hiểu và hình dung ra cách tổ chức và hoạt động của nó. Khi mới đầu đọc tài liệu tôi thường hay có những chiều hướng suy nghĩ sai lệch hoặc quá xa vời dẫn đến mất nhiều thời gian để có thể sử dụng được. Nhưng khi hiểu được rồi thì nhìn lại thấy nó rất đơn giản, tôi nhận ra là nếu trong lúc mới đầu học mà có người để hỏi hoặc biết trước một vài kiến thức chắc chắn để suy luận thì sẽ nhanh hơn. Cho nên hôm nay tôi sẽ trình bảy tổng quan về những kiến thức cần nắm được về React để các bạn đọc và dễ dàng nắm bắt được cách hoạt động của nó, từ đó việc tìm hiểu chuyên sâu dễ dàng hơn.
1. JSX là gì
Là file có đuôi .jsx chứa cúa pháp của javascript và html. Ví dụ:
const element = <h1>Hello, world!</h1>;
Lệnh trên tạo một biến bằng một thẻ html. Bạn hãy coi thẻ html là một đối tượng HTML. Nếu lệnh trên viết bằng js thì sẽ cần parse từ string thành component , ví dụ như sau:
var str = "<h1>Hello, world!</h1>"; element = $.parseHTML( str );
Như vậy có thể thấy cú pháp của jsx rất gọn và linh hoạt. hãy xem ví dụ sau:
function getGreeting(user) {
if (user) {
return <h1>Hello, {formatName(user)}!</h1>;
}
return <h1>Hello, Stranger.</h1>;
}
-> Rất nhanh và nguy hiểm đúng không.@@
2. Sử dụng các variable trong thẻ html trong file jsx
Trong đoạn code sau, biến name được địng nghĩa và sử dụng trong thẻ h1.
const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;
Như vậy là có thể gọi biến js trong html để sử dụng giá trị của biến đó chuyển thành text. Hoặc sử dụng trong giá trị attributes của thẻ html:
const element = <img src={user.avatarUrl}></img>;
Tương tự ta cũng có thể gọi cả function:
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const user = {
firstName: 'Harper',
lastName: 'Perez'
};
const element = (
<h1>
Hello, {formatName(user)}!
</h1>
);
- OK. bạn đã hiểu về jsx rồi nhỉ, bây giờ cần hỏi là file jsx để làm gì. Trong React file jsx thường sẽ là một componet và component này có thể tạo nên một giao diện trên trình duyệt. Xem này:
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
Biến này đưa lên màn hình thì sẽ hiển thị dòng chữ Hello, world! đúng không, đó đó là giao diện đó. Việc còn lại là đưa lên màn hình, trong react sẽ có một hàm render làm việc đó:
class Hello extends React.Component {
constructor(props) {
}
render() {
return (
<h1 className="greeting">
Hello, world!
</h1>
);
}
}
chỉ cần return về 1 thẻ html trong hàm render là dòng chữ "Hello, world" sẽ được đưa lên màn hình. Câu hỏi đặt ra là dòng chữ sẽ hiển thị ở đâu và cách phân phối nó như thế nào. Ừm, đơn giản là website sẽ gồm nhiều đối tượng ghép lại, đối tượng này lại chứ nhiều đối tượng khác. Khi ráp lại ta được một giao diện hoàn chỉnh thôi.
-> Tương đương như vậy nè.
<body>
<Header></Header>
<Sidebar></Sidebar>
<Content>
</Hello></Hello>
</Content>
</body>
Như hình trên thì đối tượng Hello nằm trong đối tượng Content, bạn có thể chia nhỏ thành các đối tượng khác nữa tùy bạn. Cuối cùng gheps chúng lại được một html đầy đủ, việc còn lại là thêm css để trang trí thôi.
