React là cái chi chi?

Hỡi thế gian tình là chi…
React là gì…
Mà bao dev nguyện thề sống chết?

Nàng React, hay tên đầy đủ là React.JS hiện đã quá đỗi quen thuộc với những anh em Đam mê sếch, ah quên – Đam mê code, cho dù là mới nghe như gió thoảng qua hay đã thông thạo chân tơ kẽ tóc, thì đều phải công nhận sự nổi tiếng và hót hòn họt của nàng.

React là ai, nàng đến từ đâu, tại sao người ta lại đam mê nàng?

Đây, đây là chân dung của nàng

Ah nhầm…, đây cơ

Có hơn 6k người theo dõi nàng, 131k người yêu thích nàng, và hơn 2 triệu người đã cưới nàng về. Những con số không hề biết nói dối!

React sinh ra trong gia đình Facebook giàu có và quyền lực bậc nhất thế giới, nên dĩ nhiên nàng là cành vàng lá ngọc có sức quyến rũ hơn người. Có tới hơn 1k người đang ngày đêm chăm sóc nàng, khiến cho nàng ngày càng hoàn hảo.

React thuộc dòng dõi Front-end library cấu thành từ JavaScript – ngôn ngữ phổ biến hàng đầu hiện nay (và ngày càng phổ biến nữa).

Về tính cách, người ta mô tả nàng ta như sau:

• Declarative: Nàng sinh ra là để tạo ra các giao diện tương tác (interactive UIs). Mỗi view trong ứng dụng của nàng được update và render dựa theo các trạng thái (state), nói chung nàng khá thẳng thắn và dễ nắm bắt nên không làm người đối diện phải bối rối.
• Component-Based: Nàng có nhiều bộ phận (components) đã được đóng gói lại với các trạng thái riêng, sau đó mới gộp thành những thành phần UI phức tạp. Đáng nói là các component được viết bằng JavaScript thay vì templates nên ta có thể pass data vào app rất dễ dàng và giữ được các state bên ngoài DOM.
• Learn Once, Write Anywhere: Học một lần là có thể hành sự khắp nơi. React rất độc lập trong thế giới riêng của nàng, và nàng có thể kết hợp với bất kỳ công nghệ nào mà bạn muốn. Bạn không cần viết lại toàn bộ code để có thể thêm feature mới vào. Hơn nữa React còn render bên server side được nếu bạn dùng Node, hay có thể làm app mobile nếu dùng React Native.

Những đặc điểm tốt đẹp của nàng không khỏi khiến anh em dev ngày đêm vương vấn. Vậy thì hãy cùng tìm hiểu nàng cặn kẽ hơn nhé!

Khi nàng cất tiếng nói Hello World!

<div id="myReactApp"></div>
 
 <script type="text/babel">
  class Greeter extends React.Component { 
     render() { 
      return <h1>{this.props.greeting}</h1>
    } 
   } 
 
   ReactDOM.render(<Greeter greeting="Hello World!" />, document.getElementById('myReactApp'));
 </script>

Bạn sẽ nghe thấy:

<div id="myReactApp">
  <h1>Hello World!</h1>
</div>

Bạn có để ý cô ấy dùng từ có vẻ lạ không? Trong hàm render nàng return một chuỗi giống như HTML, nhưng thực ra không phải HTML. Đó là vì nàng dùng JSX (JavaScript XML), là một ngôn ngữ mở rộng của JavaScript và viết rất giống với HTML, điều này làm anh em coder cảm thấy rất thân thuộc.

OK, còn một số điểm quan trọng của nàng mà anh em dev cần nhớ

1. One-way data binding với props

Các properties (thường gọi là props) được truyền vào một component từ component cha của nó. Component nhận được các props theo kiểu immutable values (không sửa đổi được).

2. Stateful components

Các state chứa các giá trị của toàn bộ component và có thể truyền vào các component con của nó thông qua props:

class ParentComponent extends React.Component {
  state = { color: 'green' };
  render() {
    return (
      <ChildComponent color={this.state.color} />
    );
  }
}

3. Virtual DOM

Virtual DOM hay DOM ảo là một cơ chế cache của React để mô phỏng DOM trên trình duyệt, sau đó nhưng thao tác sẽ được thực thi trên DOM ảo trước khi so sánh với DOM trình duyệt để update nó một cách hiệu quả nhất.

4. Lifecycle methods

Dưới đây là các hàm thực thi tại các thời điểm khác nhau trong vòng đời của một component.

• shouldComponentUpdate có thể giúp chặn việc render lại component.
• componentDidMount được gọi lúc tạo ra component thật sự trên DOM. Thường dùng để kích hoạt việc get data từ bên ngoài chẳng hạn từ các API.
• componentWillUnmount để xoá các resource phụ thuộc của component.
• render hàm này quan trọng nhất, dùng để render ra giao diện mỗi khi component có thay đổi về trạng thái.

Lưu ý:

• React không phải là một Web Framework hoàn chỉnh (như Angular), mà nàng ta chỉ có nhiệm vụ xây dựng interface, do đó bạn có thể thoải mái chọn các công nghệ về server, database, cách call đến các service ngoài…
• Thường người ta dùng Redux để quản lý trạng thái của React đối với những project lớn.

React có điểm xấu nào anh em cần biết không?

Nàng React thực ra cũng không hoàn hảo. Một số người chỉ trích nàng vì nàng ăn RAM quá nhiều, đó là vì nàng dùng Virtual DOM, mà DOM này lại được lưu trong RAM. Tất nhiên đây là sự đánh đổi để nàng có tốc độ render nhanh hơn.