Copyright from: https://medium.com
Tôi đã bắt đầu học React như thế nào?
Chia sẻ rất hay của anh Pete Houston, mình xin phép dịch lại cho các bạn tham khảo!
Hiện nay, ReactJS đang nhận được rất nhiều sự chú ý và nó đang trở nên rất phổ biến, điều này khiến các lập trình viên muốn tìm hiểu và thử làm việc với React. Tuy nhiên, tôi (Pete Houston) đã gặp rất nhiều câu hỏi kiểu như:
Hiện nay, ReactJS đang nhận được rất nhiều sự chú ý và nó đang trở nên rất phổ biến, điều này khiến các lập trình viên muốn tìm hiểu và thử làm việc với React. Tuy nhiên, tôi (Pete Houston) đã gặp rất nhiều câu hỏi kiểu như:
- Làm thế nào để bắt đầu với React?
- Tôi đã học theo chỉ dẫn trên trang chủ của React nhưng vẫn không biết mình nên làm gì với React.
- Tìm kiếm trên Google thì gặp hàng tá các hướng dẫn, ví dụ về React, nhưng nó quá dài và nhiều khái niệm phức tạp như Webpack, Babel, ES6/7, GraphQL, Relay, Flux, Redux,… Làm sao để một người có thể học React một cách đơn giản, dễ hiểu?
- …etc
Theo tôi, việc học React yêu cầu phải có một chút kiến thức về công nghệ và kỹ năng lập trình. Bạn không thể cứ nhảy bổ vào học vì thấy người khác học React rất nhanh và cho rằng mình cũng vậy. Không có khái niệm ‘nhanh’ trong việc học. (Tác giả cũng không chắc chắn về điều này, theo mình thì vẫn có nhiều người có khả năng tư duy, tiếp thu nhanh bẩm sinh, do đó khái niệm ‘nhanh’ có thể vẫn tồn tại).
Tôi xin phép được chia sẻ câu chuyện về việc học React của mình.
Hai năm trước, khi còn làm việc với Angular, tôi đã gặp một vấn đề trong việc duy trì chia sẻ các thành phần giữa web và di động. Nó dạng như:
- Input càng lag khi có nhiều kí tự được nhập. ($watch của Angular 1.x). Nó càng lag hơn đối với thiết bị di động.
- Các controller lộn xộn vì tôi đã phải định nghĩa controller cho một template directive, và khi sử dụng chúng trong HTML, tôi cần nhiều ứng dụng controller hơn. Truyền dữ liệu và định nghĩa scope thực sự phức tạp.
- Luồng dữ liệu hai chiều đã tạo ra rất nhiều lỗi ‘vi diệu’. Và console log của Angular thực sự là “truly descriptive”. (Mình không biết dịch cụm từ này thế nào cho sát nghĩa nên để nguyên gốc).
Khi tìm kiếm giải pháp để nâng cao Angular codebase từng chút một, tôi đã tìm thấy React (như kiểu ánh sáng nơi cuối con đường =))). Sau vài giờ ‘nghịch’ nó trên trình duyệt, tôi đã tìm được giải pháp cho mình. Do đó tôi quyết định chuyển hết code từ Angular sang React sau 3 ngày suy nghĩ.
Nhưng đó không phải công việc dễ dàng, bởi vì tôi không có nhiều kiến thức về React. Học theo hướng dẫn của React không được coi là biết về nó. Sau đó tôi đi sâu hơn vào React và hệ thống sinh thái của nó. Thực chất tôi gọi là hệ thống sinh thái có nghĩa là bất cứ thứ gì mà liên quan đến React được sử dụng như những yêu cầu cho một khối xây dựng ứng dụng React tốt.
Tôi đã vẽ ra một lộ trình cho việc học sau khi tìm ra thứ mà tôi thực sự cần để thiết kế lại ứng dụng của mình. Và lộ trình đó đây:
Học ECMAScript ES6
Lúc đó, tôi chỉ dùng ES5 nhưng khi thấy ES6 có tương lai hơn và đội ngũ React cũng sử dụng nó, nên học ES6 (thậm chí là ES7) là một lựa chọn đúng đắn. Thứ này rất dễ học với tôi bởi vì tôi đã quen với ngôn ngữ (ý nói Javascript) và syntax mới không khó lắm. Nếu bạn đã quen với Javascript thì bạn sẽ không hề gặp vấn đề nào khi học ES6. Nhưng nếu không, thì hãy bỏ thêm thời gian.
Một số trang đã được tạo để giúp việc học ES6:
- https://babeljs.io/docs/learn-es2015/
- http://es6katas.org/
- https://github.com/lukehoban/es6features
- https://github.com/rse/es6-features
- http://exploringjs.com/es6/
Một số tính năng quan trọng của ES6 được sử dụng thường xuyên trong React hiện nay, và tôi rất muốn đề nghị bạn nên học nó trước khi đâm sâu vào React:
- sses.
- Arrow function.
- Constant
- Scope (variables, functions).
- map() function.
- Destructuring assignment.
- Template string. (tùy chọn, nhưng nó rất hữu ích cho việc định dạng chuỗi)
Học Webpack
React sử dụng Webpack như một công cụ mặc định. Do đó, học cách sử dụng Webpack cho việc triển khai ứng dụng là rất cần thiết. Nhưng thời điểm này, Webpack không được phổ biến như Grunt hay Gulp, có rất khó để tìm một hướng dẫn nào tốt, rõ ràng để giải thích các chức năng của Webpack.
Tôi đã rất khó khăn khi học Webpack, tìm lấy các hướng dẫn, tài liệu, ghi nhớ chúng. Tạo rất nhiều Webpack nhỏ đơn giản và thay đổi vài cấu hình khác nhau để quan sát sự khác biệt. Tôi tin vào phương pháp ‘thử nghiệm và lỗi’ trong học tập. Tôi đã mất cả một tháng để học, nhưng nó rất có giá trị.
Tuy nhiên, ở thời điểm viết bài này (thời điểm tác giả viết chứ không phải thời điểm mình dịch), Webpack đã được phổ biến và có rất nhiều ví dụ và hướng dẫn chất lượng cho Webpack. Nếu bạn chưa biết gì về Webpack và muốn học nó, tôi thực sự đề nghị bạn nên tham khảo các trang này:
- https://webpack.github.io/docs/tutorials/getting-started/
- https://medium.com/@dabit3/beginner-s-guide-to-webpack-b1f1a3638460#.bw960lct3
- https://github.com/AriaFallah/WebpackTutorial
- https://dinosaurscode.xyz/tutorials/2016/07/24/beginner-friendly-webpack-tutorial/
- http://www.edc4it.com/blog/web/webpack-tutorial.html
Bạn có thể tìm hiểu sâu hơn về loaders và plugins sau nếu thấy cần thiết.
Học React
Sau đó, tôi đã ngay lập tức bắt đầu với React. Nó có vẻ dễ bởi vì tôi đã quen với syntax của ES6 và Webpack.
Một số khái niệm nên học cẩn thận nếu bạn hoàn toàn chưa biết gì về React:
- State
- Props
- React component lifecycle
- và nhận thức được “shouldComponentUpdate()”.
Đừng bỏ qua việc học chúng nếu bạn không muốn hối hận sau này.
Học ReactRouter
Điều hướng trong front-end là rất quan trọng, do đó ta cần đến ReactRouter. Tôi mất kha khá thời gian cho phần học này . Tôi vẫn tạo và xóa các dự án để học ReactRouter. Bởi vì tâm trí tôi đã bị gắn liền với ngRoute của Angular, do vậy thật khó để nghĩ về việc điều hướng trong React thông qua các component.
Ở điểm điểm viết bài này, có rất nhiều hướng dẫn về ReactRouter, vậy nên tôi không cung cấp nhiều link, chỉ một link mà tôi nghĩ rằng nó đủ tốt cho người mới:
Học Flux
Flux là một thiết kế kiến trúc cho front-end bởi đội ngũ Facebook React. Nó tốt hơn bất cứ MV* nào như Angular (Angular theo mô hình MVC). Tôi đã bắt đầu việc học Flux của mình với Reflux. Đã có một khoảng thời gian khó khăn trong việc học. Khái niệm thì tương đối ổn, nhưng sau đó là những ứng dụng luồng dữ liệu phức tạp, tôi đã mất dấu trong việc quản lý dữ liệu. Debug cũng khó bởi vì nó là thứ gì đó dựa trên sự kiện. Tuy nhiên, nhờ học việc sử dụng Redux rất khó nhọc mà tôi đã nắm được cái ý niệm của kiến trúc Flux. Sau đó tôi cần tìm một vài thư viện mà có thể giúp mình quản lý dữ liệu tốt hơn. May mắn thay, Redux 200 xuất hiện! (Ánh sáng cuối con đường part 2).
Học Redux
Tôi đã đọc các tài liệu và học Redux hầu như không tốn thời gian. Đơn giản và nhanh như tác giả của Redux đề cập:
Đừng để bị lừa bởi tất cả những cuộc nói chuyện về reducers, middleware, store enhancers — Redux đơn giản đến kinh ngạc. Nếu bạn đã đừng xây dựng một ứng dụng Flux, bạn sẽ cảm thấy như ở nhà, nếu bạn chưa biết gì về Flux, nó cũng đơn giản thôi! —Tài liệu ReduxJS.
Chỉ đơn giản viết lại ứng dụng TodoList vài lần, bạn sẽ học nó thật là nhanh. Tôi hứa với bạn điều này!
Có 2 thứ cần ghi nhớ khi sử dựng Redux:
Dữ liệu nên luôn luôn bất biến. Sẽ rất là tốt và cũng là một bài tập tốt để làm cho dữ liệu của bạn bất biến nếu bạn không muốn tốn thời gian tìm những nhà ảo thuật gia đang nấp ở đâu đó trong ứng dụng của bạn.
Cẩn thận xử lý hành động không đồng bộ. Bạn không muốn mất dữ liệu ở đâu đó trong hoạt động bất đồng bộ chứ?
Học bằng cách luện tập viết nhiều ứng dụng từ nhỏ đến lớn.
Bạn sẽ không thực sự nhận được thứ gì đó nếu không sử dụng chúng. Đây là một phần rất quan trọng của việc thay đổi quan niệm để làm việc tốt với React. Cố nghĩ ra nhiều ý tưởng nhỏ và áp dụng nó vào React.
Học, học nữa, học mãi.
Vào lúc này, bạn có thể tìm bất cứ thứ gì trong hệ thống sinh thái của React mà phù hợp với kiến trúc của bạn, học và sử dụng một cách đúng đắn. Một vài thứ bạn có thể xem qua:
Tôi đã mất một quãng thời gian khó khăn, khoảng 3 tháng rưỡi đi sâu vào tìm hiểu React và những hàng xóm của nó. Nhưng nó đã tiết kiệm giúp tôi rất nhiều, viết lại cái ứng dụng lớn và cũ sử dụng Angular mà tôi đã mất 3 tháng phát triển nay chỉ có 5 tuần khi sử dụng React. Mọi thứ đã dễ dàng hơn, và React thật tuyệt vời nếu bạn học nó một cách đúng đắn. Với ứng dụng di động, tôi không sử dụng React Native bởi vì nó không có ở đây. Tôi sử dụng Apache Cordova với React để xây dựng ứng dụng di động hồi năm 2014. Bằng cách nào đó, nó hoạt động, nó đã hoạt động!
Nếu bạn thực sự muốn học React, hãy nhớ: “Đừng vội, giữ bình tĩnh và học React từng bước một”.
Mình cũng muốn cùng tác giả chúc các bạn đạt may mắn và thành công trên con đường đã chọn!
Cám ơn anh Pete Houston đã có một chia sẻ rất hữu ích cho mọi người!
