Trong hướng dẫn này, chúng ta sẽ làm quen với việc tạo một ứng dụng React và cố gắng hiểu những khái niệm cơ bản về JSX. Hướng dẫn này giả sử rằng bạn đã có một kiến thức cơ bản về HTML và JavaScript.
React là gì?
React là một thư viện JavaScript được phát triển bởi Facebook để quản lý giao diện người dùng cho các ứng dụng web một cách dễ dàng. Một trong những điểm mạnh của React đó là nó giúp tạo ra các thành phần giao diện người dùng dễ quản lý, giúp dễ dàng hơn để tăng độ lớn của các ứng dụng web. React hoạt động dựa trên khái niệm về Virtual DOM (hay còn gọi là DOM Ảo), nơi nó lưu giữ một ánh xạ của DOM thật. Bất cứ khi nào thay đổi xảy ra, React sẽ chạy một tiến trình khác, xác định sự thay đổi và cập nhật nó vào DOM thật sự. Khái niệm Virtual DOM giúp cho ứng dụng kết xuất nhanh hơn và cải thiện hiệu suất.
JSX là gì?
JSX là một cú pháp mở rộng cho JavaScript, tương tự như XML. Dưới đây là một ví dụ:
ReactDOM.render(
<h1>Welcome React, TutsPlus !!</h1>,
document.getElementById('container')
);Code JSX tương tự như HTML nhưng thật sự nó là một sự pha trộn giữa JavaScript và HTML. Đoạn code ở trên kết xuất thông báo bên trong thẻ h1 trong phần tử container. JSX nhanh hơn JavaScript vì nó thực hiện tối ưu hóa khi biên dịch mã nguồn. JSX cũng được khuyên dùng hơn vì nó dễ sử dụng hơn so với code thuần JavaScript.
Theo tài liệu hướng dẫn chính thức thì:
JSX là một cú pháp mở rộng giống XML cho ECMAScript nhưng không có bất kỳ ngữ nghĩa nào được xác định. Nó KHÔNG dự định được cài đặt bởi các engine hoặc trình duyệt. KHÔNG phải là một đề xuất để kết hợp JSX vào chính đặc tả ECMAScript. Nó dự định sẽ được sử dụng bởi các preprocessor khác nhau (transpiler) để biến đổi các token này thành ECMAScript tiêu chuẩn.
Tại sao nên Sử dụng JSX?
Không bắt buộc phải sử dụng JSX khi làm việc với ứng dụng React. Bạn có thể sử dụng code thuần JavaScript. Nhưng sử dụng JSX có những ưu điểm riêng của nó:
1. So với JavaScript, thì viết JSX sẽ dễ hơn. Nó đơn giản như việc mở và đóng các thẻ XML. Đây là một ví dụ về JSX:
<div> <p>Welcome to TutsPlus</p> </div>
Đây là code React đã được biên dịch:
"use strict";
React.createElement(
"div",
null,
React.createElement(
"p",
null,
"Welcome to TutsPlus"
)
);2. Code JSX đảm bảo tính dễ đọc và làm cho việc bảo trì được dễ dàng hơn.
3. JSX tối ưu hóa code khi biên soạn, vì vậy nó chạy nhanh hơn so với code JavaScript tương đương.
Bắt đầu
Hãy cùng tìm hiểu sâu hơn bằng cách viết một số code JSX và kết xuất nó trên trình duyệt. Để bắt đầu tạo một ứng dụng React, hãy tạo một trang index.html đơn giản với cấu trúc trang như sau:
<html>
<head>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
<script src="//unpkg.com/babel-core@5.8.38/browser.min.js"></script>
<script type="text/babel">
// JSX code would be here
</script>
</head>
<body>
<div id="container">
</div>
</body>
</html>Như đã thấy trong đoạn code ở trên, chúng ta đã tham chiếu các script react và react-dom bên trong trang index.html. Chúng ta cũng đã sử dụng tham chiếu script babel, script này sẽ chuyển đổi code JSX thành các cuộc gọi hàm react. Ví dụ, hãy xem xét code JSX sau:
var grp = <div> <p>Welcome to TutsPlus</p> </div>;
Babel sẽ chuyển đổi code JSX ở trên sang hàm react được yêu cầu như sau:
var grp = React.createElement(
"div",
null,
React.createElement(
"p",
null,
"Welcome to TutsPlus"
)
);Viết các Thành phần React bằng JSX
Hãy tạo một thành phần React để hiển thị thông điệp chào mừng. Code sẽ như sau:
<script type="text/babel">
var Message = React.createClass({
render:function(){
return <h1>Welcome to TutsPlus</h1>
}
});
ReactDOM.render(<Message />,document.getElementById('main'));
</script>Message là một thành phần react, nó trả về code JSX ở trên, sau đó được biên dịch thành code cho hàm React bằng Babel. Bằng ReactDOM.render, chúng ta kết xuất thành phần bên trong phần tử div main trong HTML.
Lưu các thay đổi ở trên và thử truy cập index.html trên trình duyệt, và bạn sẽ có thể thấy thông điệp Welcome to TutsPlus trong trình duyệt.
Truyền các Thuộc tính vào các Thành phần
Phần lớn, nó yêu cầu phải truyền dữ liệu vào các thành phần của chúng ta mà sẽ được đánh giá hoặc sửa đổi và sau đó kết xuất. Hãy cùng xem cách làm thế nào để chúng ta có thể truyền các thuộc tính vào các thành phần của chúng ta và hiển thị dữ liệu.
Giả sử chúng ta muốn truyền một cái tên name vào thành phần Message và hiển thị tên trong thông điệp của chúng ta. Trước tiên, chúng ta sẽ thêm một thuộc tính tùy biến vào thành phần của chúng ta.
ReactDOM.render(<Message name="Roy" />,document.getElementById('main'));Thuộc tính đã được truyền có thể được đọc từ bên trong hàm render của thành phần này bằng cách sử dụng this.props trên khoá thành phần. Hãy chỉnh sửa code như minh hoạ đây:
var Message = React.createClass({
render:function(){
return <h1>Welcome to TutsPlus, {this.props.name}</h1>
}
});Lưu các thay đổi ở trên và truy cập index.html và bạn sẽ có thể thấy thông báo.
Welcome to TutsPlus, Roy
Tạo một Thành phần React Google Map bằng JSX
Bây giờ chúng ta đã được làm quen với JSX và tạo ra các thành phần React bằng JSX, hãy thử tạo một thành phần React để hiển thị Google Maps.
Bắt đầu bằng cách thêm tham chiếu đến Google Maps API trong index.html.
<script src="//maps.googleapis.com/maps/api/js?v=3.exp"></script>
Tạo một thành phần MyMap như ở dưới đây:
var MyMap = React.createClass({
render: function() {
return (
<div id="map"><span></span></div>
);
}
});
ReactDOM.render(<MyMap />,document.getElementById('main'));Thêm một phương thức được gọi là componentDidMount trong thành phần React, và bên trong phương thức đó hãy định nghĩa các biến liên quan đến bản đồ như sau:
var MyMap = React.createClass({
componentDidMount: function() {
var latLong = new google.maps.LatLng(-47.888723, 444.675360);
var options = {
zoom: 2,
center: latLong
},
map = new google.maps.Map(ReactDOM.findDOMNode(this), options),
marker = new google.maps.Marker({
map:map,
animation: google.maps.Animation.BOUNCE,
position: latLong
});
},
render: function() {
return (
<div id="map"><span></span></div>
);
}
});Phương thức componentDidMount được gọi ngay sau quá trình kết xuất ban đầu, và tất cả các đối tượng bản đồ được khởi tạo bên trong phương thức này. ReactDOM.findDOMNode tìm một tham chiếu đến nút DOM của thành phần và tạo đối tượng bản đồ. marker được định nghĩa để thiết lập các thuộc tính đánh dấu như map, position và animation.
Thử kết xuất thành phần map bên trong div #main.
ReactDOM.render(<MyMap />,document.getElementById('main'));Lưu các thay đổi ở trên và thử truy cập index.html, và bạn sẽ có thể xem Google Maps đang hoạt động
Phần Tóm tắt
Trong hướng dẫn này, chúng ta đã được giới thiệu cơ bản về React và JSX. Chúng ta đã được tìm hiểu cách tạo các thành phần React bằng JSX và đồng thời tạo ra một Thành phần React Google Map. Trong các hướng dẫn sắp tới, chúng ta sẽ tập trung vào một số tính năng khác của React.
Mã nguồn từ hướng dẫn này có sẵn trên GitHub.
Bạn đã thử tạo một thành phần React chưa? Tôi rất vui được nghe về những kinh nghiệm của bạn. Hãy cho tôi biết những suy nghĩ của bạn trong phần bình luận bên dưới nhé.
