React Native là gì?
React Native là một framework do công ty công nghệ nổi tiếng Facebook phát triển nhằm mục đích giải quyết bài toán hiệu năng của Hybrid và bài toán chi phí khi mà phải viết nhiều loại ngôn ngữ native cho từng nền tảng di động.
Chúng ta sẽ build được ứng dụng Native, và chúng ta cũng có thể build ứng dụng đó một cách đa nền tảng (multi-platform) chứ không phải là một “mobile web app”, không phải là “HTML5 app”, và cũng không phải là một “hybrid app” hay cũng không chỉ build trên iOS hay Android mà chúng ta build và chạy được cả hai hệ sinh thái luôn, sợ chưa!!!
Một điểm hay ho nữa mà mình có đề cập là giảm chi phí recompile của Native bằng cách sử dụng Hot-Loading tức là bạn không cần phải build lại ứng dụng từ đầu nên việc chỉnh sửa diễn ra rất nhanh chóng. Giúp cho lập trình viên có thể thấy được những chỉnh sửa của họ một cách nhanh chóng trực quan, không còn phải bỏ quá nhiều thời gian trong việc build và run ứng dụng nữa.
Và điểm lợi hại kế tiếp của React Native đó chính là chúng ta chỉ cần sử dụng JS để phát triển được một ứng dụng di động hoàn chỉnh, đồng thời giải quyết được các vấn đề mà Native App gặp phải mà mình đã nêu ở trên. Và rồi còn cả kết hợp với code native như Swift, Java, v.v… Tới đây mình chỉ có thể nói là “Thật là vi diệu”.
Những ưu điểm của React Native
React Native cùng với Flutter đang là xu hướng lập trình di động hiện nay bởi tính đa nền tảng cũng như tiết kiệm thời gian triển khai dự án. Sau đây là những lợi ích mà nó đem lại cho việc triển khai dự án và bạn có thể trả lời cho câu hỏi có nên dùng React Native không ?
1. Thời gian học ngắn hơn
Một lý do lập trình mobile app rất khó và tốn thời gian là vì thực tế bạn cần tìm hiểu 2 hệ sinh thái hoàn toàn khác biệt. Nếu bạn muốn lập trình app iOS, bạn phải học Swift hoặc Objective-C và Cocoa Pods.
Nếu muốn lập trình app Android, bạn cần học Java hoặc Kotlin và Android SDK. Tôi từng viết code với 3 ngôn ngữ là Swift, Objective C, Java và không thực sự hứng thú với việc tranh luận ngôn ngữ nào tốt hơn.
Tuy nhiên, điều tôi có thể nói là chúng khác nhau và việc học từng ngôn ngữ đó sẽ tốn khá nhiều thời gian. Điều tương tự cũng xảy ra với các frameworks: Cocoa Touch và Android SDK.
Tất nhiên, mỗi frameworks luôn có 1 gói các công cụ như công cụ testing, các libs, packages… và việc các dev phải cập nhật các tính năng mới nhất của mỗi hệ sinh thái là điều không thể bàn cãi.
Mặc khác, nếu bạn chọn lập trình trên React Native, phần lớn thời gian bạn sẽ chỉ cần học 1 bộ công cụ. Có rất nhiều thứ để bạn làm quen như: JavaScript, Node, React Native… nhưng chỉ có 1 công cụ duy nhất để học.
2. Khả năng tái sử dụng code
Khả năng sử dụng lại code đóng vai trò quan trọng trong lập trình phần mềm, nên mỗi khi bạn có thể sử dụng lại code thì React Native là công cụ tốt.
Tuy nhiên, sẽ luôn có vài UI code thông dụng có thể được chia sẻ chung với nhau cùng tất cả logic. Tính năng “có thể chia sẻ code” có rất nhiều lợi điểm như: tận dụng nguồn nhân lực tốt hơn, duy trì ít code hơn, ít bugs hơn, các tính năng trong cả 2 platforms cũng tương tự nhau…
3. Học 1 lần, viết ở mọi nơi
Khi team của Facebook tạo React Native, mục tiêu của họ là giúp các dev học 1 lần nhưng sử dụng được mọi platform. Bởi vì tất cả code của Android và iOS sử dụng cùng bộ công cụ, nên ý tưởng có một team dev làm app cho cả hai platform là thực hiện được – một điều ít khi xảy ra khi có rất ít dev lập trình cả hai platform iOS và Android.
Thậm chí, tôi còn cho rằng team đang lập trình web app sử dụng React.js sẽ không phải cực khổ nữa khi học lập trình React Native và bắt đầu làm mobile app.
4. Cộng đồng lớn
React Native đang trở lên rất phổ biến, nhiều developer đang đóng góp để làm React Native tốt hơn. Đặc biệt là nó được tạo ra và hỗ trợ bởi tập đoàn Facebook.
React Native Github repro là một nguồn mở và có hàng nghìn cộng tác viên hoạt động rất năng nổ.
Cộng đồng rất lớn và đang phát triển mạnh mẽ. Nhiều vấn đề đã và đang được giải quyết và bạn sẽ không cần phải tốn thời gian để nghiên cứu lại trong suốt quá trình học và làm việc với React Native.
5. Hot Reloading
Thói quen thông thường của dev khi code là test các thay đổi mỗi lần code được viết. Để thực hiện được, app cần phải được đóng gói lại và cài đặt hoặc trong 1 simulator hoặc một thiết bị thật sự.
Với React Native, phần lớn thời gian, bạn không cần phải tổng hợp lại app mỗi lần có thay đổi. Bạn chỉ cần làm mới app trong simulator, emulator hoặc thiết bị. Thậm chí còn có một tính năng là Live Reload để tự động refresh app mỗi lần phát hiện 1 thay đổi trong code.
6. Nguồn mở
React Native vẫn còn là công nghệ đang được sử dụng nhiều. Tuy vẫn còn nhiều lỗi, nhưng nhìn chung, các lập trình viên vẫn có thể sử dụng React Native vào giai đoạn production ở hầu hết các mobile app.
Ngoài ra vẫn còn vài tính năng có sẵn trong các lập trình native, chưa sử dụng được với React Native nhưng đây không phải là vấn đề lớn. Từ kinh nghiệm của bản thân, đây chỉ là chuyện đơn giản khi bạn đã quen thuộc với lập trình native.
Như bạn thấy, tôi thực sự rất lạc quan về React Native. Tôi vẫn nhớ lập trình Android và iOS native nhưng đồng thời rất hứng thú khi sử dụng React Native thời gian qua. Tôi nghĩ React Native sẽ là game – changer – kẻ thay đổi cục chơi trong lập trình mobile và khó lòng đợi được cho đến lúc nó trở thành platform không thể bỏ qua để lập trình mobile!
Những nhược điểm của React Native
React Native là một giải pháp tuyệt vời cho phát triển ứng dụng trên điện thoại di động, tuy nhiên đến thời điểm hiện tại, vẫn còn tồn tại một số khuyết điểm:
- Vẫn còn thiếu các component quan trọng nhưng dần dần cũng đang có thêm nhiều cập nhật mới kể từ bài viết này mà tôi chưa được biết.
- Không build được ứng dụng iOS trên Window và Linux: do yêu cầu từ Apple, mọi ứng dụng iOS cần được sử dụng nhiều native libs, cert…từ Xcode.
- React Native không thể build được ứng dụng “quá phức tạp” nếu bạn không biết Swift/Objecive-C, Java – tính phức tạp ở đây là ứng dụng của bạn cần phải chỉnh sửa các component. Để viết được 1 ứng dụng native bằng javascript thì “luôn luôn” có sẵn các component đã được viết từ Swift/Objective-C (iOS) và Java (Android) để bạn sử dụng. Trường hợp bạn muốn chỉnh sửa 1 component nào đó: thay đổi thành phần hoặc thêm API thì bạn phải tự viết bằng chính ngôn ngữ tương ứng của iOS hoặc Android. Nhờ cộng đồng lớn nên cũng có nhiều lập trình viên khác đã viết nhiều component cần thiết cho hầu hết ứng dụng (đây cũng là lý do vì sao Facebook biến React Native thành mã nguồn mở).
- Không dùng để viết game có tính đồ họa và cách chơi phức tạp.
- Dùng ES2015/ES6 nên đây là cấu trúc mới cho Javascript từ 2015, vì khá là mới nên những cấu trúc của nó có thể bạn chưa quen, dẫn tới việc khó khăn trong việc tiếp cận.
Lộ trình học React Native
Lộ trình này hướng dẫn cả cho người bắt đầu từ đầu. Nếu bạn đã có kinh nghiệm thì có thể kéo xuống để tiếp tục sang các phần tiếp theo.
- Kiến thức lập trình web căn bản : Kỹ thuật lập trình, Cơ sở dữ liệu, HTML, CSS, JavaScript…
- ES6 và Javascript nâng cao.
- Nodejs: Nhiều khái niệm cần biết như:
- NPM
- Các lệnh như
npm install,npm install-save-dev,npm start, …
- Các lệnh như
- Promises / Callbacks / Async Await
- React: cần biết các khái niệm:
- Components (Class với Functional)
- Kiểm soát các thành phần
- Handlers
- this.setState và this.props trong React
- Life cycle methods (Một chuỗi các sự kiện xảy ra từ khi thành phần React ra đời cho đến khi nó chết.)
- Fetch/Axios để gọi APIs
- Redux với React
- Flexbox: Flexbox rất hữu ích trong việc thiết kế giao diện người dùng và thành phần quan trọng củaLộ trình học React Native.
- Một số kiến thức khác nên biết:
- redux-thunk
- redux-saga
- LESS, SASS
- React hooks
- TypeScript
- Proptypes
- Bất kỳ cơ sở dữ liệu nào để kết nối ứng dụng của bạn, mới học thì tốt nhất là Firebase (đây là một cloud service của Google để xác thực, cơ sở dữ liệu, lưu trữ…)
Hướng dẫn cài đặt React Native
React Native hỗ trợ đa hệ điều hành bao gồm Windows, Linux, MacOS. Trong bài viết này, TinoHost sẽ hướng dẫn ạn cài đặt React Native trên hệ điều hành Linux, sử dụng thuần code JS.Bước 1:Download NodeJS và cài đặt.Bước 2:Tiến hành cài đặt React Native App bằng cú phápnpm install –g create-react-native-appBước 3:Tạo và chạy project mẫucreate-react-native-app AwesomeProJectcd AwesomeProjectnpm startBước 4:Chạy project trên điện thoại Bất kỳ thay đổi nào được thực hiện trên App.js sẽ được tự động cập nhật tương ứng trong ứng dụng. Nhờ ưu điểm này, developer có thể tiết kiệm được thời gian và tăng hiệu quả xây dựng ứng dụng.
Những câu hỏi thường gặp về React Native
Những câu hỏi thường gặp về React NativeĐiểm khác biệt của ReactJS và React Native
- Thiết lập và đóng gói (setup and bundling):Thiết lập và vận hành React Native khá nhanh chóng vì có sẵn tất cả những module cần thiết. Trong khi đó, bạn cần phải xác định các module cần thiết cho ứng dụng của mình khi dùng ReactJS.
- DOM và Styling:React Native không dùng HTML để render app mà cung cấp các component để thay thế. Component React Native sẽ map các UI iOS hoặc Android được render trên ứng dụng.
- Animations và Gestures:Thay vì CSS animation, bạn sẽ phải sử dụng JavaScript để tạo các Component động trong React Native.
- Điều hướng (Navigation):Navigator trong React Native cung cấp tất cả những gì mà bạn cần để thực hiện việc chuyển đổi giữa các Scene trong ứng dụng.
- Nền tảng code riêng (Platform specific code):React Native có khả năng phát hiện và nạp đúng code cho nền tảng được hỗ trợ
Công cụ phát triển React Native là gì?
Các nhà phát triển có thể sử dụng những công cụ hoàn toàn miễn phí như sau:
- Hot Reloading
- Chrome Dev Tools để kiểm tra yêu cầu mạng, hiển thị bản ghi giao diện và dừng mã trên các trình gỡ lỗi
- Redux DevTools để kiểm tra trạng thái của store Redux
Nguồn: Tổng hợp tham khảo
- //nordiccoder.com/blog/tong-quan-ve-react-native/
- //topdev.vn/blog/react-native/
- //wiki.tino.org/react-native-la-gi/
