Reactjs là gì? Nó có phải là thư viện Javascript tốt nhất hiện nay không? Nếu học nó thì có dễ xin việc không? Tất cả những câu hỏi trên sẽ được trả lời trong bài viết này, hãy cùng VoManhKien.com tìm hiểu nhé.

Contents

ReactJS là gì?

ReactJS là thư viện Javascript mã nguồn mở được Facebook phát triển để xây dựng giao diện người dùng (UI).

Với React bạn hoàn toàn có thể sử dụng nó để phát triển một website hoặc sử dụng React Native để phát triển mobile app.

Tại thời điểm viết bài thì ReactJS đã đạt được 156k sao trên Github, và có hơn 4,5 triệu dự án được xây dựng với React, hơn nữa nó cũng có tới 1506 thành viên đóng góp xây dựng.

Mục tiêu cốt lõi của React là tạo ra những ứng dụng web nhanh với số lượng code tối thiểu và mượt mà còn dễ để mở rộng bảo trì.

Thay vì tập trung vào toàn bộ web thì bạn có thể xé nhỏ từng phần và làm cho nó đơn giản hơn.

Tính hữu dụng của React đã được chứng minh bằng những website lớn như Facebook, Instagram, và nhiều website lớn khác.

Đặc điểm nổi bật của ReactJS

Như chúng ta đã biết thì khi bạn muốn thay đổi một thành phần trên website, bạn bắt buộc phải thao tác với DOM (Document Object Model). Nhưng với React họ đã phát triển công nghệ gọi là Virtual DOM.

Virtual DOM là gì?

Virtual DOM là công nghệ giúp ứng dụng của bạn có thể chạy mượt mà ngay cả khi bạn thay đổi thành phần website liên tục với một website lớn có nhiều thành phần phức tạp.

Virtual DOM giúp bạn thao tác với DOM để render lại chỉ những thành phần nào thay đổi.

Nói dễ hiểu thì nếu bạn có một list gồm 10 item, với DOM thông thường nếu bạn thay đổi 1 item thì toàn bộ 9 item còn lại sẽ vẫn phải render lại, còn với Virtual DOM thì không, nó sẽ giúp bạn kiến tra item nào vừa thay đổi và chỉ thực hiện thay đổi trên DOM đúng item đó mà thôi. Từ đó dẫn đến có thể cải thiện được hiệu năng của ứng dụng.

Virtual DOM
Virtual DOM

Để tìm hiểu sâu hơn về Virtual DOM thì chúng ta cần chú ý kỹ thuật reconciliation đây chính là thuật toán React dùng để phân biệt một cây với một cây khác để xác định xem phần nào cần phải thay đổi.

Khi React render, một cây gồm các node mô tả ứng dụng sẽ được lưu lại trong bộ nhớ, sau đó mỗi khi ứng dụng được cập nhật (qua setState) thì một cây mới được tạo ra, và 2 cây này sẽ được só sánh để thực hiện những thao tác cần thiết để cập nhật lại DOM.

Bạn có thể xem ví dụ bên dưới để hiểu rõ hơn về cách Virtual DOM hoạt động.

Chúng ta sẽ build một component có thể cộng tổng 2 số mà ta nhập vào như bên dưới.

Đây là component sẽ trông như thế này.

class App extends React.Component {
  
  state = {
    result: '',
    entry1: '',
    entry2: ''
  }

  handleEntry1 = (event) => {
    this.setState({entry1: event.target.value})
  }
  
  handleEntry2 = (event) => {
    this.setState({entry2: event.target.value})
  }

  handleAddition = (event) => {
    const firstInt = parseInt(this.state.entry1)
    const secondInt = parseInt(this.state.entry2)
    this.setState({result: firstInt + secondInt })
  }
  
  render() {
    const { entry1, entry2, result } = this.state
    return(
      <div>  
        <div>
          <p>Entry 1: { entry1 }</p>
          <p>Entry 2: { entry2 }</p>
          <p>Result: { result }</p>
        </div>
        <br />
        <div>
          <span>Entry 1: </span>
          <input type='text' onChange={this.handleEntry1} />
        </div>
        <br />
        <div>
          <span>Entry 2: </span>
          <input type='text' onChange={this.handleEntry2} />
        </div>
        <div>
          <button onClick={this.handleAddition} type='submit'>Add</button>
        </div>
      </div>
    )
  }
}

Sau khi React render thì ứng dụng của bạn sẽ ra thế này.

react reconciliation 1
HTML

Bất kỳ khi nào bạn bạn thay đổi dữ liệu (ở đây là nhập dữ liệu qua input) bằng việc setState thì thuật toán reconciliation sẽ phân tích xem thành phần nào thay đổi và update lại DOM thay vì update lại toàn bộ cây DOM.

react reconciliation 2
Khi thay đổi thành phần

JSX trong React

Trong React nó sử dụng một loại cú pháp mở rộng rành cho Javascript có tên JSX (JavaScript XML)

jsx to javascript
JSX to Javascript

Với JSX thay vì bạn phải viết cú pháp javascript khá phức tạp như React.createElement() thì bạn hoàn toàn có thể viết gọn gàng lại

Bạn có thể xem ví dụ dưới đây về 2 cách viết.

Đây là cách viết của JSX

const element = <div class="example">Welcome to VoManhKien.com</div>;

Và đây là cách viết của Javascript thông thường.

React.createElement(
  "div",
  {className: "example"},
  "Welcome to VoManhKien.com"
};

Bạn đã thấy sự khác biệt chưa nào.

Tiếp theo là Flux

Có thể bạn chưa nghe tới khái niệm này nhưng thực chất nó là phiên bản đầu tiên của cấu trúc unidirectional data flow(dữ liệu một chiều), cũng do Facebook phát triển để giải quyết bài toán quản lý dữ liệu trong ứng dụng.

Sau này thì Redux đã dựa vào cấu trúc này để phát triển, vậy nên để nói dến React thì nói đến Flux sẽ hợp lý hơn.

Những điểm khác biệt cơ bản của Redux và Flux thì bạn có thể xem tại đây, mình đã phân tích khá kỹ rồi.

Lợi ích khi sử dụng ReactJS?

Dễ để học

Theo đánh giá của cộng đồng thì Reactjs khá dễ học và dễ tiếp cận với nguồn tài liệu đầy đủ và hướng dẫn chi tiết. Bạn có thể dễ dàng thực hành theo. Nếu bạn có nền tảng về Javascript thì bạn có thể dễ dàng bắt đầu chỉ sau vài ngày.

Có thể tái sử dụng nhiều thành phần

React tập trung giải quyết tầng view nên thành phần tạo nên ứng dụng là component, mỗi chức năng được chia ra từng component khác nhau. Vậy nên bạn có thể tái sử dụng và tránh lặp code.

Virtual DOM

Như đã nói ở trên thì React sử dụng Virtual DOM để giúp chúng ta thao tác với Real DOM, nó giúp ứng dụng của bạn nâng cao hiệu năng rất nhiều

Có nhiều công cụ hỗ trợ

React có rất nhiều đồ chơi dành cho bạn, từ công cụ debug, đến công cụ kiểm tra độ tối ưu của ứng dụng, …

Quá trình phát triển của bạn sẽ nhanh hơn rất nhiều.

Cộng đồng đông đảo

Với độ phổ biến của React thì bạn có thể dễ dàng tìm sự hỗ trợ hay tìm những thư viện đã được cộng đồng phát triển và tối ưu để sử dụng.

Hơn thế nữa bạn có thể dễ dàng tìm kiếm những bài hướng dẫn chất lượng được chia sẻ miễn phí giống như tại VoManhKien.com

Những điều cần biết về ReactJS

Không giống như VueJS hay Angular thì React lại chỉ là một Library, nó chịu trách nhiệm chỉ phần view mà thôi, vậy nên nếu bạn sử dụng React để xây dựng ứng dụng thì cần phải kết hợp với một số lib khác.

Khi làm việc với component thì bạn nên giữ cho nó nhỏ gọn nhất có thể, tốt nhất là mỗi component sẽ thực hiện một chức năng cụ thể nào đó

Có thể bạn cần kết hợp với một lib giúp bạn quản lý state trong ứng dụng như là Redux hay Flux

Học ReactJS có dễ xin việc không?

Vấn đề cuối cùng trong bài viết này thì cũng đã quá rõ rồi, với cộng đồng đông đảo thì đồng nghĩa với cơ hội công việc sẽ rất cao.

Nhu cầu tuyển dụng luôn luôn khan hiếm nhân tài, vậy nên nếu bạn có ý định học React thì hãy thực hiện ngay đi.

Tạm kết

Như vậy trong bài viết này, mình đã giải thích tổng qua về ReactJS là gì? và những điều quan trọng mà bạn cần phải biết trước khi học nó.

Hẹn gặp bạn trong những bài tiếp theo

Tham khảo: https://reactjs.org/, https://css-tricks.com/how-react-reconciliation-works/