Zacząłem uczyć się React z ciekawości i chciałem poznać różnicę między React a React Native - chociaż nie mogłem znaleźć zadowalającej odpowiedzi za pomocą Google. Wydaje się, że React i React Native mają ten sam format. Czy mają zupełnie inną składnię?
javascript
reactjs
react-native
javascript-framework
Shiva Kumar
źródło
źródło
<h1>
,<p>
itd Gdzie reagują-natywna aplikacja renderuje rodzimych komponentów widok jak<View>
,<Text>
,<Image>
,<ScrollView>
, więc nie można bezpośrednio ponownie użyć kodu komponentów UI chyba przerobienie / wymienić wszystkie elementy.Odpowiedzi:
ReactJS to biblioteka JavaScript, obsługująca zarówno front-end web, jak i uruchamiana na serwerze, do tworzenia interfejsów użytkownika i aplikacji internetowych.
React Native to platforma mobilna, która kompiluje się z komponentami aplikacji rodzimej, umożliwiając tworzenie natywnych aplikacji mobilnych na różne platformy (iOS, Android i Windows Mobile) w JavaScript, która pozwala używać ReactJS do budowania komponentów i implementuje ReactJS w ramach kaptur.
Oba są zgodne z rozszerzeniem składni JSX do JavaScript.
Oba są otwarte przez Facebook.
źródło
Oto projekt React .
Na Facebooku wymyślili React, aby JavaScript mógł szybciej manipulować DOM DOM przy użyciu wirtualnego modelu DOM.
Pełne odświeżanie DOM jest wolniejsze w porównaniu do modelu React virtual-dom , który odświeża tylko części strony (czytaj: częściowe odświeżanie).
Jak możesz zrozumieć z tego filmu , Facebook nie wynalazł React, ponieważ od razu zrozumieli, że częściowe odświeżenie będzie szybsze niż konwencjonalne. Początkowo potrzebowali sposobu na skrócenie czasu ponownej kompilacji aplikacji Facebooka i na szczęście ożywiło to częściowe odświeżanie DOM.
React native to tylko konsekwencja React. Jest to platforma do tworzenia aplikacji natywnych przy użyciu JavaScript.
Przed natywnym Reactem trzeba było znać Javę na Androida lub Objective-C na iPhone'a i iPada, aby tworzyć natywne aplikacje.
Dzięki React Native można naśladować zachowanie natywnej aplikacji w JavaScript, a na końcu otrzymasz kod specyficzny dla platformy jako wynik. Możesz nawet mieszać natywny kod z JavaScriptem, jeśli chcesz dalej optymalizować swoją aplikację.
Jak powiedziała Olivia Bishop w filmie , 85% podstawowej bazy kodu React może być współużytkowane przez platformy. Byłyby to komponenty zwykle używane przez aplikacje i wspólna logika.
15% kodu jest specyficzne dla platformy. JavaScript specyficzny dla platformy jest tym, co nadaje platformie smak (i robi różnicę w doświadczeniu).
Fajne jest to, że ten kod jest specyficzny dla platformy - jest już napisany, więc wystarczy go użyć.
źródło
Reagować:
React Native:
Więc w zasadzie React jest biblioteką interfejsu użytkownika do wyświetlania twojej aplikacji internetowej, używając javascript i JSX , React native to dodatkowa biblioteka na górze React, aby stworzyć natywną aplikację
iOS
iAndroid
urządzenia.Przykładowy kod React :
React Przykładowy kod źródłowy:
Aby uzyskać więcej informacji o React , odwiedź ich oficjalną stronę internetową utworzoną przez zespół Facebooka:
https://facebook.github.io/react
Aby uzyskać więcej informacji o React Native , odwiedź stronę React Native poniżej:
https://facebook.github.io/react-native
źródło
ReactJS to platforma do budowania hierarchii komponentów interfejsu użytkownika. Każdy element ma stan i rekwizyty. Przepływy danych od komponentów najwyższego do niskiego poziomu za pomocą rekwizytów. Stan jest aktualizowany w komponencie najwyższego poziomu za pomocą procedur obsługi zdarzeń.
React native korzysta z React Framework do budowania komponentów do aplikacji mobilnych. React native zapewnia podstawowy zestaw komponentów dla platform iOS i Android. Niektóre składniki React Native to Navigator, TabBar, Text, TextInput, View, ScrollView. Te komponenty używają natywnie wewnętrznych komponentów iOS UIKit i Android UI. React native pozwala także na NativeModules, w których kod napisany w ObjectiveC na iOS i Java na Androida może być używany w JavaScript.
źródło
Po pierwsze, podobieństwa: zarówno React & React Native (RN) zostały zaprojektowane w celu tworzenia elastycznych interfejsów użytkownika. Te frameworki mają mnóstwo zalet, ale najbardziej podstawową zaletą jest to, że zostały stworzone z myślą o rozwoju interfejsu użytkownika. Facebook opracował RN kilka lat po React.
Reakcja: Facebook zaprojektował ten framework tak, aby był prawie jak pisanie kodu JavaScript wewnątrz HTML / XML, dlatego tagi są nazywane „ JSX ” (JavaScript XML) i są podobne do znanych tagów podobnych do HTML, takich jak
<div>
lub<p>
. Cechą charakterystyczną React są duże litery, które oznaczają niestandardowy komponent, taki jak<MyFancyNavbar />
, który również istnieje w RN. Jednak React używa DOM . DOM istnieje dla HTML, dlatego React służy do tworzenia stron internetowych.React Native: RN nie używa HTML i dlatego nie jest używany do tworzenia stron internetowych. Służy do ... praktycznie wszystkiego innego! Programowanie mobilne (zarówno iOS, jak i Android), urządzenia inteligentne (np. Zegarki, telewizory), rzeczywistość rozszerzona itp. Ponieważ RN nie ma DOM do interakcji, zamiast używać tego samego rodzaju znaczników HTML używanych w React, używa własnego tagi, które są następnie kompilowane na inne języki. Na przykład, zamiast
<div>
znaczników, programiści RN używają wbudowanego<View>
znacznika RN , który kompiluje się w inny natywny kod pod maską (np.android.view
Na Androida; iUIView
na iOS).Krótko mówiąc: są bardzo podobne (do tworzenia interfejsu użytkownika), ale są używane do różnych mediów.
źródło
Podczas gdy React.js jest nadrzędną biblioteką JavaScript do tworzenia aplikacji internetowych.
Podczas gdy używasz znaczników typu
<View>
,<Text>
bardzo często w React-Native, React.js używa internetowych znaczników HTML takich jak<div>
<h1>
<h2>
, które są jedynie synonimami w słowniku rozwoju stron internetowych / urządzeń mobilnych.W przypadku React.js potrzebujesz DOM do renderowania ścieżki znaczników HTML, natomiast w przypadku aplikacji mobilnej: React-Native używa AppRegistry do zarejestrowania aplikacji.
Mam nadzieję, że jest to łatwe wytłumaczenie szybkich różnic / podobieństw w React.js i React-Native.
źródło
Nie możemy ich dokładnie porównać. Istnieją różnice w przypadku użycia .
(Aktualizacja 2018)
ReactJS
React koncentruje się przede wszystkim na tworzeniu stron internetowych.
React Native
Rozszerzenie React , niszowe w rozwoju aplikacji mobilnych.
Mam nadzieję, że ci pomogłem :)
źródło
W prostym sensie React i React native działają według tych samych zasad projektowania, z wyjątkiem projektowania interfejsu użytkownika.
W każdym razie jest to doskonała biblioteka do tworzenia interfejsu użytkownika dla urządzeń mobilnych i sieci.
źródło
React to deklaratywna, wydajna i elastyczna biblioteka JavaScript do budowania interfejsów użytkownika. Twoje komponenty mówią React, co chcesz renderować - wtedy React skutecznie zaktualizuje i wyrenderuje odpowiednie komponenty, gdy zmienią się twoje dane. Tutaj ShoppingList jest klasą komponentu React lub typem komponentu React.
Aplikacja React Native to prawdziwa aplikacja mobilna. Dzięki React Native nie budujesz „mobilnej aplikacji internetowej”, „aplikacji HTML5” ani „aplikacji hybrydowej”. Budujesz prawdziwą aplikację mobilną, która jest nie do odróżnienia od aplikacji zbudowanej przy użyciu Objective-C lub Java. React Native używa tych samych podstawowych elementów składowych interfejsu użytkownika, co zwykłe aplikacje na iOS i Androida.
Więcej informacji
źródło
ReactJS jest podstawową strukturą, mającą na celu budowę komponentu izolowanego na podstawie wzorca reaktywnego, możesz myśleć o nim jako o V z MVC, chociaż chciałbym powiedzieć, że reakcja ma inny charakter, szczególnie jeśli nie znasz koncepcji reaktywnej .
ReactNative to kolejna warstwa, która ma mieć wspólny zestaw dla platform Android i iOS. Zatem kod wygląda zasadniczo tak samo jak ReactJS, ponieważ jest ReactJS, ale ładuje się natywnie na platformach mobilnych. Możesz także łączyć bardziej złożone i zależne od platformy API za pomocą Java / Objective-C / Swift w zależności od systemu operacyjnego i używać go w React.
źródło
React Native jest przede wszystkim opracowany w JavaScript, co oznacza, że większość kodu, który potrzebujesz na początek, można udostępnić na różnych platformach. React Native będzie renderowane przy użyciu komponentów rodzimych. React Natywne aplikacje są tworzone w języku wymaganym przez docelową platformę, Objective-C lub Swift dla iOS, Java dla Androida itp. Zapisany kod nie jest współużytkowany na różnych platformach, a ich zachowanie jest różne. Mają bezpośredni dostęp do wszystkich funkcji oferowanych przez platformę bez żadnych ograniczeń.
React to biblioteka JavaScript typu open source opracowana przez Facebooka w celu tworzenia interfejsów użytkownika. Służy do obsługi warstwy widoku dla aplikacji internetowych i mobilnych. ReactJS służy do tworzenia komponentów interfejsu użytkownika wielokrotnego użytku. Jest to obecnie jedna z najpopularniejszych bibliotek JavaScript w tej dziedzinie i ma solidne podstawy i dużą społeczność. Jeśli uczysz się ReactJS, musisz mieć wiedzę o JavaScript, HTML5 i CSS.
źródło
React jest podstawową abstrakcją React Native i React DOM , więc jeśli zamierzasz pracować z React Native, będziesz także potrzebował React ... tak samo z Internetem, ale zamiast React Native będziesz potrzebować React DOM.
Ponieważ React jest abstrakcyjną bazą, ogólna składnia i przepływ pracy są takie same, ale komponenty, których użyjesz, są bardzo różne, więc musisz nauczyć się tych różnic, jest to zgodne z tak zwanym React, tak zwanym moto, które brzmi „Naucz się pisać gdziekolwiek”, ponieważ jeśli znasz React (abstrakcja podstawowa), możesz po prostu nauczyć się różnic między platformami bez uczenia się innego języka programowania, składni i przepływu pracy.
źródło
React-Native to framework, w którym ReactJS jest biblioteką javascript, której możesz używać na swojej stronie.
React-native zapewnia domyślne podstawowe komponenty (obrazy, tekst), gdzie React zapewnia kilka komponentów i umożliwia ich współpracę.
źródło
React Js to biblioteka JavaScript, w której możesz rozwijać i uruchamiać szybsze aplikacje internetowe za pomocą React.
React Native pozwala tworzyć aplikacje mobilne przy użyciu tylko JavaScript, służy do tworzenia aplikacji mobilnych. więcej informacji tutaj https://facebook.github.io/react-native/docs/getting-started.html
źródło
W odniesieniu do cyklu życia komponentów oraz wszystkich innych dzwonków i gwizdków jest to w większości takie samo.
Różnica polega głównie na stosowaniu znaczników JSX. React używa takiego, który przypomina HTML. Drugi to znacznik używany przez React-Native do wyświetlania widoku.
źródło
React Native jest przeznaczony do aplikacji mobilnych, natomiast React jest przeznaczony do stron internetowych (front-end). Oba są frameworkami wymyślonymi przez Facebooka. React Native to wieloplatformowa platforma programistyczna, co oznacza, że można napisać prawie ten sam kod dla IOS i Androida i będzie działać. Osobiście wiem znacznie więcej o React Native, więc zostawię to przy tym.
źródło
React Js manipuluje przy pomocy HTML Dom. Ale React native manipuluje natywnym komponentem interfejsu użytkownika na urządzenia mobilne (iOS / Android).
źródło
ReactJS to biblioteka javascript, która służy do budowania interfejsów sieciowych. Potrzebny byłby program pakujący, taki jak webpack, i próbowałby zainstalować moduły potrzebne do zbudowania witryny.
React Native to framework javascript i zawiera wszystko, czego potrzebujesz do pisania aplikacji wieloplatformowych (takich jak iOS lub Android). Aby zbudować i wdrożyć aplikację, musisz zainstalować oprogramowanie Xcode i Android Studio.
W przeciwieństwie do ReactJS, React-Native nie używa HTML, ale podobne komponenty, których można używać na iOS i Androidzie do tworzenia aplikacji. Te komponenty używają prawdziwych komponentów natywnych do tworzenia aplikacji na iOS i Androida. Z tego powodu aplikacje React-Native działają w odróżnieniu od innych platform programistycznych Hybrid. Komponenty zwiększają także możliwość ponownego użycia kodu, ponieważ nie trzeba ponownie tworzyć tego samego interfejsu użytkownika na iOS i Androidzie.
źródło
W prostych słowach ReactJS jest biblioteką nadrzędną, która zwraca coś do renderowania według środowiska hosta (przeglądarka, urządzenie mobilne, serwer, komputer stacjonarny itp.). Oprócz renderowania udostępnia również inne metody, takie jak haki cyklu życia .. itp.
W przeglądarce używa innej biblioteki reagującej do renderowania elementów DOM. W urządzeniach mobilnych wykorzystuje komponenty React-Native do renderowania natywnych komponentów interfejsu użytkownika specyficznych dla platformy (zarówno IOS, jak i Android). WIĘC,
Reagować + Reagować dom = rozwój sieci
reagować + reagować-natywny = rozwój mobilny
źródło
REACT to biblioteka JavaScript do tworzenia aplikacji internetowych o dużym / małym interfejsie, takich jak Facebook.
REACT NATIVE to framework JavaScript do tworzenia natywnej aplikacji mobilnej na Androida, IOS i Windows Phone.
Oba są otwarte przez Facebook.
źródło
Oto różnice, o których wiem:
źródło
Podsumowując: React.js dla Web Development, a React-Native dla rozwoju aplikacji mobilnych
źródło
ReactJS
React Native
źródło
React Js - React JS to front-end biblioteka javascript, to duża biblioteka, a nie framework
komponentów interfejsu użytkownika wielokrotnego użytku
ReactNative - React Native to platforma aplikacji mobilnych typu open source.
źródło
Trochę późno na imprezę, ale oto bardziej wyczerpująca odpowiedź z przykładami:
Reagować
React to oparta na komponentach biblioteka interfejsu użytkownika, która wykorzystuje „cieńowy DOM” do wydajnej aktualizacji DOM o zmiany, zamiast przebudowywania całego drzewa DOM dla każdej zmiany. Początkowo został zbudowany dla aplikacji internetowych, ale teraz można go również używać na urządzeniach mobilnych i 3D / vr.
Komponentów między React i React Native nie można zamieniać, ponieważ React Native odwzorowuje na natywne elementy mobilnego interfejsu użytkownika, ale logiki biznesowej i kodu niezwiązanego z renderowaniem można ponownie użyć.
ReactDOM
Początkowo był dołączony do biblioteki React, ale został podzielony, gdy React był używany na innych platformach niż tylko w Internecie. Służy jako punkt wejścia do DOM i jest używany w połączeniu z React.
Przykład:
React Native
React Native to wieloplatformowa platforma mobilna, która wykorzystuje React i komunikuje się między Javascriptem a jego rodzimym odpowiednikiem poprzez „most”. Z tego powodu wiele struktur interfejsu użytkownika musi się różnić podczas korzystania z React Native. Na przykład: podczas budowania listy napotkasz poważne problemy z wydajnością, jeśli spróbujesz użyć
map
do zbudowania listy zamiast React NativeFlatList
. React Native może być wykorzystywany do tworzenia aplikacji mobilnych na iOS / Android, a także do inteligentnych zegarków i telewizorów.Expo
Expo jest punktem wyjścia przy uruchamianiu nowej aplikacji React Native.
Uwaga: Korzystając z Expo, możesz używać tylko natywnych API, które zapewniają. Wszystkie dodatkowe biblioteki, które dołączasz, będą musiały być czystym językiem JavaScript lub będziesz musiał wysunąć expo.
Ten sam przykład z wykorzystaniem React Native:
Różnice:
onClick
zamień sięonPress
, React Native używa arkuszy stylów do definiowania stylów w bardziej wydajny sposób, a React Native używa Flexbox jako domyślnej struktury układu, aby utrzymać reakcję.React360
Warto również wspomnieć, że React może być również wykorzystywany do tworzenia aplikacji 3D / VR. Struktura komponentu jest bardzo podobna do React Native. https://facebook.github.io/react-360/
źródło
Reaguj używa domena reagująca nie domena przeglądarki, podczas gdy Reakcja natywna korzysta z wirtualnej domeny, ale obie używają tej samej składni, tzn. jeśli możesz użyć Reagjs, możesz użyć Reakcja natywna, ponieważ większość bibliotek używanych w Reactjs jest dostępna w Reakt Natywny podobnie jak nawigacja i inne wspólne biblioteki, które mają ze sobą wspólne.
źródło
<h1>
,<p>
itp. Tam, gdzie React -native renderuje natywne komponenty widoku aplikacji, takie jak<View>
i<Text>
.W odpowiedzi na komentarz z @poshest powyżej, oto React Native wersja kodu Clock opublikowanego wcześniej w React (przepraszam, nie mogłem skomentować tej sekcji bezpośrednio, w przeciwnym razie dodałbym tam kod):
React Przykładowy kod źródłowy
Zauważ, że styl jest całkowicie moim wyborem i nie ma na celu bezpośredniej replikacji tagów
<h1>
i<h2>
używanych w kodzie React.źródło
Niektóre różnice są następujące:
1- React-Native to środowisko, które służyło do tworzenia aplikacji mobilnych, gdzie ReactJS to biblioteka javascript, której można używać na swojej stronie internetowej.
2- React-Native nie używa HTML do renderowania aplikacji, podczas gdy React używa.
3- React-Native używany do opracowywania tylko aplikacji mobilnej, podczas gdy React korzysta z witryny i telefonu komórkowego.
źródło
React Native
Jest to framework do budowania aplikacji natywnych przy użyciu JavaScript.
Kompiluje się z natywnymi komponentami aplikacji, co umożliwia tworzenie natywnych aplikacji mobilnych.
Reaguj js
Obsługuje zarówno front-end web, jak i działa na serwerze, do tworzenia interfejsów użytkownika i aplikacji internetowych.
Pozwala nam również tworzyć komponenty interfejsu użytkownika wielokrotnego użytku.
Możesz ponownie wykorzystać komponenty kodu w React JS, oszczędzając dużo czasu.
źródło
React.js często nazywany React lub ReactJS to biblioteka JavaScript odpowiedzialna za budowanie hierarchii komponentów interfejsu użytkownika lub innymi słowy odpowiedzialna za renderowanie komponentów interfejsu użytkownika. Zapewnia obsługę zarówno interfejsu użytkownika, jak i serwera.
React Native to platforma do budowania aplikacji natywnych przy użyciu JavaScript. React Native kompiluje się na natywne komponenty aplikacji, co umożliwia tworzenie natywnych aplikacji mobilnych. W React JS React jest podstawową abstrakcją React DOM dla platformy internetowej, podczas gdy w React Native React jest nadal podstawową abstrakcją, ale React Native. Tak więc składnia i przepływ pracy pozostają podobne, ale komponenty są różne.
źródło