Những điểm khác nhau cơ bản của ReactJs và React Native

Về cơ bản, React Native gần giống với ReactJS. Vì vậy, rất nhiều người thường nhầm lẫn giữa 2 framework và chưa nắm rõ được công dụng của từng framework. Trong bài viết này, ta sẽ tìm hiểu những điểm khác biệt cơ bản giũa ReactJS và React Native.

1. Mục đích của 2 thư viện ReactJS và React Native

ReactJS là một thư viện Javascript được tạo ra bởi Facebook, mục đích của việc tạo ra ReactJS là để tạo ra những ứng dụng website hấp dẫn với tốc độ nhanh và hiệu quả cao với những mã hóa tối thiểu. Và mục đích chủ chốt của ReactJS đó chính là mỗi website khi đã sử dụng ReactJS thì phải chạy thật mượt thật nhanh và có khả năng mở rộng cao và đơn giản thực hiện.
Còn React Native là một framework được phát triển bởi Facebook, cho phép developers làm moblie apps trên cả 2 nền tảng iOS và Android.
ReactJS và React Native có một điểm tương đồng lớn nhất đó là đều được viết trên ngôn ngữ JavaScript. Để trở thành React Native developer có trình độ, bạn phải có một số lượng kiến thức chuyên sâu về JavaScript ES6. Bởi vì ReactJS là cốt lõi của React Native, hiểu biết về cái cũ là chìa khóa cho cái mới.

2. Về ngôn ngữ HTML

Thực tế cho thấy, React Native không sử dụng ngôn ngữ lập trình HTML để hiển thị giao diện ứng dụng. Bởi khi sử dụng HTML tốc độ của React Native sẽ bị chậm lại. Thay vào đó, ứng dụng React Native lại cung cấp các Component. Gần như các phần tử Component tương đương với HTML.
Ví dụ:
<View> sẽ tương đương với <div>
<Text> sẽ là <span> và <p>
Đó cũng là lí do vì sao thư viện của ReactJS không thể nào sử dụng được trong ứng dụng React Native. Để tạo style cho các component React-Native, bạn sẽ phải tạo các stylesheets bằng Javascript. Nó trông tương tự như CSS, nhưng nó không chính xác như nhau.
Ví dụ:
const styles = StyleSheet.create({
Container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
});

3. Khởi tạo dự án mới

Khi bạn bắt đầu một dự án mới với ReactJS, có thể bạn sẽ chọn một đóng gói (bundler) như Webpack và cố gắng tìm ra những module cần thiết nào bạn cần cho dự án của bạn.
Trong khi React Native sẽ đi kèm với tất cả mọi thứ bạn cần và bạn rất có thể sẽ không cần nhiều hơn nữa chỉ với một dòng command. Bạn có thể xây dựng ứng dụng native đầu tiên bằng ES6 và một vài tính năng của ES7. Để chạy ứng dụng của bạn, bạn cần phải có Xcode (dành cho iOS, trên máy Mac) hoặc Android Studio (dành cho Android). Bạn cũng có thế sử dụng trực tiếp trên điện thoại của bạn.

4. Gestures và animations

React Native cung cấp một thư viện tương tự như Velocity.js có tên là Animated. Nó còn cung cấp LayoutAnimation, nhưng chỉ có iOS mới hỗ trợ tốt.
Để tương tác với cử chỉ của người dùng, React Native đã cung cấp PanResponder. Khi áp dụng nó vào một View, bạn có thể kích hoạt xử lý các sự kiện touch của người dùng.

5. Những điểm khác biệt còn lại

Giữa ReactJS và React Native có nhiều điểm khác biệt hơn là điểm tương đồng. Tuy nhiên, vẫn còn đó một số đặc điểm có liên quan đến cả hai.React-Native sử dụng ReactJS làm thư viện JavaScript chính. Vì vậy để xây dựng một ứng dụng đa nền tảng, bạn cần thông thạo JavaScript và kiến thức về cú pháp của React. Ngoài ra, bạn có thể sử dụng hầu hết các công cụ dành cho ReactJS trong khuôn khổ React Native. Ví dụ: Công cụ Chrome Dev để hiển thị console logs hay inspecting để kiểm tra các yêu cầu mạng hoặc Redux DevTools để kiểm tra trạng thái của Redux store.

Tổng kết

Cả ReactJS và React Native đều là những công cụ tuyệt vời để xây dựng và chuyển đổi nhanh UI phức tạp từ phiên bản cũ sang phiên bản mới. Điều này không khó cho những ai thích JavaScript. Tuy nhiên bạn cần nhớ là:

  • React Native là một framework trong khi ReactJS là một thư viện JavaScript
  • React Native không sử dụng HTML
  • ReactJS và React Native đều dựa trên component-based
  • Bạn có thể viết các native mobile components trong React Native để tạo cảm giác là ứng dụng này thực sự dành cho thiết bị di động.