Hướng dẫn học React Js

Hướng dẫn học React Js sao cho hiệu quả!

Nếu bạn mới làm quen với React (hoặc phần front-end nói chung) thì bạn sẽ thấy hệ sinh thái tương đối khó hiểu, đó là lý do vì sao có bài viết hướng dẫn học reactjs sao cho hiệu quả này, bài viết này được lấy các ý chính từ một bài viết mà tác giả là một trong những thành viên đầu tiên của nhóm Facebook tham gia xây dựng và triển khai mã nguồn mở thư viện React này. Hơn nữa, vì tác giả đó không còn làm ở Facebook nữa, nên có được cái nhìn khách quan không phụ thuộc Facebook nữa.

Bài viết giả sử là bạn đã từng có kinh nghiệm xây dựng web với HTML, CSS và Javascript.

Làm thế nào để tương tác với hệ sinh thái của React

Tất cả các phần mềm đều được xây dựng dựa trên một tập hợp các nền tảng công nghệ, và bạn cần phải hiểu rõ về chúng đủ để xây dựng ứng dụng. Nguyên nhân khiến cho công cụ trong hệ sinh thái của React trở nên phức tạp là vì luôn bị giải thích sai thứ tự.

Bạn nên  học, theo thứ tự này, không cần học trước hoặc học đồng thời:

• Thư viện React
• ES2015/ES6
• npm/yarn
• JavaScript “bundlers”
• Routing
• Flux/Redux

Bạn không cần phải học tất cả những thứ này để có thể làm việc hiệu quả với React. Chỉ nên chuyển sang bước tiếp theo nếu như bạn thấy có vấn đề cần được giải quyết. Riêng với ES2015, thì bạn cần học gần như song song vì nó đã trở nên phổ biến tại thời điểm bạn đọc bài này (2017+).

Thêm nữa, có vài chủ đề thường được nhắc đến trong cộng đồng React mà khá “nóng hổi”. Những chủ đề dưới đây khá là thú vị nhưng khó để có thể hiểu được và ít phổ biến hơn so với các chủ đề trên và không cần thiết khi xây dựng ứng dụng.

• Inline styles
• Server side rendering
• Immutable.js
• Relay, Falcor, Graphql, …

Tìm hiểu về React

Có một điều hay bị hiểu nhầm đó là bạn sẽ phí phạm nhiều thời gian trong việc thiết lập công cụ để bắt đầu học React. Trong tài liệu chính thống bạn sẽ thấy copy-paste HTML template là bạn chỉ cần lưu lại một file định dang .html và có thể bắt đầu ngay được. Không cần bất cứ công cụ nào ở bước này, và đừng bắt đầu học các công cụ bổ sung cho tới khi nào bạn cảm thấy thoải mái với React một cách cơ bản. 

Ở bước này, bạn sẽ hiểu cơ chế về DOM ảo của React là như thế nào, cách hoạt động của luồng dữ liệu trong mỗi component của React. Mặc dù bước học React thông qua html cũng không được sử dụng thực tế sau này, nhưng nó quan trọng để bạn hiểu cơ bản.

Mình cho rằng cách học React đơn giản nhất đó là tài liệu chính thống, đọc các tài liệu một cách đầy đủ thì sẽ nắm React tốt. Mặc dù tài liệu tiếng Anh, nhưng bạn cố gắng đọc hiểu từ từ, các bài viết tiếng Việt mà ngay cả là bài viết của mình cũng sẽ không bao giờ đầy đủ và hệ thống được.

Tìm hiểu về ES2015

Ngoài JSX (mà bạn học trong các hướng dẫn về React), bạn sẽ thấy nhiều cú pháp thú vị trong các ví dụ, có thể bạn chưa gặp nó khi làm với javascript thì có thể đó là ES2015 (tên không chính thức là ES6). Vì còn quá mới nên chưa được hỗ trợ hoàn toàn trên các trình duyệt, bạn có thể đọc bài viết về ES2015 tại đây, nhưng các công cụ đóng gói sẽ kết hợp thực hiện phiên dịch với cấu hình đúng cho bạn để có thể sử dụng được trên trình duyệt, còn gọi là transform (biến hình – như phim Transformer) từ mã viết bằng ES2015 sang ES5 mà tất cả các trình duyệt đều hỗ trợ.

Ở phiên bản đầu của tài liệu trước 2016, đều sử dụng React.createClass() để tạo component, điều này giờ đã không còn đúng nữa, khi toàn bộ các component (stateful) đều sử dụng bằng class của ES2015, vì vậy giờ đây ES2015 gần như là điều bắt buộc để đi tiếp không chỉ với React mà còn thế hệ javascript hiện tại nữa.

Tìm hiểu về npm, yarn

npm là công cụ quản lý package của Node.js và là phương pháp phổ biến nhất để các lập trình viên front-end và các nhà thiết kế chia sẻ mã nguồn Javascript. Nó bao gồm một hệ thống quản lý module gọi là CommonJS và cho phép bạn cài đặt bất cứ công cụ command-line nào được viết bằng Javascript. Hãy đọc bài này để biết vì sao CommonJS là cần thiết với các trình duyệt, hoặc CommonJS Spec Wiki để biết thêm về CommonJS API.

Hầu hết các components, thư viện và công cụ tái sử dụng trong hệ sinh thái của React đều được triển khai như là thành các module CommonJS và có thể cài đặt thông qua npm.

yarnlà bộ quản lý các gói thư viện theo mình đánh giá là tốt hơn npm, và cũng đã có bài viết giới thiệu về yarn, mình nghĩ yarn sẽ gần thay thế npm. Mặc dù quản lý công cụ này cũng tương đối đơn giản, nhưng không thể thiếu, bạn hãy dành thời gian tìm hiểu nhé.

Tìm hiểu về các công cụ đóng gói (bundlers) Javascript

Vì một vài lí do kĩ thuật mà module CommonJS (ví dụ, các thư viện trên npm) không thể sử dụng native trên trình duyệt. Bạn cần có một “công cụ đóng gói” Javascript để “đóng gói” các modules này thành các files .js mà có thể include được trên trang web qua thẻ <script>.

Một số ví dụ về công cụ đóng gói Javascript bao gồm webpack và browserify. Cả hai đều là sự lựa chọn tốt, nhưng mình thích webpack hơn vì nó có nhiều tính năng hỗ trợ tốt cho việc xây dựng lớn một cách dễ dàng hơn. Vì tài liệu của nó khá khó hiểu, bạn có thể tham khảo template để bắt đầu ngay và và xem thêm bài viết hướng dẫn về webpack với các tình huống sử dụng phức tạp hơn.

Một điều nên nhớ là CommonJS sử dụng hàm require() để nhập liên kết các modules, vì thế nhiều người có thể thắc mắc và nghĩ nó có liên quan gì đó tới một project khác có tên là require.js, bạn không cần phải quan tâm đến thư viện require.js khi làm việc với React.

Tìm hiểu về routing

“Các ứng dụng single-page” trở nên khá rầm rộ ngày nay. Đây là những trang web mà chỉ thực hiện khởi tạo một lần, và khi người dùng ấn vào một đường dẫn hay nút ấn thì Javascript trên trang web sẽ thực thi mà trang web không cần phải reload lại. Việc quản lý địa chỉ trên thanh địa chỉ được thực hiện bở router.

Router được sử dụng phổ biến nhất trong hệ sinh thái React hiện tại là react-router. React Router còn dùng chung được trong React Native với tên gọi react-router-native. Thật sự là không có ứng dụng nào không dùng router cả, trừ khi đó chỉ là 1 vài component đơn giản trong 1 trang duy nhất. Khi bạn mới học React, thì quả thật chưa cần quan tâm đến Router, nhưng rồi bạn cũng sẽ phải học, sử dụng router, chỉ là không nên học khi bạn chưa biết gì về react.

Tìm hiểu về Flux/Redux

Chắc hẳn bạn đã từng nghe về Flux/Redux, có quá nhiều thông tin không đúng về Flux/Redux, mình có bài viết về Redux tại đây.

Hiện tại cũng nổi lên 1 trường phải không sử dụng Redux/Flux trong dự án React, nhưng thiết kế Flux là do chính Facebook tạo ra nên chắc chắn 1 điều là nó sẽ hữu dụng, tất nhiên cũng đã được áp dụng thiết kế này vào chính ứng dụng/website Facebook nhưng với 1 thư viện khác không được công bố. Facebook chỉ công bố thiết kế về Flux, đó là lý do ra đời của Redux với thiết kế tinh giản hơn 1 chút, do thư viện Flux (cùng tên thiết kế) cũng không nổi tiếng và được chăm chút như Redux, nên đa phần mọi người đều dùng Redux, mình cũng khuyến nghị bạn dùng Redux và quên cái tên Flux đi.

Nhiều bạn khi mới bắt đầu React đã nghiên cứu, học ngay Redux, cách tiếp cận này khá nguy hiểm khi bạn chưa hiểu nhu cầu thực tế là gì, tại sao phải dùng Redux. Các bạn cần xây dựng component trước, khi bạn gặp vấn đề về cách giao tiếp dữ liệu giữa các component có quan hệ cha-con con-cha-con, thì nếu không giải quyết được, hoặc giải quyết xong thấy cấu trúc phức tạp thì hãy nghĩ đến Redux.

Nói rõ hơn, các components trong React được sắp xếp phân bậc, phần lớn thời gian, cấu trúc dữ liệu cũng đi theo cấp phân tầng. Một khi component cha thay đổi prop/state thì toàn bộ component con (trên cùng cây) sẽ được cập nhật. Ví dụ bạn có cấu trúc component có n+1 level, khi bạn cập nhật component level 1, và bạn muốn component level n cũng cập nhật, nếu bạn sử dụng React thuần, sẽ gây ra sự lãng phí về tài nguyên không cần thiết khi toàn bộ props để chuyển cho component level n đều được vận chuyển thông qua n component còn lại , và sự phức tạp khi component level n thay đổi và muốn component level 1 thay đổi theo. Hoặc là cấu trúc component không theo tầng, lộn xộn và phức tạp thì lúc này bạn nên sử dụng Redux. Ngược lại, nếu cấu trúc component chỉ cần 2,3 components thì bạn không cần sử dụng Redux. Ở đây 2,3 component trong 1 cây/nhóm component trên cùng 1 trang, không phải là toàn bộ dự án nhé.

Bạn chỉ cần xây dựng component trước, rồi hãy học Redux, đó mới là hướng đi đúng.

Tìm hiểu về inline styles

Trước React, nhiều người tái sử dụng CSS với các định dạng văn bản phức tạp xây dựng qua các tiền xử lý CSS như SASS. Nhưng sau đó React hỗ trợ để tạo các compoents có thể tái sử dụng một cách đơn giản, các định dạng CSS cũng trỏ nên đỡ phức tạp.

Đây có thể là một ý tưởng điên rồ vì mấy lí do. Nó làm cho media queries trở nên khó hơn, và có thể sinh ra hạn chế về hiệu năng khi sử dụng kĩ thuật này. Khi bắt đầu với React, chỉ cần style như bình thường.

Một khi bạn hiểu được React hoạt động thế nào, bạn có thể thử qua các phương pháp khác, một phương pháp phổ biến đó là BEM. Mình khuyên các bạn bỏ các tiền xử lý CSS, vì React hỗ trợ bạn một cách tái sử dụng styles tốt hơn và công cụ đóng gói Javascript có thể sinh ra các stylesheets tối ưu hơn (tham khảo về chia sẻ này tại OSCON). Mặc dù React như bất cứ một thư viện Javascript nào khác, vẫn hoạt động bình thường với các tiền xử lý CSS.

Tìm hiểu về server side rendering

Server side rendering thường được gọi là “toàn bộ” hay “đồng bộ” JS. Điều đó có nghĩa là bạn có thể lấy bất cứ React components nào và render chúng thành HTML tĩnh trên server. Điều này cải thiện được tốc độ ban đầu vì người dùng không cần phải chờ JS thực hiện download để có thể thấy được UI ban đầu, và React có thể tái sử dụng HTML đã được render phía server, vì vậy mà không cần xử lý ở phía client.

Bạn cần sử dụng server side rendering (SSR) khi mà bạn thấy việc render ban đầu trở nên quá chậm hoặc bạn muốn cải thiện thứ hạng tìm kiếm. Mặc dù Google bây giờ đã thực hiện index các nội dung render phía client, nhưng tại thời điểm tháng một 2016, mỗi khi được lấy ra đo lường thì thấy rõ thứ hạng bị ảnh hướng đi xuống, có khả năng là do vi phạm về tốc độ render phía client.

Việc render phía server vẫn có thể sử dụng nhiều công cụ để làm cho nó trở nên chính xác. Vì vậy khi bạn bắt đầu với React thì không  cần quan tâm tới việc render phía server, bạn nên xây dựng ứng dụng trước và quan tâm tới việc render phía server sau. Bạn sẽ không cần thiết phải viết lại tất cả các components để xử lý việc đó khi bạn cần đến SSR.

Hiện tại (2018), nền tảng tốt nhất để có SSR và lập trình React fullstack thì có Next.js, vào thời điểm này thì đã ra mắt Nextjs phiên bản 5, cực kỳ tốt và mình rất yêu thích Nextjs. Mình sử dụng nextjs cho tất cả dự án yêu cầu sử dụng Nodejs, bạn chỉ cần dùng Nextjs thì gần như các vấn đề về SSR, Router, … đều được giải quyết hết. Tuy nhiên, hãy nhớ là học React trước, bạn không nên nhảy vào Nextjs chỉ vì muốn học React, khi nào xong React và chiến dự án hãy dùng Nextjs.

Tìm hiểu về Immutable.js

Immutable.js cung cấp một tập hợp cấu trúc dữ liệu có thể hỗ trợ giải quyết các vấn đề về tối ưu hoá khi xây dựng ứng dụng React. Đấy là một thư viện tuyệt vời, và bạn chắc hẳn sẽ sử dụng khá nhiều khi xây dựng ứng dụng về sau. Tuy nhiên thì nó lại không cần thiết cho tới khi bạn quan tâm tới tối ưu hoá.

Tìm hiểu về Relay, Falcor etc

Đây là những công nghệ giúp bạn giảm số lượng AJAX requests. Những kĩ thuật này vẫn còn khá là mới mẻ, vì vậy, nếu bạn không có vấn đề với quá nhiều AJAX requests thì bạn không cần tới Relay hay Falcor. Nhắc tới Relay thì cũng liên quan mật thiết đến GraphQL, GraphQL giúp cho ứng dụng của bạn linh động và uyển chuyển với nhiều nguồn dữ liệu khác nhau, cũng như cho phép ứng dụng phía client quy định câu truy vấn (Xem thêm bài GraphQL là gì).

Tham khảo: PeteHunt/Github, PeteHouston/Github

Bài viết có cập nhật để phù hợp hơn với một số kỹ thuật mới, và chỉnh sửa các ý đã không còn đúng ở hiện tại (3/2018)