Hướng dẫn học React Js làm webapp

Để bắt đầu để tạo một webapp chúng ta cần học những cái cần thiết để phát triển. Để bắt đầu bạn cần ít nhất 2 bước cơ bản nhất.

Bước khởi động: Bắt đầu với những cái cơ bản nhất rất cần thiết khi bắt đầu.

• Reactjs
• npm/yarn:
• JavaScript “bundlers”:
• ES6 (babel)
• immutable

Bước tăng tốc: Nhưng công cụ cần thiết để giải quết những khó khăn khi phát triển app bằng reactjs

• Routing
• Redux
• Saga

Reatjs là gì:

React.JS là một thư viện Javascript dùng để xây dựng giao diện người dùng. Với cá nhân tôi cũng như nhận xét chung của cộng đồng về ReactJS thì nó nhanh, dễ học và vui.

npm và yarn:

npm là viết tắt của Node Package Manager cung cấp hai chức năng sau:

• Tạo các online repository cho node.js mà có thể tìm kiếm được tại địa chỉ www.npmjs.com
• Cung cấp các tiện ích để cài đặt gói Node.js, quản lí version và quản lí phụ thuộc của các gói trong Node.js.

yarn là công cụ quản lý thư viện javascript mã nguồn mở tốc độ cao, tin cậy và bảo mật nhằm thay thế NPM (Node Package Management). Được hình thành bởi các kỹ sư Facebook, Google, Exponent và Tilde, và đã được sử dụng thực tế mức Production tại các công ty trên.

JavaScript “bundlers” — Các công cụ đóng gói 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>.
Có rất nhiều công cụ để làm việc đó, cá nhân tôi thường dùng webpack.

Vậy Webpack là gì ? Tại sao nên dùng webpack?

Webpack là một module bundler. Tại Sao Nên Dùng Webpack

Với các web app lớn sẽ là không hiệu quả khi đặt tất cả code trong một file duy nhất, đặc biệt nếu một số đoạn code chỉ được gọi trong một số hoàn cảnh. Sử dụng webpack bạn có thể dễ dàng chia phần mềm ra thành rất nhiều file khác nhau.

Codebase có thể được chia thành các “chunks” có khả năng được load theo thứ tự hay yêu cầu. Với tính năng Code Spliting này mà nói, đa phần mọi người đều có chung một hiểu nhầm đó là nó chỉ tách các đoạn code dùng chung ra thành một “shared chunk” mà quên đi mất tính năng nổi bật nhất của nó là các “share chunk” kia có thể được load theo yêu cầu và được cache lại trong các hash. Điều đó có thể giúp giảm thời gian lúc khởi chạy đi đáng kể cũng như hệ thống chỉ load một file code khi cần thiết.

Giống như gulp hay grunt, Webpack có một bộ parse mạnh mẽ có thể build và bundle CSS, preprocessed CSS, compile-to-JS languages (ví dụ CoffeeScript), hình ảnh, icon và gần như là hầu hết các 3rd party library.

Một tính năng tuyệt vời khác đó là webpack plugin với khả năng tự thêm vào trong quá trình build, do đó cho phép bạn thoải mái tùy chỉnh webpack theo nhu cầu cũng như đóng góp xây dựng các plugin như open source.

ES6 có nên và không nên ?

Các bạn học reactjs có thể bỏ qua việc học ES6 này. ES6 cũng là một các để viết nhanh các React components.
ES6 hiện tại các trình duyệt chưa được hỗ trợ vào thời điểm tôi viết bài viết này (15/04/2017). Nếu các bạn viết bằng ES6 thì các công cụ đóng gói sẽ 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.

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á.

p/s: Bài viết đang được cập nhập tiếp các bạn có thể comment và góp ý giúp mình, lâu rồi mình không viết bài