React Cơ Bản Cho Người Mới Bắt Đầu
React đang nhanh chóng trở thành bộ thư viện JavaScript phổ biến giúp xây dựng các UI component viết bằng HTML, CSS và JavaScript. So sánh với một số lượng không ít các thư viện và framework JavaScript hiện nay thì React nổi trội ở tính đơn giản và hiệu quả và thích hợp để build các ứng dụng UI ...
React đang nhanh chóng trở thành bộ thư viện JavaScript phổ biến giúp xây dựng các UI component viết bằng HTML, CSS và JavaScript. So sánh với một số lượng không ít các thư viện và framework JavaScript hiện nay thì React nổi trội ở tính đơn giản và hiệu quả và thích hợp để build các ứng dụng UI phức tạp. Thư viện React được phát triển bởi các lập trình viên làm việc tại Facebook với mục đích cải tiến các UI component sử dụng trên trang mạng xã hội Facebook và trang web Instagram.
Bài viết này sẽ giúp bạn tiếp cận cách sử dụng React để xây dựng các UI component. Nó được thiết kế để thích hợp cho những ai mới bắt đầu tìm hiểu về thư viện này. Và như thường lệ chúng ta sẽ bắt đầu bằng việc tạo một ứng dụng Hello World sử dụng React.
Ứng Dụng Hello World Với React
Sử dụng chương trình code editor hoặc IDE có trên máy tính của bạn và tạo một file với tên index.html với nội dung như sau:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<main></main>
<script src="https://fb.me/react-0.14.3.js"></script>
<script src="https://fb.me/react-dom-0.14.3.js"></script>
<script src="main.js"></script>
</body>
</html>
Tập tin HTML ở trên không có gì đặc biệt ngoại trừ 3 thẻ <script> để tham chiếu tới source code chứa bộ thư viện React và React DOM (dùng để tương tác với HTML DOM) và một tập tin main.js ở local mà chúng ta sẽ tạo ở phần tiếp theo đây.
Tạo tập tin main.js nằm trong cùng thư mục với thư mục chứa index.html ở trên với nội dung sau:
"use strict";
var HelloWorld = React.createClass({
render: function() {
return React.createElement("h1", null, "Hello World!");
},
});
var mainElement = document.querySelector("main");
ReactDOM.render(React.createElement(HelloWorld), mainElement);
Tiếp theo sử dụng trình duyệt để mở tập tin index.html bạn sẽ thấy trình duyệt hiển thị như sau:
Hello World!
Trong main.js ở trên biến HelloWorld được tạo ra thông qua việc gọi phương thức createClass từ đối tượng React. Phương thức này sẽ tạo ra một UI compnent và đối số đầu tiên truyền vào cho nó sẽ là một object dùng để cấu hình compoent được tạo ra. Ở ví dụ của chúng ta, đối tượng truyền vào hàm createClass là một đối tượng với thuộc tính duy nhất là render. Thuộc tính render nhận giá trị là một hàm dùng để hiển thị nội dung của component:
var HelloWorld = React.createClass({
render: function() {
return React.createElement("h1", null, "Hello World!");
},
});
Bên trong hàm ứng với thuộc tính render, chúng ta gọi phương thức createElement() từ đối tượng React và trả về giá trị cho hàm:
function() {
return React.createElement("h1", null, "Hello World!");
};
Sử dụng phương thức createElement như ở đoạn code trên chúng ta sẽ tạo ra một phần tử <h1> với nội dung bên trong là Hello World. Nếu bạn muốn tạo thuộc tính cho phần tử h1 thì bạn có thể thay đối số thứ hai là một object ví dụ như sau:
function() {
return React.createElement("h1", {className: "my-h1-class"}, "Hello World!");
};
Babel và ECMAScript 6
React cho phép bạn viết JavaScript sử dụng cú pháp được định nghĩa trong tiêu chuẩn ECMAScript 6 (ES6 hay ECMAScript 2015), tuy nhiên một số trình duyệt chưa chấp nhận phiên bản mới này. Babel là một JavaScript compiler giúp biên dịch mã JavaScript viết theo chuẩn ECMAScript 6 về ECMAScript 5.
Lưu ý: Việc sử dụng ES6 là tùy chọn.
Sử dụng ES6 chúng ta sẽ có thể định nghĩa class HelloWorld kế thừa React.Component:
"use strict";
class HelloWorld extends React.Component {
}
Đồng thời trong class này chúng ta định nghĩa phương thức render như sau:
"use strict";
class HelloWorld extends React.Component {
render() {
return React.createElement("h1", null, "Hello World!");
}
}
var mainElement = document.querySelector("main");
ReactDOM.render(React.createElement(HelloWorld), mainElement);
Trường hợp sử dụng ES6 Babel bạn cần thêm thư viện để chuyển đổi mã JavaScript từ ES6 về ES5:
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
Cuối cùng khi mở trang index.html trên trình duyệt thì bạn sẽ nhận được kết quả như trước đó.
Phần Tử Con (Child Element)
Ngoài cách tạo phần tử h1 với văn bản bên trong như ở ví dụ trước thì chúng ta cũng có thể tạo một phần tử với nhiều phần tử con bên trong.
Để làm điều này thì khi gọi React.createElement trong render chúng ta sẽ sử dụng lại React.createElement ở đối số thứ 3 truyền vào.
Ví dụ như sau:
"use strict";
var ItemList = React.createClass({
render: function() {
return React.createElement("ul", null, [
React.createElement("li", null, "Item 1"),
React.createElement("li", null, "Item 2"),
React.createElement("li", null, "Item 3"),
]);
},
});
var mainElement = document.querySelector("main");
ReactDOM.render(React.createElement(ItemList), mainElement);
JSX Compiler
Tương tự như các thư viện JavaScript khác React cũng cung cấp bộ template engine giúp quản lý mã lệnh HTML.
Để làm quen với JSX, chúng ta sẽ bắt đầu bằng một đoạn code JavaScript sử dụng JSX đơn giản như sau:
<MyButton color="blue" shadowSize={2}>
Click Me
</MyButton>
Đoạn code JavaScript trên sẽ được biên dịch ra mã JavaScript như sau:
React.createElement(
MyButton,
{color: 'blue', shadowSize: 2},
'Click Me'
)
Bây giờ quay trở lại ví dụ Hello World ở trên, sử dụng JSX bạn có thể viết lại như sau:
"use strict";
var HelloWorld = React.createClass({
render: function() {
return (
<h1>Hello World!!!</h1>
);
},
});
var mainElement = document.querySelector("main");
ReactDOM.render(<HelloWorld></HelloWorld>, mainElement);
Lưu ý lúc này đoạn code <HelloWorld></HelloWorld> trong ReactDOM.render() sẽ được chuyển thành:
React.createElement( HelloWorld )
Và lúc này nó tương tự như đoạn code mà chúng ta đã tìm hiểu trước đó.
Kết Luận
Tới đây bạn đã tìm hiểu những tính năng cơ bản có trong bộ thư viện React. Như đã đề cập ở phần đầu bài viết, React là một giải pháp tuyệt với để xây dựng các component UI sử dụng JavaScript. Mặc dù thích hợp để xây dựng các ứng dụng phức tạp tuy nhiên React cung cấp API đơn giản và dễ sử dụng. Trong các bài viết tiếp theo chúng ta sẽ tìm hiểu các tính năng nâng cao trong bộ thư viện này.
