React dành cho AngularJS developer (Phần 1)

Bài viết này sẽ dành cho những developer đã quen thuộc với Angular 1.x và muốn tìm hiểu thêm về React. Chúng ta sẽ xem xét các cách tiếp cận khác nhau của mỗi thứ để xây dựng Rich Web Application.

Mục tiêu sau khi đọc bài viết này, tôi hy vọng các bạn có thể hiểu những vấn đề mà React hướng đến để giải quyết, cũng như có thể vận dụng kiến thức đang có để bắt đầu áp dụng React vào các dự án của mình.

Frameworks và Libraries

Angular là một framework, trong khi React là một library tập trung vào việc giải quyết các vấn đề ở view layer. Đây là điều mà tôi muốn nhấn mạnh, quả thật trọng quá trình làm việc cũng như nói chuyện với một số người tôi vẫn thường gặp một số trường hợp so sánh giữa Angular và React, sự thật là việc so sánh như thế này là hết sức khập khiễng.

Sẽ có những lợi ích cũng như bất lợi khác nhau khi bạn sử dụng framework hay sử dụng một tập các library rời rạc.

Các frameworks cố gắng để đưa ra một giải pháp toàn diện, có thể giúp developer sắp xếp cũng như quản lý code của mình thông qua những patterns và conventions nếu như các bạn ở trong một team lớn. Tuy nhiên, việc có quá nhiều API, cũng là một cực hình khi bạn vừa phải viết code vừa phải dành rất nhiều thời gian để có thể đọc hết tất cả document cũng như ghi nhớ các patterns, đặc biệt sẽ vô cùng khó khăn nếu như bạn là người mới và vẫn đang phải học để hoàn thiện kiến thức của mình.
Việc sử dụng một tập hợp các library rời rạc, đồng nghĩa với số lượng API ít hơn, dễ học hơn, dễ thành thạo hơn. Nhưng điều này có nghĩa là khi bạn gặp vấn đề, bạn sẽ cần phải giải quyết vấn đề đó với nhiều code hơn, hay là import nhiều external library hơn. Điều này thường dẫn đến việc bạn phải viết một framework của bản thân mình để giải quyết.

Out Of The Box

Angular đưa ra cho bạn một tập hợp các feature để xây dựng Web application, chẳng hạn như:

• HTML template với dynamic expression sử dụng {{ }}.
• Các built-in directive như là ng-model, ng-repeat, ng-class hỗ trợ trong HTML.
• Các controller hỗ trợ việc tập trung logic code và truyền dữ liệu cho view.
• Các service cho việc chia sẻ business logic.
• Two-way binding, như là một cách đơn giản nhất đễ giữ cho controller và view luôn - sync với nhau.
• Cung cấp các module hỗ trợ việc giao tiếp giữa client và server.
• Hỗ trợ routing ở client side.
• Có thể custom directive để tùy biến HTML syntax.
• Sử dụng dependency injection để hạn chế việc bùng nổ các object.
• Các filter để hỗ trợ format dữ liệu trên view.

Trong khi đó React đưa ra cho bạn:

• JSX syntax dành cho template với Javascript expresion sử dụng { }.
• Các component, gần tương tự với các Angular element directive.

React khuyến khích việc sử dụng các Javascript API thông thường hơn là những framework abstraction. Thay vì việc cung cấp một wrapper giống như $http trong Angular dành cho việc giao tiếp với server, các bạn có thể sử dụng fetch(). Bạn có thể cảm thấy thoải mái về việc sử dụng các cấu trúc như serivce hay filter nhưng React không cung cấp những thứ đó. Bạn có thể đặt chúng trong các Javascript module và requrie chúng trong component nếu thực sự cần.

Tóm lại, vì thế mà trong khi Angular đưa ra cho bạn hàng tá các abstraction của những common task thì React lại cố tình làm trái ngược điều này để làm cho bạn viết giữ chuẩn Javascript và sử dụng các external dependency cho những thứ khác. Hay hiểu một cách đơn giản Angular cổ vũ việc đem Javascript vào HTML, còn React là cổ vũ việc đem HTML nhúng vào Javascript.

Cài đặt (Boostrapping)

Cài đặt Angular app, thì chúng ta cần require module, một danh sách các dependency và root element.

let app = angular.module('app', [])
let root = document.querySelector('#root');
angular.element(root).ready(function() {
  angular.bootstrap(root, ['app']);
});

Đối với React, việc cài đặt đơn giản là render một component vào root node, vẫn có thể xảy ra trường hợp có nhiều root component.

let root = document.querySelector('#root');
ReactDOM.render(<App />, root)

Templates

Cấu trúc của một Angular view có thể nói là vô cùng phức tạp và có nhiều responsibility trên một view. Trong file HTML template thường sẽ chứa một tập các directive và expression trộn lẫn với mục đích dùng để kết nối view và controller. Data flow thì sẽ được trao đổi qua các context khác nhau bằng $scope.

Trong React đó lại là một câu chuyện khác, nó được gọi là all the way down, có nghĩa là data flow sẽ chỉ có một hướng từ trên xuống. JSX là syntax dùng để mô tả các component, cách viết có cấu trúc tương tự XML được đặt bên trong Javascript. Khi chạy thì nó sẽ được biên dịch thành các nested function call. Ví dụ.

const App = React.createClass({
  render: function() {
    return (
      <Component>
        <div>{ 10 + 1 }</div>
        <Component prop="value" />
        <Component time={ new Date().getTime() }>
          <Component />
        </Component>
      </Component>
    )
  }
})

Khi code được biên dịch thì nó sẽ như sau.

var App = React.createClass({
  render: function render() {
    return React.createElement(
      Component,
      null,
      React.createElement("div", null, 10 + 1),
      React.createElement(Component, { prop: "value" }),
      React.createElement(
        Component,
        { time: new Date().getTime() },
        React.createElement(Component, null)
      )
    );
  }
});

Directives

React không có template vì thế tất cả sẽ được viết bằng JSX trong hàm render().

class MyComponent extends React.Component {
  render() {
    return (
      // JSX lives here
    )
  }
}

Cùng xem một số directive được viết thế nào trong React nhé.

ng-repeat

<ul>
  <li ng-repeat="word in words">{ word }</li>
</ul>

Trong React chúng ta có thể sử dụng như sau.

<ul>
  { words.map((word)=> <li>{ word }</li> )}
</ul>

ng-class

<form ng-class="{ active: active, error: error }">
</form>

Trong React chúng ta sử dụng className.

<form className={ classNames({active: active, error: error}) }>
</form>

Bời vì khi đó chúng ta phải set thuộc tính của node, giống như sau.

formNode.className = "active error";

ng-if

<div>
  <p ng-if="enabled">Enable</p>
</div>

Vì JSX là sugar syntax dùng để gọi fucntion và khởi tạo object nên if-else statement sẽ không chạy được bên trong JSX. Cách đơn giản nhất là sử dụng toán tử ba ngôi (ternary operator) hoặc là move điều kiện logic ra ngoài JSX.

// ternary operator
<div>
  { enabled ? <p>Enabled</p> : null }
</div>

// if/else outside of JSX
let node = null;
if (enabled) {
  node = <p>Enabled</p>;
}
<div>{ node }</div>

Phía trên là một số ví dụ căn bản, các bạn có thể áp dụng nhiều thứ để giải quyết một vấn đề chẳng hạn như ng-show/ng-hide dùng cả if và className.

Tạm dừng ở đây đã, trong bài tiếp theo tôi sẽ nói về Component, Two-way binding, Data flow, Dependency injection, Service, Filter và tổng kết lại tất cả, cùng đón xem nhé.

Tạm biệt và hẹn gặp lại.

Bài gốc: https://codeaholicguy.wordpress.com/2016/01/19/react-danh-cho-angularjs-developer-phan-1/