React một siêu anh hùng trong thế giới Marvel dành cho lập trình viên

Nhắc tới Marvel hẳn mọi người liên tưởng ngay tới series phim siêu anh hùng nổi đình nổi đám trong thời gian gần đây với những Iron man với bộ giáp bất khả chiến bại hay Thor vị thần sấm quyền uy với cây búa trên tay… mỗi siêu anh hùng mang cho mình một diện mạo và sức mạnh tuyệt đối mà không khó để phân biệt với nhiệm vụ khác nhau trong vũ trụ, đó là hình mẫu lý tưởng mà người ta tôn thờ . Tưởng tượng thế giới lập trình như thế giới Marvel thì các framework, thư viện được nhiều người biết tới và có tính ứng dụng cao chẳng khác nào các siêu anh hùng dành cho các lập trình viên, trong số đó React là thư viện mình yêu thích và mong muốn giới thiệu tới mọi người.

Bài viết sẽ bao gồm nội dung:

  • React là gì ?
  • Tại sao lại là React ?
  • Cài đặt và ví dụ
  • Ứng dụng của React ?
  • Nguồn tài liệu học react
  1. React là gì ?
    – React là một thư viện UI được phát triển bới facebook dựa trên ngôn ngữ Javascript.
    React được phân làm hai loại chính là Reactjs cho phát triển ứng dụng web và React native dành cho phát triển ứng dụng đa nền tảng (Ios và Android). (Mình sẽ có các series riêng cho hai loại thư viện này trong quá trình học và làm về React).
    Ngoài ra hiện nay còn có các ứng dụng React VR (vitural real ứng dụng thực tế ảo) đây thật sự là một công nghệ của tương lai và mình sẽ có các bài viết cụ thể về riêng chủ đề này.
  2. Tại sao lại là React?
    Câu hỏi này đối với mình nói chung không khó để trả lời, đơn giản vì mình thấy nó khá hay, hiệu năng tốt, dễ bảo trì và mở rộng ứng dụng (khi tăng về độ khó và size của ứng dụng), dễ tích hợp với các ngôn ngữ backend, front-end khác, điểm đặc biệt là nó cực dễ học cho người mới bắt đầu, lấy ví dụ với angular, để làm được một ứng dụng nho nhỏ với nó thôi cũng đã đủ mệt nếu không phải người kiên nhẫn chắc bạn cũng chẳng muốn học tiếp. Nhưng với React đó là một câu chuyện hoàn toàn khác. Một app (web, mobile) độ khó dễ tới trung bình một người mới học mình nghĩ tầm 1-3 ngày là có thể hoàn thành (nếu đã có chút hiểu biết nhát định về javascript) .
    Khi mới bắt đầu để tìm một thư viện phù hợp quả thật là điều khó khăn, javascript ngày nay đã trở nên quá phổ biến, đi kèm với nó là hàng tá thư viện với những ưu nhược điểm khác nhau, muốn thử tất cả thì quả thật là điều mà không phải ai cũng làm được và muốn làm như vậy(quá tốn thời gian). Khi chọn một thư viện sử dụng thì nên tìm hiểu về số lượng người dùng, nơi mà ta có một cộng đồng luôn sẵn sàng hỗ trợ khi gặp vấn đề nan giải, react là một trong số thư viện được sử dụng nhiều nhất trên thế giới và đang tăng qua từng năm.
    Một số điểm nổi trội có thể điểm lại là:
    + React sử dụng Dom ảo để render và update Dom tree, sử dụng thuật toán Diff tạo ra high-performance
    + Ứng dụng sử dụng flow data một chiều từ Component (mình sẽ giải thích chi tiết sau, tạm hiểu là các vùng view trên mành hình hoặc class trong ngôn ngữ lập trình như c#, java) cha tới component con, dễ dàng quản lý data
    + Dễ phát triển và mở rộng (do là thuần thưu viện UI)
    + Dễ học (chỉ cần biết cơ bản javascript, css, html)
    + Cộng đồng lớn
    + Được maintain bởi một công ty hàng đầu về công nghệ (facebook)
    + Đặc biệt phát triển được cả trên web và ứng dụng di động.
    Một vài thông tin về react qua chart:
    1. Lượt tải trong 6 tháng
      Thông tin rate sao trên git


    2. Ai cũng có trong mình một hình mẫu lý tưởng và một phong cách khác nhau mà nó tách biệt giữa bạn và người khác. Mình đến với react rất tình cờ qua một vài dự án ở công ty, react thật sự đã thuyết phục được mình lựa chọn để theo đuổi và phát triển các dự án không chỉ cho hiện tại và cả tương lại. Lúc mới đầu phát triển ứng dụng fontend, việc tìm cho mình một thư viện hay framework để gắn bó quả là một quá trình dài, đứng trước muôn vàn lựa chọn hiện nay tìm ra một cái lý tưởng thật sự rất khó khăn, cũng như thế giới Marvel bạn thích Thor hay captain có thể chỉ vì vẻ đẹp trai hay nhân vật có tính cách nổi điên như Hulk hoặc cũng có thể là anh tràng vision có năng lực siêu nhiên. Trong cái thế giới Marvel cho lập trình viên thì react là anh chàng mà mình cần, một mình mẫu lý tưởng để theo đuổi ít nhất ở hiện tại và tương lai gần.

    3. Cài đặt và ví dụ
      Để phát triển ứng dụng react cần cài nodejs https://nodejs.org/en/
      lưu ý: react(js) chỉ là một thư viện cho phát triển UI cần cài nodejs để chạy webserver và cài các module packages dùng cho phát triển ứng dụng.
      Bài viết này mình sẽ hướng dẫn cài reactjs dùng cho phát triển các ứng dụng web, đối với react native dùng cho phát triển ứng dụng di động đa nền tảng mình sẽ có bài viết hướng dẫn cụ thể. 
      Reactjs sử dụng javascript là ngôn ngữ phát triển, các cú pháp có thể dử dụng là: javascript, typescript, jsx. Typescript mình recommend dùng cú pháp này và sẽ có bài hướng dẫn cụ thể dùng typescript để tạo module dưới dạng interface upload lên npm cho việc tái sử dụng và chia sẻ với cộng đồng. Javascript sử dụng version ES5, ES6, ES7 mình recommend dùng ES >= 6. 
      Sau khi cài node gõ lệnh để test môi trường chạy của ứng dụng: npm -V  và node -V (mình recommend dùng các version). Các trình duyệt hiện tại chưa support ES6 hoàn toàn (phổ biến là ES5), vậy để trình duyệt hiểu được cần một thư viện để dịch cú pháp ES6 ra ES5 và một bundle file load dependence dùng webpack để cấu hình, bài viết này mình sẽ không đi quá sâu về mặt kỹ thuật, các cài đặt chi tiết mình sẽ hướng dẫn trong một bài khác cùng series.
      Cú pháp một component :
      const Item = (props) => (
             <li>{props.name}</li>
      )
      export default Item;
      sử dụng:
      import Item from ‘./item’
      class ListItem extent Component {
              constructor(props){
                    super(props);   
                    this.state = {
                         name: ”
                   }          
             }
             render(){
                     return(
                          <ul><Item name={this.state.name} /></ul>
                     )
             }
      }
      Với việc export module (component), react có tính tái sử dụng cao, data flow một chiều dễ debug dễ hiểu (dữ liệu được truyền từ cha xuống con). Cú pháp sư dụng giống xml trộn javascript dễ dàng cho việc cấu trúc UI. Ngoài ra còn rất nhiều điểm đặc biệt hơn so với các thư viện hay framework fontend khác hiện nay, làm cho React trở thành một nhân vật siêu anh hùng không những có vẻ ngoài hoàng nhoáng mà còn cực kỳ mạnh mẽ ở bên trong.
    4. Ứng dụng của react
      – Web site: facebook , Dropbox, BBC, Instagram…
      – Ứng dụng đa nền tảng: facebook, instagram, wallmart, Skype…
      và rất nhiều ứng dụng khác.
      – Ứng dụng nuôi tôm IoT dùng react native phát triển đa nền tảng(android và ios) của công ty 3s đã ready trên các store:
      https://itunes.apple.com/us/app/shrimpfeeder/id1431623463?ls=1&mt=8
      https://play.google.com/store/apps/details?id=shrimpfeeder.package.appandroid
    5. Nguồn tài liệu
      Nguồn tài liệu chính thức từ nhà phát triển: 
      https://reactjs.org/
      https://facebook.github.io/react-native/
      IDE trên nền web cho người mới bắt đầu mà không cần quan tâm tới cấu hình: www.codesandbox.io/s/new
      Tool và Ide thường dùng sublineText, webstorm, visual code…

      Mình sẽ update dần tài liệu trong series về react khi đi sâu hơn.
      Nếu bạn còn là người mới bắt đầu, hay lập trình viên muốn tìm hiểm thêm kiến thức về lập trình js, cũng như người muốn lập trình đa nền tảng mình khuyên nên bắt đầu ngay với React, một thư viện javascript tuyệt vời, một siêu anh hùng trong thế giới Marvel dành riêng cho lập trình viên. 
      So sánh quản lý bộ nhớ giữa một vài thư viện



      So sánh hiệu năng một vài thư viện.
    in Tech


    Vỡ Lòng Về “ Internet Of Things” (Kết Nối Vạn Vật)