1. ReactJS là gì?
ReactJS là một opensource được phát triển bởi Facebook, ra mắt vào năm 2013, bản thân nó là một thư viện Javascript được dùng để để xây dựng các tương tác với các thành phần trên website. Một trong những điểm nổi bật nhất của ReactJS đó là việc render dữ liệu không chỉ thực hiện được trên tầng Server mà còn ở dưới Client nữa.

2. Tại sao các JavaScript developer lại sử dụng ReactJS?

ReactJS là một thư viện JavaScript chuyên giúp các nhà phát triển xây dựng giao diện người dùng hay UI. Trong lập trình ứng dụng front-end, lập trình viên thường sẽ phải làm việc chính trên 2 thành phần sau: UI và xử lý tương tác của người dùng. UI là tập hợp những thành phần mà bạn nhìn thấy được trên bất kỳ một ứng dụng nào, ví dụ có thể kể đến bao gồm: menu, thanh tìm kiếm, những nút nhấn, card,… Giả sử bạn đang lập trình một website thương mại điện tử, sau khi người dùng chọn được sản phẩm ưng ý rồi và nhấn vào nút “Thêm vào giỏ hàng”, thì việc tiếp theo mà bạn phải làm đó là thêm sản phẩm được chọn vào giỏ hàng và hiển thị lại sản phẩm đó khi user vào xem => xử lý tương tác.

Trước khi có ReactJS, lập trình viên thường gặp rất nhiều khó khăn trong việc sử dụng “vanilla JavaScript”(JavaScript thuần) và JQuery để xây dựng UI. Điều đó đồng nghĩa với việc quá trình phát triển ứng dụng sẽ lâu hơn và xuất hiện nhiều bug, rủi ro hơn. Vì vậy vào năm 2011, Jordan Walke – một nhân viên của Facebook đã khởi tạo ReactJS với mục đích chính là cải thiện quá trình phát triển UI.

Hơn nữa, để tăng tốc quá trình phát triển và giảm thiểu những rủi ro có thể xảy ra trong khi coding, React còn cung cấp cho chúng ta khả năng Reusable Code (tái sử dụng code) bằng cách đưa ra 2 khái niệm quan trọng bao gồm:

• JSX.
• Virtual DOM.

Để hiểu rõ hơn về ReactJS và tại sao bạn nên sử dụng nó, chúng ta cùng nhau tìm hiểu 2 khái niệm trên để xem chúng thực sự làm việc như thế nào.

2.1 JSX

Trọng tâm chính của bất kỳ website cơ bản nào đó là những HTML documents. Trình duyệt Web đọc những document này để hiển thị nội dung của website trên máy tính, tablet, điện thoại của bạn. Trong suốt quá trình đó, trình duyệt sẽ tạo ra một thứ gọi là Document Object Model (DOM) – một tree đại diện cho cấu trúc website được hiển thị như thế nào. Lập trình viên có thể thêm bất kỳ dynamic content nào vào những dự án của họ bằng cách sử dụng ngôn ngữ JavaScript để thay đổi cây DOM.

JSX (nói ngắn gọn là JavaScript extension) là một React extension giúp chúng ta dễ dàng thay đổi cây DOM bằng các HTML-style code đơn giản. Và kể từ lúc ReactJS browser hỗ trợ toàn bộ những trình duyệt Web hiện đại, bạn có thể tự tin sử dụng JSX trên bất kỳ trình duyệt nào mà bạn đang làm việc.

2.2 Virtual DOM

Nếu bạn không sử dụng ReactJS (và JSX), website của bạn sẽ sử dụng HTML để cập nhật lại cây DOM cho chính bản nó (quá trình thay đổi diễn ra tự nhiên trên trang mà người dùng không cần phải tải lại trang), cách làm này sẽ ổn cho các website nhỏ, đơn giản, static website. Nhưng đối với các website lớn, đặc biệt là những website thiên về xử lý các tương tác của người dùng nhiều, điều này sẽ làm ảnh hưởng performance website cực kỳ nghiêm trọng bởi vì toàn bộ cây DOM phải reload lại mỗi lần người dùng nhấn vào tính năng yêu cầu phải tải lại trang).

Tuy nhiên, nếu bạn sử dụng JSX thì bạn sẽ giúp cây DOM cập nhật cho chính DOM đó, ReactJS đã khởi tạo một thứ gọi là Virtual DOM (DOM ảo). Virtual DOM (bản chất của nó theo đúng tên gọi) là bản copy của DOM thật trên trang đó, và ReactJS sử dụng bản copy đó để tìm kiếm đúng phần mà DOM thật cần cập nhật khi bất kỳ một sự kiện nào đó khiến thành phần trong nó thay đổi (chẳng hạn như user nhấn vào một nút bất kỳ).

Ví dụ, khi người dùng bình luận vào khung comment vào bất kỳ bài Blog nào trên website của bạn và nhấn “Enter”. Dĩ nhiên, người dùng của bạn sẽ cần phải thấy được bình luận của mình đã được thêm vào danh sách bình luận. Giả sử trong trường hợp không sử dụng ReactJS, toàn bộ cây DOM sẽ phải cập nhật để báo hiệu sự thay đổi mới này. Còn khi bạn sử dụng React, nó sẽ giúp bạn scan qua Virtual DOM để xem những gì đã thay đổi sau khi người dùng thực hiện hành động trên (trong trường hợp này, thêm mới bình luận) và lựa chọn đúng nơi đúng chỗ cần cập nhật sự thay đổi mà thôi.
Với việc cập nhật đúng chỗ như vậy, khỏi phải nói nó tiết kiệm cho chúng ta rất nhiều tài nguyên cũng như thời gian xử lý. Ở các website lớn và phức tạp như thương mại điện tử, đặt món ăn, v.v bạn sẽ thấy việc này là vô cùng cần thiết và quan trọng để làm tăng trải trải nghiệm của khách hàng và performance được cải thiện đáng kể.

3. Ưu điểm của ReactJS

Ngoài việc hỗ trợ xây dựng giao diện nhanh, hạn chế lỗi trong quá trình code, cải thiện performance website thì những tính năng đặc biệt dưới đây có thể là lý do khiến bạn “chốt sale” với ReactJS và bắt đầu tìm hiểu nó từ bây giờ:

• Phù hợp với đa dạng thể loại website: ReactJS khiến cho việc khởi tạo website dễ dàng hơn bởi vì bạn không cần phải code nhiều như khi tạo trang web thuần chỉ dùng JavaScript, HTML và nó đã cung cấp cho bạn đủ loại “đồ chơi” để bạn có thể dùng cho nhiều trường hợp.
• Tái sử dụng các Component: Nếu bạn xây dựng các Component đủ tốt, đủ flexible để có thể thoả các “yêu cầu” của nhiều dự án khác nhau, bạn chỉ tốn thời gian xây dựng ban đầu và sử dụng lại hầu như toàn bộ ở các dự án sau. Không chỉ riêng mỗi ReactJS mà các framework hiện nay cũng đều cho phép chúng ta thực hiện điều đó, ví dụ Flutter chẳng hạn.
• Có thể sử dụng cho cả Mobile application: Hầu hết chúng ta đều biết rằng ReactJS được sử dụng cho việc lập trình website, nhưng thực chất nó được sinh ra không chỉ làm mỗi đều đó. Nếu bạn cần phát triển thêm ứng dụng Mobile, thì hãy sử dụng thêm React Native – một framework khác được phát triển cũng chính Facebook, bạn có thể dễ dàng “chia sẻ” các Component hoặc sử dung lại các Business Logic trong ứng dụng.
• Thân thiện với SEO: SEO là một phần không thể thiếu để đưa thông tin website của bạn lên top đầu tìm kiếm của Google. Bản chất ReactJS là một thư viện JavaScript, Google Search Engine hiện nay đã crawl và index được code JavaScript, tuy nhiên bạn cũng cần thêm một vài thư viện khác để hỗ trợ điều này nhé!
• Debug dễ dàng: Facebook đã phát hành 1 Chrome extension dùng trong việc debug trong quá trình phát triển ứng dụng. Điều đó giúp tăng tốc quá trình release sản phẩm cung như quá trình coding của bạn.
• Công cụ phát triển web hot nhất hiện nay: Nếu bạn nhìn vào số liệu thống kê từ Google Trend ở Việt Nam ở hình bên dưới, dạo lướt qua các trang tuyển dụng hàng đầu ở Việt Nam như Topdev, Itviec, v.v bạn sẽ thấy số lượng tuyển dụng cho vị trí React Developer là cực kỳ lớn cùng với mức lương vô cùng hấp dẫn và độ phổ biến hiện tại của ReactJS trên thị trường Việt Nam là như thế nào.
  
  
  
  

  4. ReactJS Developer Roadmap

  Dưới đây là hình ảnh của React Developer RoadMap được thiết kế bởi adam-golab, trong đó phác thảo những điều bắt buộc, những điều cần biết và một số nội dung bổ sung mà bạn có thể học để trở thành một React Developer.

   Basic

  Bất kể bạn học framework hay thư viện nào để phát triển web, bạn phải biết những điều cơ bản. Và những điều cơ bản này chính là HTML, CSS và JavaScript, ba thứ này là ba trụ cột của phát triển web.

  HTML

  Đây là một trong những trụ cột đầu tiên và là kỹ năng quan trọng nhất đối với các nhà phát triển web vì nó tạo nên cấu trúc cho một trang web.

  CSS

  Đây là trụ cột thứ hai của phát triển web và được sử dụng để tạo kiểu cho các trang web sao cho chúng nhìn trông đẹp mắt hơn.

  JavaScript

  Đây là trụ cột thứ ba của việc phát triển web và được sử dụng để làm cho các trang web của bạn trở nên có tính tương tác. Đó cũng là mục đích của thư viện React. Do đó bạn nên biết JavaScript và biết rõ về nó trước khi cố gắng học React JS.

   Những kỹ năng Development chung

  Không quan trọng bạn là frontend developer hay backend developer hay thậm chí là full-stack software engineer. Bạn phải biết một số kỹ năng phát triển chung để tồn tại trong thế giới lập trình và đây là danh sách một số kỹ năng đó

  Sử dụng GIT

  Hãy thử tạo một vài repositories trên GitHub, chia sẻ code của bạn với người khác và tìm hiểu cách tải code xuống từ Github trên IDE yêu thích của bạn.

  Hiểu về giao thức HTTP(S)

  Nếu bạn muốn trở thành một web developer, thì bạn nhất thiết phải biết HTTP và biết rõ về nó. Không nhất thiết phải đọc tất cả thông số kỹ thuật, nhưng ít nhất bạn nên quen thuộc với các phương thức yêu cầu HTTP tiêu chuẩn như GET, POST, PUT, PATCH, DELETE, OPTIONS và cách thức hoạt động của HTTP / HTTPS nói chung.

  Hiểu về terminal

  Mặc dù một frontend developer không cần phải học Linux hoặc terminal nhưng việc làm quen với terminal cũng không mất gì phải không.

  Thuật toán và cấu trúc dữ liệu

  Đây lại là một trong những kiến thức lập trình nền tảng không nhất thiết phải có để trở thành một React developer nhưng bắt buộc phải có nếu bạn muốn đi xa hơn với nghề lập trình.

  Tìm hiểu về Design Patterns và Software Architecture

  Cũng giống như Thuật toán và Cấu trúc dữ liệu, bạn không bắt buộc phải học design patterns để trở thành React Developer. Nhưng bạn sẽ làm việc tốt hơn rất nhiều nếu bạn học nó. Design patterns là các giải pháp đã được thử và kiểm tra cho các vấn đề hàng ngày xảy ra trong quá trình phát triển phần mềm.

   Tìm hiểu về Build Tools

  Nếu bạn muốn trở thành một nhà phát triển React chuyên nghiệp, thì bạn nên dành một chút thời gian để làm quen với các tools mà bạn sẽ được sử dụng như built tools, unit testing tools, debugging tools v.v.

  Đây là một số build tool được đề cập trong lộ trình này:

  Package Managers

  • npm
  • yarn
  • pnpm
  • Task Runners
  • npm scripts
  • gulp
  • Webpack
  • Rollup
  • Parcel

  Không cần thiết phải học tất cả các công cụ này, chỉ cần học npm và webpack là đủ cho người mới bắt đầu. Khi bạn hiểu rõ hơn về phát triển web và Hệ sinh thái của React, bạn có thể khám phá các công cụ khác.

   STYLING

  Nếu bạn đang muốn trở thành một front-end developer, thì việc biết một chút về Styling sẽ không thiệt thòi gì. Mặc dù RoadMap đề cập đến rất nhiều thứ như CSS Preprocessors, CSS Frameworks, CSS Architecture và CSS trong JS nhưng bạn cần học Bootstrap trước. Framework CSS quan trọng nhất mà bạn sẽ sử dụng mọi lúc, mọi nơi.

   STATE MANAGEMENT

  Đây là một lĩnh vực quan trọng khác mà một React Developer cần tập trung vào. Roadmap đề cập đến các khái niệm và frameworks mà bạn cần để nắm vững:

  • Component State/Context API
  • Redux
  • Async actions (Side Effects)
  • Redux Thunk
  • Redux Better Promise
  • Redux Saga
  • Redux Observable
  • Helpers
  • Rematch
  • Reselect
  • Data persistence
  • Redux Persist
  • Redux Phoenix
  • Redux Form
  • MobX
  • React Hooks

  Nếu danh sách trên khiến bạn ngợp thì bạn chỉ cần tập trung vào Redux trước nhé

   TYPE CHECKERS

  Vì JavaScript không phải là một ngôn ngữ strongly typed, nên bạn không có đủ điều kiện để có một trình biên dịch bắt những bug liên quan đến type.

  Khi ứng dụng của bạn phát triển, bạn có thể gặp rất nhiều lỗi khi kiểm tra loại. Bạn có thể sử dụng các tiện ích mở rộng JavaScript như Flow hoặc TypeScript để kiểm tra toàn bộ ứng dụng của mình.

  200lab có một khóa học ReactJS nâng cao trong đó có topic về TypeScript bạn có thể xem qua nhé!

   FORM HELPERS

  Ngoài Type Checkers, bạn cũng nên học các Form Helps như Redux Form, cung cấp cách tốt nhất để quản lý trạng thái biểu mẫu của bạn trong Redux. Ngoài Redux Form, bạn cũng có thể xem Formik, Formsy và Final form.
  
  
  
  

   ROUTING

  Các Components là trung tâm của React và Routing components là một phần thiết yếu của bất kỳ ứng dụng nào.

  Ngoài React-Router, bạn cũng có thể xem qua Router 5, Redux-First Router và React Router.

   API CLIENTS

  Trong thế giới ngày nay, bạn sẽ hiếm khi xây dựng một GUI riêng biệt. Thay vào đó bạn sẽ tạo ra thứ gì đó giao tiếp với ứng dụng khác bằng cách sử dụng các API như REST và GraphQL. Rất may, có rất nhiều ứng dụng API clients có sẵn cho các nhà phát triển React:

  REST

  • Fetch
  • SuperAgent
  • Axios

  GraphQL

  • Apollo
  • Relay
  • urql

  Apollo Client là ứng dụng xuất sắc. Nó cung cấp một cách thức dễ dàng cho chúng ta sử dụng GraphQL xây dựng các ứng dụng client.

  Khóa học ReactJS của 200Lab cũng chia sẻ rất sâu về GraphQL và Apollo.

   Utility Libraries

  Đây là những thư viện giúp công việc của bạn trở nên dễ dàng hơn. Có rất nhiều thư viện tiện ích có sẵn cho các nhà phát triển React, như danh sách dưới đây:

  • Lodash
  • Moment
  • classnames
  • Numeral
  • RxJS
  • Ramda

   Testing

  Đây là một trong những kỹ năng quan trọng đối với các React Developer mà thường bị bỏ qua. Thế nên nếu bạn muốn trở nên đắt giá thì bạn nên tập trung vào việc học các thư viện sẽ giúp bạn trong quá trình thử nghiệm.

  Dưới đây là danh sách các thư viện được đề cập trong roadmap:

  Unit Testing

  • Jest
  • Enzyme
  • Sinon
  • Mocha
  • Chai
  • AVA
  • Tape

  End to End Testing

  • Selenium, Webdriver
  • Cypress
  • Puppeteer
  • Cucumber.js
  • Nightwatch.js

  Integration Testing

  • Karma

  Testing cũng là một chủ đề khá hay trong khóa học ReactJS nâng cao của 200Lab.

   Internationalization

  Đây là một chủ đề quan trọng khác để phát triển giao diện người dùng được sử dụng trên toàn thế giới. Bạn có thể cần hỗ trợ phiên bản GUI cục bộ cho Nhật Bản, Trung Quốc, Tây Ban Nha và các quốc gia Châu Âu khác.

  RoadMap gợi ý bạn nên tìm hiểu công nghệ sau:

  • React Intl
  • React i18next

  Cả hai thư viện này đều cung cấp các thành phần React và một API để định dạng ngày tháng, số và chuỗi, bao gồm các bản dịch đa dạng hóa và xử lý.

   Server-Side Rendering

  Trong RoadMap đề xuất Server-Side Rendering như sau:

  • Next.js
  • After.js
  • Rogue

  Tận 3 cái nhưng bạn chỉ cận học Next.js thôi là đủ.

   Static Site Generator

  Gatsby.js là một static site generator hiện đại. Bạn có thể sử dụng Gatsby để tạo trang web cá nhân hóa và có chức năng đăng nhập. Chúng kết hợp dữ liệu của bạn với JavaScript và tạo nội dung HTML được định dạng chuẩn.

   Backend Framework Integration

  React on Rails tích hợp Rails với framework front-end React của Facebook. Nó cung cấp Server rendering, thường được sử dụng để lập chỉ mục trình thu thập thông tin SEO và hiệu suất UX, và không được cung cấp bởi rails / webpacker.

   Mobile

  Đây là một lĩnh vực khác mà việc học React có thể thực sự mang lại lợi ích vì React Native đang nhanh chóng trở thành tiêu chuẩn để phát triển ứng dụng di động bằng JavaScript với giao diện native.

  RoadMap gợi ý bạn nên tìm hiểu các thư viện sau:

  • React Native
  • Cordova / PhoneGap

  Nhưng bạn chỉ cần học thêm React Native là đủ tốt rồi.

   Desktop

  Cũng tồn tại một số framework dựa trên React để xây dựng GUI trên desktop như React Native Windows, cho phép bạn tạo các ứng dụng UWP và WPF native với React.

  Framework gợi ý các thư viện sau:

  • Proton Native
  • Electron
  • React Native Windows

  Tuy nhiên, tất cả chúng đều dành cho việc tìm hiểu nâng cao. Nếu bạn đã thành thạo React, bạn có thể xem qua chúng.

   Virtual Reality

  Nếu bạn quan tâm đến việc xây dựng các ứng dụng dựa trên Thực tế ảo, thì bạn cũng có một số framework như React 360, cho phép bạn có những trải nghiệm 360 và VR thú vị bằng cách sử dụng React.

  Đó là tất cả những gì về React RoadMap.

  Bạn đã nhìn thấy được bức tranh toàn diện. Có thể bạn sẽ cảm thấy phấn khích hoặc hơi choáng ngợp trước những kiến thức mình cần phải học. Tuy nhiên hãy cứ bắt đầu từ từ từng bước một. Khi đã có nền tảng vững chắc thì những kiến thức sau này bạn sẽ càng học nhanh hơn thôi.

  Qua bài viết này, mình hy vọng sẽ đem đến cho bạn một cái nhìn tổng quan hơn về ReactJS, cũng như những lợi ích thực sự mà ReactJS mang lại cho chúng ta.