Mi emberek sok mindennel össze fogunk keveredni. A zűrzavar a dolgok különböző jellemzőiből fakadhat. A legáltalánosabb módja annak, hogy a különböző dolgokkal összekeveredjenek, a nevük.
Az emberek először egy új dolog nevét ismerik meg. Vagy egy másik személyről van szó, állatról, termékről, szoftverről stb…
Miért van ez az egész?
Igen, az embereket gyakran összekeverik a React és React Native kifejezésekkel (nevekkel). Ha a nem tech srácok látják a React és React Native neveket, akkor a legtöbb esetben a Reactive Native-t a React kiterjesztéseként fogják fel. Még néhány technikus is ugyanígy gondolkodhat, ha 0%-os tudással rendelkezik ezeken a területeken.
Mik is ezek a dolgok valójában? Miért keverik össze az embereket gyakran velük, nem másokkal?
Reagál és React Native két keret. A nevek hasonlónak tűnnek, köztük egy extra szó. Tehát az emberek gyakran összekeverik a nevük miatt első pillantásra. Ha ugyanaz a zavar, akkor a megfelelő helyen jársz, hogy megfejtsd a mögöttük rejlő rejtélyt.
Találjuk ki.
Tartalomjegyzék
Reagál
A React egy JavaScript-könyvtár, amelyet egyoldalas webalkalmazások készítésére használnak. Ez az egyik legnépszerűbb könyvtár a webes felhasználói felületek (frontend) készítésére. Talán azt mondhatjuk, hogy jelenleg ez a legnépszerűbb könyvtár. A Facebook hozta létre és tartja karban. ReactJS néven is ismert.
Mivel van tapasztalatom a Reacttel kapcsolatban, elmondhatom, hogy gyönyörű és egyszerű tanulni és építeni. Ez egy könyvtár. Tehát azt építhetjük, amit csak akarunk, és ahogy akarjuk, kihasználva a funkcióit. Nincsenek szigorú szabályok, amelyeket be kell tartani az alkalmazások React segítségével történő fejlesztése során. Tehát lesz szabadságunk.
A React számos nagyszerű funkcióval rendelkezik. Nézzük meg őket.
#1. Alkatrészek
A Reactban minden egy komponens. Olyan, mint a webalkalmazás építőköve. A kis komponensek kombinálásával nagy komponenseket alakíthatunk ki. Minden alkatrésznek megvan a maga állapota és vezérlése. Az összetevők vezérlik a felhasználói felületet, és annak állapota alapján döntik el, hogy mit jelenítsenek meg a felhasználóknak.
A Reactban minden az összetevők. És újra felhasználhatók. Írj egyszer, és használd mindenhol.
A komponenseket a legnagyobb körültekintéssel kell megírnunk. Ez megkönnyíti a dolgok karbantartását, amikor alkalmazásunk bővül. Ha sok kódot írunk egyetlen komponensbe, akkor végül teher lesz számunkra a karbantartás. A React komponenseknek kicsinek és édesnek kell lenniük. Mennyországgá és pokollá teszik a fejlesztők életét.
#2. Virtuális DOM
Látnod kellett volna valami betöltőt egy gomb belsejében. A közösségi média platformokon pedig a lájkok száma növekszik, amint megnyomja. Az internet korábbi napjaiban mindent újra kellett töltenünk, hogy megkapjuk az információkat. De most egy frissítésre szoruló kislemez felfrissül számunkra anélkül, hogy más dolgokhoz érintene. Miről szól ez az egész?
Ahogy korábban láttuk, a Reactben minden egy összetevő. A böngészők fenntartják a webalkalmazás elemeinek DOM-struktúráját. Ha a webalkalmazás egy részét frissíteni kell, akkor azt a DOM-manipulációk segítségével frissítenünk kell. A React ugyanezt hatékonyan végzi el.
A React létrehoz egy virtuális DOM-ot (a DOM másolatát) minden összetevőjéhez. Ahhoz, hogy frissítsen valamit egy webalkalmazásban, a React összehasonlítja a valódi DOM-ot a virtuális DOM-mal. Ha bármilyen változás történik, akkor a React elindítja az összetevő frissítését.
#3. Egyirányú adatfolyam
A nagy komponenskészletet nem tudjuk kisebb komponensekre osztani adatáramlás nélkül. Biztosítani kell valamilyen módot az adatok áramlására a komponensek között.
A React lehetővé teszi, hogy az adatokat egyetlen irányban továbbítsuk egyik komponensről a másikra. Az adatok a szülőkomponensektől a gyermekkomponensek felé áramlanak. A gyermekkomponensek pedig nem tudják frissíteni az adatokat. Nincs mód az adatok visszaküldésére a szülőkomponensnek, mivel az adatfolyam egyirányú.
Először azt gondolhatja, hogy nem többirányú adatáramlás. Az egyirányú adatfolyam azonban nagyobb irányítást biztosít a többirányú adatfolyam felett.
Áttekintés
Sok más szolgáltatás is létezik, mint például a JSX, a feltételes renderelés stb.; másodlagosak. Láttuk a React könyvtár elsődleges funkcióit. Ha a React alkalmazásairól van szó, szinte bármilyen típusú webes alkalmazást készíthetünk vele. A React közössége hatalmas. Sok csomagot találhat a React-tal való együttműködéshez.
React Native
A React Native egy JavaScript-keretrendszer, amelyet többplatformos mobilalkalmazások fejlesztésére használnak. Azt is a Facebook hozta létre és tartja karban.
A legtöbbeteket meg fog lepni a fenti kijelentés.
Készíthetünk mobilalkalmazásokat Androidra és IOS-re egyetlen keretrendszerrel?
Ha nem követi a technológiai világ frissítéseit, akkor nincs esélye, hogy megtudja. Igen, a React Native segítségével többplatformos (Android és IOS) alkalmazásokat is létrehozhatunk. És léteznek más keretrendszerek a többplatformos alkalmazásfejlesztéshez.
A React Native az egyik legnépszerűbb a maga nemében. Nem a legnépszerűbb a natív alkalmazások JavaScript-korlátozása miatt. De a fejlődési területein ragyog. Még olyan nagy cégek is használják, mint a Facebook, Instagram, Flipkart stb. Ez nem azt jelenti, hogy használnod kell. Ez azt jelenti, hogy platformközi, éles szintű alkalmazásokat építhetünk a React Native segítségével.
A fenti bekezdésben a Native Applications nevű szócsoportot használtam. Kik ők? Ez nem valami új típusú alkalmazás. A natív alkalmazás kifejezetten egy adott platformhoz készült. Android-alkalmazások Android-mobilokhoz, IOS-alkalmazások iPhone-mobilokhoz, Windows-alkalmazások Windows-hoz stb.,
Mi a baj a Native-val a React Native-ben? A React Native kívánságunk alapján létrehoz egy natív alkalmazást, amely mind az Android, mind az IOS számára megfelel. A React Native-vel fejlesztett alkalmazások ugyanúgy natívak, mint az Android Studio androidra, és hasonlóan az IOS-hez.
Talán emiatt nevezték el a készítők React Native-nek. Nem tény.
Ami a React Native funkcióit illeti, egy csomó olyan vár ránk. Lássunk néhány fő jellemzőjüket.
#1. Platformok közötti
Egyetlen kódbázissal egyszerre készíthetünk mobilalkalmazásokat Androidra és IOS-re is. Rengeteg időt és pénzt takarít meg a cégeknek.
#2. Hot or Live Reload
Ha van tapasztalata a React vagy React Native alkalmazásokban, akkor valószínűleg tud róla. Ez a funkció újratölti az egész alkalmazást új frissítésekkel, amikor módosítjuk a kódot. Nem kell minden alkalommal megnyomnunk az újratöltés gombot, amikor módosítjuk a kódot. Frissítse a kódot, és tekintse meg a változásokat. Ez az. Nem kell várnunk semmire, hacsak nincs hiba.
Ez másodlagos funkciónak tűnhet az Ön számára. De ha androidos fejlesztésből érkezik, keretrendszer nélkül, akkor megértheti ennek a funkciónak az értékét a React Native-ben.
#3. UI könyvtárak és közösség
A React Native számos beépített natív összetevőt tartalmaz. Közvetlenül használhatjuk őket minden további beállítás vagy telepítés nélkül. A natív összetevők natívnak tűnnek a megfelelő platformokon. A React Native alkalmazások felhasználói felülete megegyezik az IOS natív felhasználói felületével, valamint az Android natív felhasználói felületével. A React Native a Reacthoz hasonló összetevőket tartalmaz.
És ha a közösségről van szó. Nagy és folyamatosan növekszik. Minden nehézség nélkül segítséget kaphat a közösségtől, ha elakad benne.
Áttekintés
A React Native számos egyéb funkcióját megtalálhatja az interneten. Fedezze fel őket is, ha mobilalkalmazás-fejlesztéssel foglalkozik. A frontend fejlesztők natív alkalmazásokat is fejleszthetnek a React Native használatával. Ez megkönnyíti a platformok közötti mobilalkalmazások fejlesztését.
React vs. React Native
Van néhány hasonlóság és különbség a React és a React Native között. Nézzük meg őket.
Ha a React és a React Native alkalmazásairól van szó, ezek teljesen különböznek egymástól. De ha az elvekről van szó, hasonlónak tűnnek. Mind a React, mind a React Native tartalmaz összetevőket. És ugyanazokat az elveket követik az adott fejlesztés során.
Mindkettő a JavaScript nyelvet használja a fejlesztéshez. Lássunk mindkettőben egy egyszerű Hello, World alkalmazást.
Reagál
import React, { Component } from 'react';
import './App.css';
class App extends Component {
render() {
return (
<div className="container">
<h1>Hello, Wolrd!</h1>
</div>
);
}
}
export default App;
React Native
import React from 'react';
import { Text, View } from 'react-native';
const App = () => {
return (
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center"
}}>
<Text>Hello, world!</Text>
</View>
)
}
export default App;
Mint látható, mindkettő React csomagot használ. A szintaxis mindkét alkalmazásban hasonlónak tűnik, mivel a JSX nevű speciális jelölést használják. De ami a megjelenítési részt illeti, mindketten különböző dolgokat használnak. A React Virtuális DOM-ot, a React Native pedig Native API-t használ a felhasználói felület megjelenítéséhez.
Vannak olyan külső csomagok, mint a Redux, MobX stb., a React alkalmazások nyilatkozatkezeléséhez. Ugyanezek a csomagok használhatók a React Native alkalmazásokban is.
A React és a React Native egyaránt JavaScriptet használ. Tehát szinte minden JavaScript-csomagot használhatunk mindkettővel. Ez rengeteg csomagot ad hozzá mindkét csomagkönyvtárhoz.
A React és a React Native kapcsolatban állnak egymással. De különböző célokra használják őket.
Következtetés
A React és a React Native különbözik a végtermék és az alkalmazásplatformok tekintetében. De hasonló elveket követnek az adott alkalmazás fejlesztése során. Ha meg tudja tanulni a két keretrendszer egyikét, a React vagy React Native, felgyorsíthatja a másik tanulását. A React Native alkalmazások fejlesztéséhez azonban React ismeretekre van szükség. De, ez nem elég hozzá. Többet kell tudnunk a natív alkalmazások fejlesztéséről, mivel a React Native támogatása korlátozott.
Reméljük, hogy a jövőben teljes körű támogatást nyújt.
Ha el szeretné kezdeni a webes vagy mobilalkalmazások fejlesztését, akkor a React vagy a React Native kiválasztása minden bizonnyal hasznos lesz a jövőben. De ez nem kötelező.
A React fogalmainak elsajátítása egy kis tortúra ismeri a JavaScriptet. A hivatalos dokumentumok nagyszerű forrást jelentenek a React vagy a React Native használatának megkezdéséhez.
Boldog Tudás 🙂