React Native Và Reactjs | Reactjs Là Gì?

Các ứng dụng được xây dựng dựa trên React Native

Facebook là một trong những ứng dụng React Native phổ biến nhất. Đây là ứng dụng đã khai sinh ra và là động lực chính cho sự phát triển của ngôn ngữ lập trình này.

Facebook nhằm mục đích mang lại tất cả các lợi ích phát triển web cho mobile. Công ty đã sử dụng RN để phát triển ứng dụng Ads Manager app (Trình quản lý quảng cáo) trong iOS và Android. Cả hai phiên bản này đều được tạo ra từ cùng một nhóm phát triển.

Skype

Skype là một ví dụ điển hình khác về ứng dụng React Native dành cho mobile. Vào năm 2017, Skype thông báo rằng họ đang xây dựng một ứng dụng hoàn toàn mới dựa trên React Native. Điều này mang lại cho người dùng rất nhiều sự phấn khích, vì phiên bản cũ đang gặp phải rất nhiều vấn đề.

Ứng dụng mới được thiết kế lại hoàn toàn từ các icon đến giao diện nhắn tin mới, hiện có ba phần trò chuyện: find, chat và capture. Công ty sở hữu Skype Microsoft cũng đã quyết định sử dụng React Native không chỉ trên mobile mà còn trong phiên bản desktop. Nếu bạn chưa biết cách chèn Skype vào web hãy tham khảo thông tin từ Vietnix.

Walmart

Walmart là ứng dụng được phát triển cả trên hai nền tảng iOS và Android của Walmart. Một số người bán thực phẩm ở Mỹ đã có quyết định viết lại hoàn toàn các ứng dụng dành cho mobile của mình thành React Native.

Trước đây, một số phần của ứng dụng Walmart có các chế độ xem web nhúng. Sau khi chuyển sang React Native, hiệu suất của cả ứng dụng iOS và Android đã được cải thiện đáng kể.

Ngoài ra, Walmart còn một số lợi ích như:

• Thời gian tiếp thị ngắn.
• Cả hai nền tảng đều được cập nhật trong cùng một ngày.
• Dễ dàng tham gia các team khác vì được viết bằng JavaScript
• Có giao diện người dùng dành riêng cho các ứng dụng iOS và Android, mang lại trải nghiệm tốt hơn.

SoundCloud Pulse

SoundCloud là ứng dụng dành cho những người sáng tạo âm nhạc, quyết định chuyển sang React Native để phát triển SoundCloud Pulse.

Ban đầu họ dự định phát triển hai ứng dụng gốc riêng biệt ( bắt đầu với iOS trước). Tuy nhiên, họ cũng lo lắng rằng việc phát triển hai ứng dụng riêng biệt sẽ không thể đồng bộ hóa các bản phát hành cho iOS và Android.

Do đó, họ quyết định sử dụng React Native để thử nghiệm và phát triển một nguyên mẫu dịch vụ bằng cách sử dụng framework đa nền tảng trên ứng dụng mobile. Các kỹ sư của SoundCloud đã rất ngạc nhiên trước sự thành công ngoài mong đợi này. Họ cũng thấy dễ dàng kết nối các thư viện gốc hiện có với React Native. Do đó, SoundCloud đã quyết định sử dụng framework này cho ứng dụng sắp ra mắt của mình.

React Native giúp các ứng dụng của SoundCloud có tốc độ cao, khả năng tiếp cận tốt hơn, tiết kiệm chi phí và một cộng đồng open-source phát triển mạnh.

Shine

Shine là một ví dụ tuyệt vời khác về ứng dụng React Native, giúp người dùng đối phó với căng thẳng hàng ngày thông qua thiền định, các bài báo truyền cảm hứng,…

Khi những người sáng tạo của Shine lần đầu tiên quyết định biến ý tưởng của họ thành một ứng dụng và đưa nó đến thị trường Hoa Kỳ. Họ đã đặt cược vào iOS, tuy nhiên vẫn lên kế hoạch đưa Shine đến với người dùng Android nếu ứng dụng iOS của họ trở nên phổ biến. Đó là lúc React Native phát huy tác dụng.

Shine ra mắt lần đầu trên App Store vào cuối năm 2017 và được Apple vinh danh là một trong những ứng dụng tốt nhất năm 2018.

UberEats

UberEats cũng là một ứng dụng hoạt động dựa trên sự phát triển của React Native. UberEats có ba dịch vụ là nhà hàng, giao hàng và ăn uống.

Điều này đòi hỏi phải xây dựng một dashboard (bảng điều khiển) đặc biệt để giải thích cho các nhà hàng. Trang tổng quan đầu tiên được xây dựng riêng cho trang web. Tuy nhiên, trang này đã hạn chế khả năng truyền đạt thông tin quan trọng của các nhà hàng. Trang này cũng không cung cấp quyền truy cập vào các tính năng của thiết bị gốc như thông báo bằng âm thanh, điều này cũng gây ra những trải nghiệm xấu cho người dùng.

Các nhà phát triển của UberEats đã có rất nhiều kiến thức về lập trình trong React, vì thế họ quyết định sử dụng React Native trong mô hình phát triển của mình.

Các kỹ sư của Pinterest đã quan tâm đến khả năng của React Native kể từ khi framework nay ra mắt vào năm 2015.

Vào thời điểm đó, họ đã cung cấp cho người dùng một ứng dụng web được cung cấp bởi Gestalt. Cả Gestalt và React Native đều dựa trên React, nên các kỹ sư của Pinterest kỳ vọng rằng quá trình phát triển sẽ không quá phức tạp và gian khổ. Pinterest chưa bao giờ có ý định thay thế hoàn toàn các ứng dụng Gestalt của mình bằng React Native, nhưng họ muốn kiểm tra xem React Native có thể được tích hợp trơn tru vào các kỹ thuật công nghệ hiện tại của họ không.

Để kiểm tra khả năng của React Native, họ đã quyết định xây dựng một nguyên mẫu của một tính năng tích hợp quan trọng – Topic Picker. Sau quá trình thử nghiệm, Pinterest đã quyết định đưa React Nation vào sử dụng.

Một số khái niệm liên quan về React Native

Native App

Native App là tên gọi của những ứng dụng được xây dựng và phát triển bằng những công cụ do chính nhà phát triển cung cấp cho lập trình viên. Hai nhà phát triển App hàng đầu là Android và iOs.

Hybrid App

Hybrid App là sự kết hợp giữa ứng dụng Web và ứng dụng mobile. Người dùng có thể cài đặt lên điện thoại của mình giống như những ứng dụng Native bình thường, vừa có thể tìm thấy ở những kho ứng dụng trả phí.

React.js là gì?

Về mặt kỹ thuật, ReactJS là một thư viện JavaScript mặt trước, mã nguồn mở để xây dựng giao diện người dùng hoặc các thành phần giao diện người dùng. Nói một cách đơn giản, điều này có nghĩa là bạn có thể sử dụng React để xây dựng tất cả các phần của trang web mà người dùng có thể xem và tương tác trên cửa sổ trình duyệt của họ.

Vậy sự khác biệt giữa việc sử dụng JavaScript đơn giản và React là gì? Chà, React làm cho quá trình thiết kế giao diện người dùng dễ dàng hơn nhiều. Nó cho phép bạn tạo các yếu tố mà bạn có thể dễ dàng sử dụng lại trong các phần khác của trang web hoặc ứng dụng.

Với JavaScript, trước đây tôi đã đề cập đến việc bạn sẽ cần viết cùng một đoạn mã hai lần để tạo cùng một nút với các màu khác nhau, điều này có thể dẫn đến sự phức tạp trong các dự án lớn.

Kiến trúc thành phần của React giải quyết vấn đề này một cách xuất sắc. Với React, bạn xác định một phần duy nhất của giao diện người dùng, chẳng hạn như một nút, dưới dạng một thành phần.


const Button (props) => { return (

Submit

) }


Thành phần trong trường hợp này là một hàm trả về cú pháp giống như HTML được gọi là JSX, xác định cách trình bày và giao diện của thành phần trên trình duyệt web.

Bây giờ, giả sử bạn muốn sử dụng cùng một nút (nhưng có các màu khác nhau) ở nhiều nơi trên trang web của mình. Thay vì tạo từng nút từ đầu với các thuộc tính màu khác nhau (như bạn làm với JavaScript), với React, bạn chỉ cần sử dụng cùng một Thành phần trong trường hợp này là một hàm trả về cú pháp giống như HTML được gọi là JSX, xác định cách trình bày và giao diện của thành phần trên trình duyệt web.

Bây giờ, giả sử bạn muốn sử dụng cùng một nút (nhưng có các màu khác nhau) ở nhiều nơi trên trang web của mình. Thay vì tạo từng nút từ đầu với các thuộc tính màu khác nhau (như bạn làm với JavaScript), với React, bạn chỉ cần sử dụng cùng một phần tử


và chuyển một màu khác nhau cho mỗi nút dưới dạng props, tạo các biến thể của cùng một nút X và chuyển một màu khác nhau cho mỗi nút dưới dạng

props

, tạo các biến thể của cùng một nút.



Phương pháp này giữ cho mọi thứ đơn giản và có tổ chức, đó là toàn bộ bản chất của thư viện React.js.

Một lợi ích khác của việc sử dụng React để phát triển giao diện người dùng là tách biệt các mối quan tâm. Điều này có nghĩa là dữ liệu được sử dụng trong một thành phần tồn tại tách biệt với logic, tồn tại tách biệt với lớp xem.

Đây là một ví dụ:


const Button (props) => { // component data const [btnText, setBtnText] = useState("Submit") // component logic function onClick() { setBtnText("Submitted!") } return ( // component view

{btnText}

) }


Như bạn có thể thấy ở đây, trạng thái, logic và cách trình bày của một thành phần đều tách biệt với nhau, làm cho các thành phần React UI dễ hiểu và dễ soạn thảo hơn.

Tóm lại, React là một thư viện JavaScript được thiết kế để đơn giản hóa quy trình xây dựng giao diện người dùng của các ứng dụng web.

Cách trang web được hiển thị: HTML, CSS và JavaScript

Khi bạn nhập URL của một trang web vào thanh địa chỉ của trình duyệt và nhấp vào enter, trình duyệt sẽ yêu cầu trang web đó và máy chủ web sẽ gửi một tệp HTML tới trình duyệt.

Tệp HTML chứa nội dung của trang web và các tệp được liên kết như hình ảnh, video và stylesheets. Trình duyệt web phân tích cú pháp tệp HTML và xây dựng Mô hình đối tượng tài liệu (DOM) là cấu trúc dạng cây chứa các thành phần của trang (ví dụ: nút, đoạn văn, liên kết, v.v.).

Trình duyệt bắt đầu yêu cầu các tệp được liên kết và tải chúng xuống máy tính. Sau đó, nó phân tích cú pháp các tệp được liên kết, chẳng hạn như CSS và JavaScript, đồng thời áp dụng kiểu dáng cho nội dung, làm cho nội dung dễ nhìn hơn đối với người dùng. Sau khi tất cả các tệp được tải xuống, trình duyệt sẽ hiển thị nội dung trên màn hình.

Trình duyệt cũng chạy bất kỳ mã JavaScript nào để làm cho trang tương tác. Vì vậy, ví dụ: nếu người dùng điền sai thông tin vào một biểu mẫu, JavaScript có thể được sử dụng để chèn một phần tử

Tuy nhiên, một trong những vấn đề lớn nhất của việc chèn các phần tử vào DOM bằng JavaScript là mã không thể tái sử dụng. Ví dụ: nếu bạn muốn chèn cùng một nút vào trang nhưng với các màu nền khác nhau, bạn phải tạo phần tử hai lần trong JavaScript:


let blueBtn = document.createElement("button").style.backgroundColor("blue") let redBtn = document.createElement("button").style.backgroundColor("red") // Insert blue and red button into the page


Đây chỉ là một ví dụ đơn giản. Với giao diện người dùng phức tạp, bạn có thể tưởng tượng mọi thứ có thể trở nên dài và khó hiểu như thế nào. React được phát triển để giải quyết vấn đề này bằng cách làm cho quá trình tạo ứng dụng web trở nên có tổ chức và trực quan hơn nhiều.

Phần kết luận

Bài viết này khám phá sự khác biệt giữa React DOM và React Native, hai công cụ JavaScript phổ biến. React DOM chủ yếu được sử dụng để phát triển web, trong khi React Native được sử dụng để phát triển di động.

React DOM sử dụng HTML, CSS và JavaScript để bố trí và tạo kiểu, đồng thời cho phép nhà phát triển tạo giao diện người dùng tương tác. Mặt khác, React Native sử dụng các API và thành phần giao diện người dùng gốc để tạo các ứng dụng di động đa nền tảng.

Cảm ơn vì đã đọc.

Những điểm khác biệt chính giữa ReactJS và React-Native là gì?

Bài đăng này đã không được cập nhật trong 2 năm

React native đã ra đời khoảng 3 năm, và trở thành một framework thực sự thú vị vì nó có thể được sử dụng cho Android và còn có thể xây dựng các ứng dụng di động đa nền tảng. Một số người đóng góp cũng framework tùy chỉnh để xây dựng ứng dụng dành cho máy tính để bàn cho Mac và Windows, khá hay ho. React native khá giống với ReactJS theo cùng một cách, nhưng có những khác biệt bạn cần biết trước khi bạn bắt đầu ứng dụng native đầu tiên của mình. Trong bài này, tôi sẽ tìm hiểu những khác biệt chính mà tôi gặp phải khi phát triển web ReactJS, những người đã học sử dụng React-Native và đã xây dựng một vài ứng dụng native với công nghệ này.

1 . Thiết lập và đóng gói (setup and bundling)

React native là một framwork, nơi ReactJS là một thư viện javascript bạn có thể sử dụng cho trang web của mình. 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. React-Native đ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. Khi bạn bắt đầu một dự án mới, bạn sẽ nhận thấy nó dễ dàng như thế nào để thiết lập: nó rất nhanh và chỉ có bạn một dòng lệnh để chạy trong terminal và bạn sẽ sẵn sàng để chạy code. Bạn có thể bắt đầu mã hóa ứng dụng native đầu tiên của bạn ngay lập tức bằng cách sử dụng ES6, một số tính năng ES7 và thậm chí một vài polyfills. Để 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) được cài đặt trên máy tính của bạn. Bạn có thể quyết định chạy nó trên mô phỏng / trình mô phỏng của nền tảng mà bạn muốn sử dụng hoặc trực tiếp trên các thiết bị của riêng bạn.

2 .DOM and Styling

React-native không sử dụng HTML để render app nhưng cung cấp các component thay thế hoạt động theo cách tương tự. Các component react-native sẽmap các component UI iOS hoặc Android thực hữu dụng thực sự được render trên ứng dụng. Hầu hết các component được cung cấp có thể được biên dịch sang một thứ tương tự trong HTML, ví dụ như một thành phần View tương tự như thẻ div, và một thành phần Text tương tự như thẻ


import React, { Component } from 'react'; import { View, Text } from 'react-native'; export default class App extends Component { render() { return (


Hello world!


); } }


Bởi vì mã của bạn không hiển thị trong một trang HTML, điều này cũng có nghĩa là bạn sẽ không thể sử dụng lại bất kỳ thư viện nào trước đây bạn đã sử dụng với ReactJS để hiển thị bất kỳ loại HTML, SVG hoặc Canvas nào. Mặc dù bạn có thể tìm thấy các thư viện thay thế cho React-Native, react.parts có một category Native cho bạn để tìm thấy những gì bạn cần. Để 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. Điều này có thể khá khó hiểu lúc đầu, và bạn có thể đạt được một điểm mà bạn tự hỏi làm thế nào bạn có thể tạo mixins như bạn sẽ làm với SASS, hoặc làm thế nào bạn có thể ghi đè lên style của một component mà bạn muốn tái sử dụng. Sau đó, bạn hiểu React-Native không được tạo ra từ các phần tử web và không thể được tạo kiểu theo cùng một cách. May thay, bạn rất có thể sẽ tìm thấy các giải pháp thay thế có sẵn để hoàn thành những gì bạn cần.


const styles = StyleSheet.create({ container: { flex: 1, }, content: { backgroundColor: '#fff', padding: 30, }, button: { alignSelf: 'center', marginTop: 20, width: 100, }, });


Animations and Gestures

Tạm biệt CSS animations! Với React-Native, bạn sẽ phải tìm hiểu một cách hoàn toàn mới để làm động các component khác nhau của ứng dụng bằng Javascript. Cách được đề xuất để làm chuyển động một component là sử dụng API animated do React-Native cung cấp. Bạn có thể so sánh nó với thư viện Javascript nổi tiếng Velocity.js. Nó cho phép tạo ra các loại hình chuyển động khác nhau, hẹn giờ hoặc dựa trên vận tốc liên quan đến một cử chỉ, và có thể được sử dụng với các loại Easing khác nhau. Nói chung bạn có thể thực hiện khá nhiều bất kỳ loại chuyển động nào bạn sẽ làm trên web. React -Native cũng cung cấp LayoutAnimation mà thực sự rất hay và đơn giản để sử dụng cho quá trình transitions.
Để tương tác với cử chỉ của người dùng, React-Native cung cấp một thứ tương tự như các sự kiện liên quan đến Javascript web API gọi là PanResponder. Bắt đầu và chạy có thể cảm thấy khá khó, nhưng bạn sẽ thấy cuối cùng nó không phức tạp.
PanResponder cần phải được áp dụng cho một view (hoặc Văn bản hoặc Hình ảnh) của component để cho phép trình xử lý cảm ứng trên view. Từ đó, PanResponder cung cấp danh sách các chức năng bạn có thể sử dụng để bắt các sự kiện chạm khác nhau, chẳng hạn như onPanResponderGrant (touchstart), onPanResponderMove (touchmove) hoặc onPanResponderRelease (touchend). Các chức năng này sẽ cho phép bạn truy cập vào các sự kiện bản địa và trạng thái cử chỉ với thông tin như tất cả các chạm và vị trí của chúng cũng như khoảng cách tích lũy, vận tốc và nguồn gốc chạm.

Theo tôi, khó khăn chính với PanResponder là khi bạn có các view / component lồng nhau với PanResponder của riêng , và bạn cần phải quyết định cái nào cần được kiểm soát cử chỉ. Để tìm hiểu thêm về Animated và PanResponder, bài viết này có thể rất hữu ích: React-native Animated API với PanResponder

Điều hướng (Navigation)

Khi bắt đầu xây dựng ứng dụng di động đầu tiên của mình với react-native, tôi đã tự hỏi làm cách nào để điều hướng giữa 2 view. Điều đầu tiên mà tôi đã làm là tìm kiếm một giải pháp thay thế cho react-router, thư viện nổi tiếng này mà hầu hết các ứng dụng web React sử dụng để chuyển đổi giữa các trang. Tôi tìm thấy một vài thư viện làm các công việc tương tự, nhưng luôn có cái gì đó tôi không thích về những cái tôi đã thử: hoặc nó khá phức tạp để sử dụng, tôi không hài lòng với các hành động, không thể tùy chỉnh theo cách tôi muốn, hoặc không hành xử hoặc hoạt động tốt trên cả hai thiết bị Android và iOS. Sau đó, tôi bắt đầu tự hỏi làm thế nào menu hoạt động tốt, và tôi tìm thấy component Navigator cung cấp bởi React-Native.

Hầu hết các ứng dụng dành cho thiết bị di động không có nhiều cảnh diễn ra theo mọi hướng như làm một ứng dụng web, thành phần Navigator mặc dù có vẻ hơi phức tạp khi sử dụng lúc đầu sẽ cung cấp cho bạn mọi thứ bạn cần để quản lý sự chuyển tiếp giữa các cảnh. Trừ khi bạn xây dựng một ứng dụng trên thiết bị di động rất lớn và đòi hỏi rất nhiều cảnh khác nhau và bạn sợ mất thời điểm nào đó, tôi nghĩ bạn nên gắn bó với Navigator.

Nền tảng code riêng (Platform specific code)

Thiết kế một ứng dụng cho nhiều nền tảng với cùng một bộ mã đôi khó khi trở nên nặng nề và code của bạn sẽ sớm bắt đầu trở nên xấu. Tôi chắc chắn rằng bạn đã gặp phải các vấn đề tương tự trong khi viết mã cho các trình duyệt hiện đại và sự cần thiết để mọi thứ trông “không quá tệ” trên các trình duyệt cũ hơn, thêm một vài mã điều kiện ở đây và ở đó trong CSS của bạn hoặc thậm chí trong Javascript . Khi bạn tạo một ứng dụng native, điều quan trọng là phải biết giao diện người dùng và trải nghiệm cho iOS và Android có thể cần phải khác. Bài viết này giải thích rất rõ: Thiết kế cho cả Android và iOS. Trên giả định bạn có quyền kiểm soát ứng dụng của bạn sẽ như thế nào và hành vi ra sao :

• Bạn có thể xác định thiết kế tổng quát cho ứng dụng của mình để trông giống hệt nhau cho cả hai nền tảng miễn là nó vẫn trực quan và không gây nhầm lẫn cho người dùng nền tảng.
• Bạn có thể định nghĩa bộ mã cho mỗi nền tảng, có nghĩa là bạn sẽ có một DOM, bảng định kiểu khác nhau và thậm chí có thể là các logic và animate khác nhau để thực hiện theo hướng dẫn UI và UX của nền tảng này. Nếu bạn quyết định với điểm thứ hai, React-Native có thể phát hiện nền tảng nào bạn đang chạy code và nạp đúng code cho nền tảng bên đó . Tôi khuyên bạn nên có các logic chính của các component của bạn được xác định trong một tập tin gọi là index.js, sau đó bạn sẽ có các component presentational được xác các component riêng . Đối với iOS và Android, bạn sẽ có các tệp index.ios.js và index.android.js tương ứng. Nếu bạn tổ chức cấu trúc thư mục theo đề nghị của mình, nó sẽ giống như sau:


/src /components /Button /components /Icon /index.android.js /index.ios.js /Content /index.android.js /index.ios.js /index.js


Công cụ phát triển

Khi bạn bắt đầu một dự án react native mới, bạn sẽ sử dụng một vài công cụ dành cho developer tool của React mà không cần cài đặt bất kỳ thứ gì, và điều đó thật tuyệt vời. Hot Reloading có sẵn và rất tuyệt khi sử dụng khi bạn cần thực hiện những thay đổi nhỏ cho style ứng dụng của mình. Đối với những thay đổi lớn hơn ảnh hưởng đến logic của ứng dụng, mình thường thích sử dụng Tải lại tức thì (live reload) sẽ tải lại ứng dụng của bạn hoàn toàn khi bạn thực hiện thay đổi trong code.

Chrome Dev Tools hoạt động tốt để kiểm tra các yêu cầu mạng (mặc dù bạn cần thêm một mẹo nhỏ để xem các yêu cầu), hiển thị các bản ghi giao diện điều khiển và dừng mã trên các trình gỡ lỗi. Bạn thậm chí có thể sử dụng Redux DevTools để kiểm tra trạng thái của store Redux. Một tính năng mà tôi nhớ nhất mặc dù là khả năng kiểm tra DOM như bạn sẽ làm trên web.

Publishing

Nếu bạn phát triển một ứng dụng cho cả iOS và Android, bạn sẽ cần phải tìm hiểu cách Xcode và Android Studio hoạt động để đảm bảo mọi thứ được thiết lập đúng cách trước khi triển khai ứng dụng đầu tiên trên App Store hoặc Google Play. Đối với iOS, nó hoạt động giống như bạn sẽ triển khai một ứng dụng native thông thường, mặc dù đối với Android, bạn cần thực hiện theo Khuyến nghị phản ứng để đăng nhập APK của bạn trước khi tải nó lên Google Play. nguồn : https://medium.com/@alexmngn/from-reactjs-to-react-native-what-are-the-main-differences-between-both-d6e8e88ebf24

All rights reserved

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é!

Nguyên tắc hoạt động của React Native

Nguyên tắc hoạt động của React Native là gì? Về nguyên tắc hoạt động thì nó gần như giống với React trừ việc React Native hiện tại không thao tác cùng với DOM qua DOM ảo. Nó đang chạy 1 quá trình xử lý nền (Được phiên dịch JavaScript và viết bởi những nhà phát triển) trực tiếp ngay trên thiết bị đầu cuối cũng như giao tiếp cùng với nền tảng góp phần qua một cầu trung gian, theo đợt và bất đồng bộ.

Những thành phần React sẽ bao bọc mã gốc cũng như tương tác cùng với API gốc thông qua mô hình Javascript và UI khai báo của React. Chính điều này đã giúp cho quá trình phát triển ứng dụng dành cho nhiều nền tảng trở nên nhanh hơn. Hiện tại React Native sẽ không dùng HTML mà thay vào đó sẽ sử dụng những thành phần khác nhờ vào luồng Javascript.

ReactJS vs React Native – Những hạn chế và nhược điểm

Cả hai Reactjs và React Native vẫn có một số hạn chế và nhược điểm trong việc phát triển các ứng dụng và trang web. Trước khi bắt đầu làm việc với hai công nghệ này, các developer phải hiểu rõ những hạn chế đó để chuẩn bị kế hoạch khắc phục.

Nhược điểm của ReactJS

Chi phí và thời gian có thể bị vượt mức: Thông thường, việc tải xuống một thư viện react khác trở nên cần thiết, điều này làm tăng chi phí và thời gian. Ví dụ: nếu nhà phát triển đang sử dụng Carbon framework cho trải nghiệm UI, thì việc tải các Carbon component với react là điều quan trọng.

Đường cong học tập: Đối với một developer mới, việc học Reactjs có thể mất nhiều thời gian hơn so với React Native. Điều đó có nghĩa là đường cong học tập cho Reactjs nhiều hơn và đây có thể là một vấn đề đối với các developer mới đang cố gắng xây dựng một ứng dụng bằng Reactjs.

Hỗ trợ thư viện bên ngoài: Mặc dù Reactjs hỗ trợ rất nhiều thư viện bên ngoài của bên thứ ba, nhưng có rất ít thư viện native dành cho Reactjs. Giờ đây, các thư viện bên ngoài có thể giúp nhà phát triển sử dụng cả các chức năng HTML và CSS và xây dựng nó thành JSX, vốn có độ phức tạp và đường cong học tập dốc.

Hệ thống phân cấp dữ liệu dài: navigation dữ liệu trong Reactjs rất phức tạp. Ví dụ: Reactjs không hỗ trợ xử lý dữ liệu song song, không giống như các công cụ JS Scripting khác. Để navigate từ Div này sang Div khác trong Reactjs, trước tiên người dùng sẽ cần navigate đến parent node, sau đó đến parent node trên cùng và sau đó navigate đến phân cấp thứ hai của tree node.

Hạn chế của React Native

Thiếu thư viện native: Trong trường hợp ứng dụng có nhiều chức năng, thì React Native có thể làm chậm quá trình phát triển vì lý do thiếu các thư viện native và phụ thuộc quá nhiều vào thư viện bên thứ ba. Khi một người cần thực hiện các phép tính phức tạp cùng một lúc, Swift, Objective-C và Java được nhận xét là có tốc độ cao hơn, so với JavaScript, vì JavaScript có các chi phí chung trong việc kiểm soát các element native.

Abstraction layer được tổ chức không chặt chẽ: React Native là một framework được tổ chức không chặt chẽ, trong đó các lập trình viên có thể lấy các thẻ như HTML, stylesheets như CSS và code từ Javascript. Đây có vẻ là một khía cạnh tích cực, vì nó cung cấp nhiều tự do hơn cho các developer, nhưng đồng thời, nó cũng đặt ra những thách thức.

Ví dụ: không giống như các ngôn ngữ Swift và Java, nó không thực thi bất kỳ tham số hoặc quy tắc nào và thực tế mà nói, tại bất kỳ thời điểm nào, một biến có thể là bất kỳ thứ gì theo nghĩa đen. Điều này có thể gây ra xung đột về logic, điều này khó có thể xảy ra với Swift hoặc Java.

Mất nhiều thời gian hơn để khởi tạo: Vấn đề với React Native là mất nhiều thời gian hơn để khởi tạo runtime cho các tiện ích và thiết bị. Vấn đề này chủ yếu là do chuỗi JavaScript cần thời gian để khởi tạo.

Yêu cầu nhiều cách giải quyết native: Nếu không tìm thấy chức năng cụ thể nào trong React Native, thì các developer có hai lựa chọn: Viết các native modules trong Swift/Objective-C và Java hoặc yêu cầu bất kỳ native developer nào viết một cái mới. Nói một cách dễ hiểu, React Native làm tăng chi phí cả về chi phí và thời gian.

Các vấn đề về Giấy phép & Bằng sáng chế: Các vấn đề về Giấy phép và Bằng sáng chế cũng vẫn tồn tại và vì Facebook kiểm soát React Native nên vấn đề này sẽ không sớm được giải quyết. Giờ đây, React Native đã nhận được Phiên bản 2, Cấp bổ sung Quyền Sáng chế từ Facebook cùng với giấy phép kiểu BSD.

Nhưng vào năm 2017, Facebook đã cập nhật Bằng sáng chế và cấp phép nguồn mở cho React Native, cũng như Reactjs và các dự án nguồn mở khác. Theo bản cập nhật mới này, trong trường hợp bất kỳ developer nào sử dụng các nền tảng mã nguồn mở này cho bất kỳ mục đích nào mà Facebook không thích hoặc vi phạm bằng sáng chế, thì Facebook có quyền ngăn developer đó sử dụng nền tảng mã nguồn mở đó. Điều này đã ảnh hưởng đến cả các developer Reactjs và React Native, vì các ứng dụng của họ được phát triển trên các nền tảng này có thể thực sự bị ngừng hoạt động bất cứ lúc nào.

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:

1. 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.
2. 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.
3. 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ở).
4. Không dùng để viết game có tính đồ họa và cách chơi phức tạp.
5. 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.

React.js và React Native có giống nhau không?

Nếu bạn là người mới trong thế giới phát triển web và di động, bạn có thể thắc mắc điều tương tự.

Là một người mới, thật sẽ dễ cho rằng React.js là React Native giống nhau. Rốt cuộc, cả hai đều có “React” như một phần tên của họ.

Mặc dù React.js và React Native có nhiều điểm chung, nhưng chúng khác nhau. Trong bài viết này, tôi sẽ giải thích cả React.js và React Native, sau đó tôi sẽ liệt kê những điểm giống và khác nhau của chúng. Đến cuối bài viết này, bạn sẽ có kiến thức rõ ràng về cả hai công cụ và loại ứng dụng mà chúng được sử dụng để xây dựng.

Để hiểu rõ về sự khác biệt giữa React.js và React Native, trước tiên chúng ta phải đi sâu vào cách một trang web được hiển thị trên trình duyệt web.

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 ?

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.

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.

React Native không phải chỉ viết 1 lần mà nó chạy ở mọi nơi. Bất cứ khi nào bạn lập trình 1 app, bạn cần phải xây dựng UI trông native và phù hợp với hệ điều hành bạn hướng tới. Vì lý do này, 1 số UI code cần được viết theo đúng các chỉ dẫn và chuẩn mực tốt nhất của platform đó.

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…

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.

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.

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.

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.

Thêm nữa, khi React Native đã là nguồn mở, với cộng đồng lớn các lập trình viên đã hỗ trợ thực hiện nhiều tính năng hơn, fix bugs… Phần lớn thời gian, nếu bạn đang cố gắng lập trình 1 thứ gì đó đã quen thuộc trong mobile apps thì nhiều khả năng là nó đã được lập trình rồi.

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!

Cách trang web được hiển thị: HTML, CSS và JavaScript

Khi bạn nhập URL của một trang web vào thanh địa chỉ của trình duyệt và nhấp vào enter, trình duyệt sẽ yêu cầu trang web đó và máy chủ web sẽ gửi một tệp HTML tới trình duyệt.

Tệp HTML chứa nội dung của trang web và các tệp được liên kết như hình ảnh, video và stylesheets. Trình duyệt web phân tích cú pháp tệp HTML và xây dựng Mô hình đối tượng tài liệu (DOM) là cấu trúc dạng cây chứa các thành phần của trang (ví dụ: nút, đoạn văn, liên kết, v.v.).

Trình duyệt bắt đầu yêu cầu các tệp được liên kết và tải chúng xuống máy tính. Sau đó, nó phân tích cú pháp các tệp được liên kết, chẳng hạn như CSS và JavaScript, đồng thời áp dụng kiểu dáng cho nội dung, làm cho nội dung dễ nhìn hơn đối với người dùng. Sau khi tất cả các tệp được tải xuống, trình duyệt sẽ hiển thị nội dung trên màn hình.

Trình duyệt cũng chạy bất kỳ mã JavaScript nào để làm cho trang tương tác. Vì vậy, ví dụ: nếu người dùng điền sai thông tin vào một biểu mẫu, JavaScript có thể được sử dụng để chèn một phần tử

Tuy nhiên, một trong những vấn đề lớn nhất của việc chèn các phần tử vào DOM bằng JavaScript là mã không thể tái sử dụng. Ví dụ: nếu bạn muốn chèn cùng một nút vào trang nhưng với các màu nền khác nhau, bạn phải tạo phần tử hai lần trong JavaScript:


let blueBtn = document.createElement("button").style.backgroundColor("blue") let redBtn = document.createElement("button").style.backgroundColor("red") // Insert blue and red button into the page


Đây chỉ là một ví dụ đơn giản. Với giao diện người dùng phức tạp, bạn có thể tưởng tượng mọi thứ có thể trở nên dài và khó hiểu như thế nào. React được phát triển để giải quyết vấn đề này bằng cách làm cho quá trình tạo ứng dụng web trở nên có tổ chức và trực quan hơn nhiều.

Phát triển ứng dụng di động với React Native

Để phát triển ứng dụng di động bằng React Native, bạn có thể tuân theo các bước sau:

Chuẩn bị môi trường phát triển:

• Cài đặt Node.js: React Native yêu cầu Node.js để chạy mã JavaScript.
• Cài đặt React Native CLI: CLI (Command Line Interface) là công cụ dòng lệnh để tạo và quản lý dự án React Native.

Tạo dự án React Native mới:

• Sử dụng React Native CLI để tạo dự án mới với lệnh npx react-native init TenDuAn (thay TenDuAn bằng tên dự án của bạn).
• Chờ quá trình tạo dự án hoàn thành.

Chạy ứng dụng mẫu:

• Mở terminal/cmd trong thư mục dự án.
• Chạy lệnh npx react-native run-android để khởi chạy ứng dụng trên Android hoặc npx react-native run-ios để khởi chạy trên iOS. Đảm bảo máy ảo Android hoặc thiết bị iOS được kết nối và sẵn sàng.

Chỉnh sửa ứng dụng:

• Mở thư mục dự án trong trình soạn thảo mã nguồn.
• Tìm và chỉnh sửa file App.js để thay đổi giao diện người dùng và chức năng của ứng dụng.

Chạy và kiểm tra ứng dụng:

• Lưu các thay đổi và quay trở lại terminal/cmd.
• Chạy lại lệnh npx react-native run-android hoặc npx react-native run-ios để xem kết quả của các thay đổi trong ứng dụng.

Phát triển thêm tính năng và giao diện:

• Tiếp tục chỉnh sửa và phát triển các thành phần UI và chức năng mới cho ứng dụng.
• Sử dụng các thư viện, module và API bên thứ ba để mở rộng tính năng của ứng dụng.

Kiểm thử và triển khai:

• Kiểm tra ứng dụng trên các thiết bị và môi trường khác nhau để đảm bảo tính tương thích và chất lượng.
• Triển khai ứng dụng lên cửa hàng ứng dụng (Google Play Store hoặc App Store) hoặc phân phối cho người dùng.

Lưu ý rằng đây chỉ là một quy trình phát triển cơ bản và có thể có các bước và tùy chỉnh khác phụ thuộc vào yêu cầu cụ thể của dự án.

5 đ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.

>>> Đọc ngay: React Native là gì?

#Khi bắt đầu 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ụ:

tương đương với

biến thành

và

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

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

Mọi người thường nói đùa rằng sự tương đồng lớn nhất đó là cả hai đều thiếu tài liệu. Nhưng điểm yếu này đang dần được khắc phục bởi nhà phát hành.

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.

React JS là gì?

React JS là một thư viện JavaScript mã nguồn mở do Facebook phát triển, ra mắt lần đầu vào năm 2013. Được tạo ra với mục đích chính là xây dựng các thành phần tương tác trên trang web. Một trong những đặc điểm nổi bật của ReactJS là khả năng render dữ liệu không chỉ trên tầng Server mà còn ở tầng Client, tạo điều kiện thuận lợi cho việc tương tác với các thành phần trên trang web.

Nhìn chung, React JS tận dụng tính linh hoạt và sức mạnh từ việc tập trung vào các thành phần riêng. Điều này cho phép nhà phát triển tính năng trong lĩnh vực web có thể dễ dàng tách rời và chuyển đổi giao diện người dùng từ những cách triển khai phức tạp, biến chúng thành những phần đơn giản hơn. Điều quan trọng là việc kết xuất dữ liệu không chỉ ở phía máy chủ, mà bạn cũng có thể thực hiện ở phía máy khách khi sử dụng React JS.

React Native là gì?

Trước khi đi vào so sánh chi tiết ReactJS và React Native, mời bạn đọc tìm hiểu rõ hơn về React Native.

2.Định nghĩa

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

React Native chỉ sử dụng JavaScript để xây dựng một ứng dụng di động đa nền tảng. React Native sử dụng các thành phần gốc thay vì sử dụng các thành phần web như ReactJS làm khối xây dựng. nhắm mục tiêu đến các nền tảng di động hơn là trình duyệt.

React Native ban đầu được phát triển cho ứng dụng iOS. Tuy nhiên, gần đây, nó cũng hỗ trợ hệ điều hành Android.

React Native là một framework được phát hành vào năm 2015

2.Ưu điểm của React Native

Có một số lợi thế của React Native để xây dựng các ứng dụng di động. Một số trong số chúng được đưa ra dưới đây:

• Sử dụng đa nền tảng: React Native hoạt động cho cả nền tảng Android và nền tảng iOS. Mã được viết trong React Native được biên dịch thành mã gốc, hiệu suất lớp này giúp hỗ trợ hoạt động trên cả hai hệ điều hành.
• Khả năng tái sử dụng code: React Native có khả năng tái sử dụng lại các code nhờ đó lập trình viên tiết kiệm được thời gian và chi phí phát triển ứng dụng.
• Cộng đồng người dùng lớn: React Native là một nền tảng mở của JavaScript giúp người dùng đóng góp vào sự phát triển của framework nhờ đó giúp mọi người dễ dàng truy cập miễn phí và nhận được sự hỗ trợ nhanh khi gặp khó khăn.

=>>> Cập nhật nhanh lịch khai giảng các khoá học lập trình tại CodeGym: https://codegym.vn/lich-khai-giang/?

Lịch sử của React Native

Khi lần đầu tiên quyết định cung cấp dịch vụ của mình trên thiết bị di động, thay vì xây dựng một native app (ứng dụng gốc) như các nhà công nghệ hàng đầu vào thời điểm đó, Facebook quyết định chạy trên một trang web mobile dựa trên HTML5. Tuy nhiên, giải pháp này không đem lại thành công cho Facebook và cần phải cải tiến nhiều về hiệu suất và giao diện người dùng.

Vào năm 2012, Mark Zuckerberg đã thừa nhận rằng: “Sai lầm lớn nhất của chúng tôi khi làm công ty là dựa trên quá nhiều HTML hơn là môi trường phát triển gốc”. Và Mark Zuckerberg đã hứa rằng Facebook sẽ sớm cung cấp trải nghiệm di động tốt hơn trong tương lai.

Năm 2013, Jordan Walke – nhà phát triển Facebook đã có một khám phá đột phá. Ông đã tìm ra phương pháp tạo các phần tử giao diện người dùng (UI elements) cho các ứng dụng iOS bằng cách sử dụng JavaScript.

Và sau đó, Facebook đã quyết định tổ chức cuộc thi Hackathon để khám phá thêm về mức độ phát triển khi sử dụng các giải pháp JavaScript trên mobile.

Sau nhiều thời gian phát triển, phiên bản React Native đầu tiên được ra mắt vào năm 2015 bởi Facebook.

Đó là cách React Native ra đời. Ban đầu React Native chỉ được phát triển cho iOS, sau đó Facebook đã nhanh chóng phát triển trên Android.

Chỉ ba năm sau, tính theo số lượng người tham gia, React Native đã là dự án lớn thứ hai trên GitHub.

React native là gì?

React Native (RN) là một framework mã nguồn mở được ra đời bởi Facebook. Nó được sử dụng để phát triển các ứng dụng trên thiết bị di động Android, IOS, Web và UWP. Framework này cho phép các nhà phát triển sử dụng React cùng với môi trường ứng dụng gốc (native). Bên cạnh đó còn hỗ trợ người dùng tạo một ứng dụng cho các nền tảng khác nhau bằng cách sử dụng cùng một codebase.

React Native được Facebook phát hành lần đầu tiên vào năm 2015 dưới dạng một dự án open-source. Chỉ trong vài năm, React Native đã trở thành một trong những giải pháp hàng đầu được sử dụng để phát triển mobile. React Native được sử dụng để cung cấp năng lượng cho các app mobile hàng đầu thế giới, bao gồm Instagram, Facebook và Skype.

Hướng dẫn cách cài đặt React Native

React Native hỗ trợ đa hệ điều hành, bao gồm Windows, MacOS, Linux. Dưới đây là cách cài đặt 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: Cài đặt React Native bằng cú pháp:


npm install –g create-react-native-app


Bước 3: Tạo và chạy dự án mẫu.


create-react-native-app AwesomeProJect cd AwesomeProject npm start


Bước 4: Chạy dự án trên mobile.

Câu hỏi thường gặp

Tại sao nên sử dụng React Native?

React Native là một khung JavaScript mã nguồn mở, được thiết kế để xây dựng ứng dụng trên nhiều nền tảng như iOS, Android và cả các ứng dụng web , sử dụng cùng một cơ sở mã. Nó dựa trên React và nó mang lại rất nhiều thành công cho sự phát triển ứng dụng dành cho thiết bị di động.

React Native có phải chỉ dành cho thiết bị di động không?

React Native hiện hỗ trợ hai nền tảng dành cho thiết bị di động trên cả iOS và Android, đồng thời có tiềm năng mở rộng sang tất cả các nền tảng trong tương lai.

React Native có thể được sử dụng cho web không?

React Native cho Web là một lớp tương thích giữa React DOM và React Native. Nền tảng này có thể được sử dụng trong các ứng dụng mới và hiện có, ứng dụng chỉ dành cho web và đa nền tảng.

React.js là gì?

Về mặt kỹ thuật, ReactJS là một thư viện JavaScript mặt trước, mã nguồn mở để xây dựng giao diện người dùng hoặc các thành phần giao diện người dùng. Nói một cách đơn giản, điều này có nghĩa là bạn có thể sử dụng React để xây dựng tất cả các phần của trang web mà người dùng có thể xem và tương tác trên cửa sổ trình duyệt của họ.

Vậy sự khác biệt giữa việc sử dụng JavaScript đơn giản và React là gì? Chà, React làm cho quá trình thiết kế giao diện người dùng dễ dàng hơn nhiều. Nó cho phép bạn tạo các yếu tố mà bạn có thể dễ dàng sử dụng lại trong các phần khác của trang web hoặc ứng dụng.

Với JavaScript, trước đây tôi đã đề cập đến việc bạn sẽ cần viết cùng một đoạn mã hai lần để tạo cùng một nút với các màu khác nhau, điều này có thể dẫn đến sự phức tạp trong các dự án lớn.

Kiến trúc thành phần của React giải quyết vấn đề này một cách xuất sắc. Với React, bạn xác định một phần duy nhất của giao diện người dùng, chẳng hạn như một nút, dưới dạng một thành phần.


const Button (props) => { return (

Submit

) }


Thành phần trong trường hợp này là một hàm trả về cú pháp giống như HTML được gọi là JSX, xác định cách trình bày và giao diện của thành phần trên trình duyệt web.

Bây giờ, giả sử bạn muốn sử dụng cùng một nút (nhưng có các màu khác nhau) ở nhiều nơi trên trang web của mình. Thay vì tạo từng nút từ đầu với các thuộc tính màu khác nhau (như bạn làm với JavaScript), với React, bạn chỉ cần sử dụng cùng một Thành phần trong trường hợp này là một hàm trả về cú pháp giống như HTML được gọi là JSX, xác định cách trình bày và giao diện của thành phần trên trình duyệt web.

Bây giờ, giả sử bạn muốn sử dụng cùng một nút (nhưng có các màu khác nhau) ở nhiều nơi trên trang web của mình. Thay vì tạo từng nút từ đầu với các thuộc tính màu khác nhau (như bạn làm với JavaScript), với React, bạn chỉ cần sử dụng cùng một phần tử


và chuyển một màu khác nhau cho mỗi nút dưới dạng props, tạo các biến thể của cùng một nút X và chuyển một màu khác nhau cho mỗi nút dưới dạng

props

, tạo các biến thể của cùng một nút.



Phương pháp này giữ cho mọi thứ đơn giản và có tổ chức, đó là toàn bộ bản chất của thư viện React.js.

Một lợi ích khác của việc sử dụng React để phát triển giao diện người dùng là tách biệt các mối quan tâm. Điều này có nghĩa là dữ liệu được sử dụng trong một thành phần tồn tại tách biệt với logic, tồn tại tách biệt với lớp xem.

Đây là một ví dụ:


const Button (props) => { // component data const [btnText, setBtnText] = useState("Submit") // component logic function onClick() { setBtnText("Submitted!") } return ( // component view

{btnText}

) }


Như bạn có thể thấy ở đây, trạng thái, logic và cách trình bày của một thành phần đều tách biệt với nhau, làm cho các thành phần React UI dễ hiểu và dễ soạn thảo hơn.

Tóm lại, React là một thư viện JavaScript được thiết kế để đơn giản hóa quy trình xây dựng giao diện người dùng của các ứng dụng web.

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

React Native được viết bằng sự kết hợp của JavaScript và JXL, một mã đánh dấu đặc biệt giống với XML. Framework có khả năng thao tác với cả hai thread là main thread và JS thread. Mỗi thread đều có vai trò riêng biệt.

• Main thread: Đảm nhiệm vai trò cập nhật giao diện người dùng và xử lý tương tác người dùng.
• JS thread: Đảm bảo hệ thống hoạt động hiệu quả thông qua việc thực thi và xử lý code JavaScript.

Nguyên lý hoạt động của RN gần như tương tự với React. React Native không sử dụng thao tác với DOM và HTML mà chạy một quá trình xử lý nền với nền tảng gốc.

React Native sử dụng Bridge (cầu nối). Mặc dù các thread JavaScript và native được viết bằng các ngôn ngữ hoàn toàn khác nhau, nhưng Bridge là tính năng cầu nối giúp thao tác hai chiều có thể thực hiện dễ dàng hơ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.

1. 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…
2. ES6 và Javascript nâng cao.
3. 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
4. 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
5. Redux với React
6. 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ủa Lộ trình học React Native.
7. 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ữ…)

Có thể bạn muốn xem thêm:

• Tiki đã dùng React Native như thế nào?
• React Native Starter Kit – Top 3 bộ Starter Kit tốt nhất

Xem thêm việc làm IT tại TopDev!

React Native hiện đang được sử dụng rộng rãi trong việc phát triển ứng dụng và phục vụ cho các thiết bị smartphone. Để tạo được các ứng dụng thu hút hàng ngàn người dùng thì các nhà phát triển nên sử dụng framework này. Vậy React Native là gì? Nguyên lý hoạt động của React Native như thế nào, cùng các thông tin liên quan sẽ được Vietnix tổng hợp ở bài viết dưới đây. Mời bạn cùng theo dõi nhé.

Thành phần chính của React JS

Dưới đây là những thành phần cấu tạo lên React JS mà bạn cần biết

Component

Đây là một thành phần cơ bản trong ReactJS, gồm HTML, CSS và JavaScript, được sử dụng để xây dựng giao diện người dùng. Components có thể tái sử dụng và tồn tại dưới dạng các khối xây dựng độc lập, giúp tăng tính mô đun và dễ dàng quản lý ứng dụng.

JSX

Là cú pháp đặc biệt trong ReactJS cho phép viết mã HTML trực tiếp trong JavaScript. JSX không chỉ giúp tạo ra các components một cách dễ dàng mà còn cải thiện đáng kể khả năng đọc hiểu và bảo trì mã nguồn.

Props

Là các thuộc tính (properties) được sử dụng để truyền dữ liệu từ component cha đến component con. Props giúp tạo sự linh hoạt và tái sử dụng trong việc chia sẻ thông tin giữa các components.

State

Đại diện cho trạng thái hiện tại của một component trong quá trình thực thi ứng dụng. State có thể thay đổi và khiến cho giao diện người dùng cập nhật theo sự thay đổi này, tạo ra tính tương tác và động đậy cho ứng dụng.

Virtual DOM

Là một bản sao của DOM thực sự, tồn tại trong bộ nhớ, được sử dụng để tối ưu hóa hiệu suất của ứng dụng React. Virtual DOM cung cấp cơ chế cập nhật giao diện người dùng một cách hiệu quả, giúp tránh các thao tác không cần thiết và tăng cường hiệu suất.

Lifecycle methods

Đây là các phương thức được gọi trong quá trình “cuộc đời” của một component, từ khi được khởi tạo cho đến khi bị hủy. Các lifecycle methods cho phép thực hiện các hoạt động cần thiết, như khởi tạo dữ liệu, cập nhật state, và thực hiện các tác vụ khi component được tạo hoặc bị xóa.

Lời kết

Hy vọng bài viết này đã giúp bạn hiểu thêm về React Native là gì. Mặc dù có chút phức tạp, React Native cũng đang dần trở thành Cross-platform framework được nhiều người sử dụng nhất. Nếu có bất kỳ thắc mắc nào hãy để lại bên dưới, và đừng quên theo dõi những bài viết hữu ích tiếp theo của Vietnix nhé.

Tin tức

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