ReactJS và React Native: Những điểm giống và khác nhau cơ bản

Bài viết được sự cho phép của tác giả Sơn Dương

Hiện nay có nhiều bạn mới bắt đầu học về React Native và đều có những băn khoăn về hai khái niệm: ReactJS và React Native. Hai thằng này có tên gần giống nhau, liệu có phải là cùng một lò sinh ra không? Các viết code và cơ chế hoạt động có giống nhau không?..v.v

Hôm nay, mình sẽ cùng nhau khám phá ReactJs và React Native giống và khác nhau chỗ nào nhé!

Giới thiệu React.js và React Native

React.js (hay còn được gọi là React) là một thư viện JavaScript mã nguồn mở được sử dụng rộng rãi để xây dựng các giao diện người dùng (UI) cho ứng dụng web. React.js cho phép các nhà phát triển xây dựng các thành phần giao diện người dùng có thể tái sử dụng và quản lý trạng thái ứng dụng một cách hiệu quả. Với khả năng render nhanh chóng nhờ sử dụng Virtual DOM, React.js đã trở thành lựa chọn hàng đầu cho việc phát triển các ứng dụng web hiện đại, nơi yêu cầu hiệu suất cao và khả năng mở rộng tốt.

Trong khi đó, React Native là một framework phát triển ứng dụng di động đa nền tảng, cũng được phát triển dựa trên cùng một triết lý và cú pháp của React.js. Tuy nhiên, thay vì render ra HTML như React.js, React Native render ra các thành phần giao diện native, cho phép các nhà phát triển xây dựng ứng dụng di động với hiệu suất gần như native cho cả iOS và Android. Điều này có nghĩa là bạn có thể sử dụng JavaScript để phát triển các ứng dụng di động mà không cần phải viết mã riêng biệt cho từng hệ điều hành.

Lịch sử ra đời của ReactJS và React Native

ReactJS ra đời khi nào?

ReactJS được phát triển bởi Facebook và lần đầu tiên ra mắt vào năm 2011. Lịch sử của ReactJS bắt đầu từ một vấn đề mà Facebook phải đối mặt vào thời điểm đó. Khi Facebook Ads ngày càng mở rộng và có thêm nhiều tính năng mới, các kỹ sư của Facebook nhận ra rằng việc liên tục cập nhật và thay đổi UI đã làm chậm tiến trình phát triển. Các thay đổi và cập nhật theo từng tầng nội dung buộc các nhà phát triển phải thiết kế lại toàn bộ ứng dụng, dẫn đến việc tiến độ phát triển bị trì hoãn.

Trong bối cảnh đó, một kỹ sư của Facebook là Jordan Walke đã tìm ra giải pháp bằng cách sử dụng XHP (một thư viện component HTML cho PHP) để tạo ra một nguyên mẫu đầu tiên của ReactJS, được gọi là FaxJS. Năm 2011, ReactJS chính thức được sử dụng để phát triển timeline của Facebook, đánh dấu một bước nhảy vọt quan trọng trong việc cải tiến UI và quản lý các cập nhật trên ứng dụng web.

Năm 2012, khi Facebook mua lại Instagram, ReactJS cũng được sử dụng để phát triển timeline của Instagram. Điều này cho thấy tiềm năng to lớn của ReactJS trong việc cải thiện trải nghiệm người dùng và tốc độ phát triển ứng dụng.

Lịch sử ra đời React Native

Cùng với sự thành công của ReactJS, vào năm 2012, Mark Zuckerberg, CEO của Facebook, đã phát biểu: “Sai lầm lớn nhất mà chúng tôi mắc phải với tư cách là một công ty là đặt cược quá nhiều vào HTML thay vì native“. Phát biểu này phản ánh sự hạn chế của các ứng dụng dựa trên HTML5 trong việc cung cấp trải nghiệm người dùng mượt mà và hiệu suất cao như các ứng dụng native.

Từ nhận thức đó, nhu cầu phát triển một framework mới để xây dựng các ứng dụng di động với hiệu suất native nhưng vẫn giữ được tính linh hoạt của JavaScript đã trở thành một lẽ tất yếu. Và đó là cách mà React Native ra đời.

Với sự ra đời của React Native, các lập trình viên giờ đây có thể xây dựng các ứng dụng di động hiệu suất cao mà không cần phải viết hai mã nguồn riêng biệt cho iOS và Android, giúp tiết kiệm thời gian và công sức.

ReactJS và React Native hoạt động như thế nào?

Cả ReactJS và React Native đều mang đến những cách tiếp cận khác nhau để phát triển ứng dụng, mặc dù chúng chia sẻ chung một nền tảng là React. Tuy nhiên, cơ chế hoạt động đằng sau mỗi công nghệ này là khá khác biệt, phù hợp với các mục đích sử dụng cụ thể của chúng.

ReactJS: Sử dụng Virtual DOM

ReactJS sử dụng Virtual DOM để tạo ra trải nghiệm người dùng (UX) tuyệt vời. DOM (Document Object Model) là một giao diện lập trình cần thiết, đại diện cho một tài liệu web và nội dung của nó. Khả năng của các thư viện và framework trong việc quản lý DOM có tác động lớn đến cách chúng được sử dụng và hiển thị cuối cùng.

Virtual DOM là một cải tiến đáng kể của ReactJS. Đây là một đại diện ảo của DOM thực. Khi một trạng thái của ứng dụng thay đổi, Virtual DOM tạo ra một bản sao ảo của DOM thực, sau đó so sánh với DOM hiện tại để tìm ra những thay đổi. Thay vì cập nhật toàn bộ DOM, chỉ các phần bị thay đổi mới được cập nhật. Điều này giúp tăng tốc độ xử lý, cải thiện hiệu suất và mang đến trải nghiệm người dùng tốt hơn so với việc cập nhật trực tiếp trên DOM thực.

Ví dụ:

function tick() {
  const element = (
    <div>
      <p>Hello World</p>
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));
}

setInterval(tick, 1000);

Giải thích:

• tick() là một hàm tạo ra một phần tử React với nội dung “Hello World”.
• ReactDOM.render() dùng để render phần tử này vào trong DOM thực tại vị trí có ID là 'root'.
• setInterval(tick, 1000) sẽ gọi hàm tick() mỗi giây một lần, giúp cập nhật nội dung “Hello World” liên tục.

React Native: Sử dụng Native APIs

Trong khi đó, React Native hoạt động dựa trên các Native APIs để render các thành phần giao diện người dùng. React Native sử dụng Java APIs để render các thành phần trên Android, và Objective-C để viết các thành phần iOS. Nhờ vào việc này, React Native có thể tận dụng các giao diện native, đảm bảo hiệu suất gần như ứng dụng native cho cả hai nền tảng iOS và Android.

Phần còn lại của mã ứng dụng được viết bằng JavaScript, cho phép tùy chỉnh và chia sẻ mã giữa các nền tảng, tối ưu hóa khả năng tái sử dụng thành phần và chia sẻ mã. Điều này giúp giảm đáng kể thời gian và công sức phát triển khi xây dựng các ứng dụng đa nền tảng.

Một điểm khác biệt quan trọng là React Native không sử dụng CSS và HTML như ReactJS. Thay vào đó, các nhà phát triển phải tạo style sheets trong JavaScript để định kiểu cho các thành phần của React Native. Mặc dù cú pháp của các style sheets này có thể trông giống như CSS, nhưng chúng thực chất không hoàn toàn giống nhau. Thêm vào đó, các thẻ HTML thông thường như <div> trong ReactJS được thay thế bằng <view> trong React Native, và <p> trong ReactJS được thay thế bằng <text> trong React Native.

Ví dụ viết một ứng dụng đơn giản với React Native để hiển thị nội dung “Hello World”:

import React, { Component } from 'react';
import { Text, View } from 'react-native';

export default class HelloWorldApp extends Component {
  render() {
    return (
      <View>
        <Text>Hello World</Text>
      </View>
    );
  }
}

Giải thích:

• import React, { Component } from 'react'; và import { Text, View } from 'react-native';: Import các thư viện cần thiết.
• HelloWorldApp là một class component kế thừa từ Component.
• render() trả về các thành phần UI: View và Text. View tương tự như div trong HTML và Text tương tự như p trong HTML.
• Ứng dụng sẽ hiển thị “Hello World” dưới dạng text trên màn hình thiết bị di động.

Tuyển dụng React Native lương cao!

4 điểm khác nhau lớn nhất giữa ReactJS và React Native

Sứ mệnh của hai thư viện ReactJs và React Native

ReactJS là một thư viện Javascript được tạo bởi Facebook nhằm giải quyết các vấn đề performance và khả năng tương thích cho các ứng dụng web. Tức là ReactJs là một thư viện front-end dành cho các ứng dụng web.

ReactJS ra đời vào năm 2011, nó đã mang đến một triển vọng mới về rendering pages điều sẽ tạo ra sự linh động và trải nghiệm responsive.

Còn React Native thì sao?

React Native là một framework dùng để phát triển các ứng dụng cho mobile (Cụ thể là Android và IOS). được phát hành sau ReactJS 4 năm, sau khi ReactJS đã tràn ngập khắp giới lập trình web.

ReactJS và React Native chỉ có một điểm tương đồng, còn lại là khác nhau hoàn toàn.

Đó chính là 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.

Tạo một dự án mới

Với ReactJS, developer cần phải lựa chọn các module tốt nhất và cần thiết nhất trước khi bắt đầu một dự án.

Trong khi React Native cung cấp mọi thứ cần thiết. Bạn có thể viết ngay một ứng dụng bằng React Native chỉ với một dòng command. Điều này làm cho người mới chuyển sang học React Native đỡ khó khăn rất nhiều.

HTML – điểm khác biệt lớn

React Native không sử dụng HTML để hiển thị giao diện ứng dụng(lý do đơn giản là nếu sử dụng HTML thì React Native có khác gì tạo web app rồi nhúng vào webview không? tốc độ sẽ lại chậm như rùa ^_^)

Thay vào đó, React Native cung cấp các component hoạt động cũng tương tự, và hầu hết chúng có thể được biến đổi thành các phần tử tương đương trong HTML

Ví dụ:

<View>  tương đương với <div>
<Text> biến thành <span> và <p>.

Do đó, các thư viện được sử dụng với ReactJS không thể sử dụng trong React Native. React Native không sử dụng thẻ CSS hoặc sử dụng chúng theo cách khác, tương tự như Flexbox.

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

Xem thêm các việc làm ReactJS hấp dẫn tại TopDev

So sánh ưu nhược điểm của React và React Native

Dưới đây là bảng so sánh về ưu và nhược điểm của ReactJS và React Native:

Ưu nhược điểm của React

Ưu nhược điểm của React Native

Tóm lại

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.

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.

Bạn đã phân biệt được ReactJS và React Native chưa? Hãy cho mình biết ý kiến của bạn về hai “anh em cùng cha này ” nhé? 

Bài viết do đội ngũ TopDev biên soạn và tham khảo từ vntalking.com

Đừng bỏ lỡ việc làm IT mới nhất trên TopDev!

Xem thêm:

• React Native hay Ionic: Đâu là lựa chọn tốt nhất để startup?
• Flutter chiến với React Native ai ngon hơn?
• Flutter, React Native hay Xamarin?