React vs AngularJS – Hello, world!
Mục đích của bài viết này là hướng dẫn xây dựng một số application đơn giản bằng Angular và React để cung cấp cho bạn một sự hiểu biết nhất định về framework để tạo được một web cơ bản. Angular ra đời trước React nhưng React làm tăng hiệu suất render so với Angular. Trong bài viết này, mình sẽ ...
Mục đích của bài viết này là hướng dẫn xây dựng một số application đơn giản bằng Angular và React để cung cấp cho bạn một sự hiểu biết nhất định về framework để tạo được một web cơ bản. Angular ra đời trước React nhưng React làm tăng hiệu suất render so với Angular.
Trong bài viết này, mình sẽ giới thiệu cách làm như thế nào để tạo ra code đơn giản bằng các framework này. Sau đó, tôi sẽ chuyển sang một số điều khiển giao diện người dùng phức tạp hơn, và tạo một số ứng dụng ví dụ.
Angular JS
Angular được ra mắt với bản phát hành đầu tiên vào năm 2009. HIện tại phổ biến nhất là bản 2.0. Các phiên bản Angular hiện nay sử dụng các HTML để cung cấp chức năng về DOM khác nhau. Đây là gọi là directives và rất linh hoạt.
code html <html ng-app="testApp"> <head></head> <body ng-controller="testController"> <hello-world /> </body> </html>
code js
var app = angular.module("testApp", []);
app.controller("testController", function() {
});
app.directive("helloWorld", function() {
return {
restrict: "E",
template: "<div>Hello, world!</div>"
};
});
Cách code cho Angular có thể hơi tốn công, vì nó đòi hỏi một apllication và một controller, và định nghĩa các directives cần dùng. Đoạn code html trên tạo view cơ bản để sử dụng Angular, sau đó gọi controller và cuối cùng là tạo ra một directives: "Hello, word!". Theo đó,trong file js: 1, Chúng ta khởi tạo Angular bằng khai báo 1 biến cách gọi "angular.module" truyền vào 2 đối số: tên và danh sách các biến phụ thuộc. Bởi vì trong trường hợp này không có bất kỳ phụ thuộc nào, chỉ cần sử dụng một mảng rỗng. 2, Tiếp theo, ta khởi tạo "app.controller". 3, Cuối cùng, định nghĩa "app.directive". Một ứng dụng sử dụng AngularJS cần khởi tạo "ng-app" và "ng-controller" directive được thiết lập trên nhiều element.
- Các thẻ "html" trên "ng-app" chỉ áp dụng cho nó, có nghĩa là phải có một app Angular có tên đúng bằng tên được định nghĩa.(Trong trường hợp này là "testApp").
- Các thẻ "body" được đặt tên với các ng-controller directive, có nghĩa là Angular chỉ sử dụng bên trong thẻ này.
- Cuối cùng, render "hello, world!" trong body
React JS
React được xây dụng bởi Facebook. Với một lượng dữ liệu lớn thì framework MVVM khó có thể xử lý realtime. React khắc phục vấn đề này, vì nó chỉ hiển thị những gì đang thay đổi. Nó sử dụng "DOM ảo" cho một số hiệu suất tăng lên bằng cách viết ra một virtually đầy đủ, và sau đó so sánh giữa các việc xử lý ảo với những gì đang thực hiện DOM và sau đó tạo ra một patch. React sử dụng các file JSX (tùy chọn) để viết views, nên JavaScript và HTML có thể viết chung. Việc sử dụng JSX viết React views dễ dàng hơn nhiều so với components khác. React đòi hỏi bạn phải xây dựng một class để xác định những gì HTML cần trả về điều này được thực hiện trong JavaScript.
<html> <head></head> <body></body> </html>
var HelloWorld = React.createClass({
render: function() {
return <div>Hello, world!</div>;
}
});
React.render(new HelloWorld(), document.body);
- Gọi React.createClass để tạo ra một lớp React. Lớp này được lấy để nối vào một phần tử HTML cho người sử dụng tương tác.
- Các function createClass phải cần một đối tượng và phải có một chức năng render. Nó trả về một chuỗi JSX rất đơn giản để viết ra:"Hello, world!".
- Dòng cuối cùng của JSX được sử dụng để đưa class hello world vào document.body.
Bài viết chỉ là những vấn đề cơ bản nên còn nhiều thiếu sót, cảm ơn vì đã đọc bài viết này!
