Κατανόηση του React vs React Native

Εμείς οι άνθρωποι θα μπερδευτούμε με πολλά πράγματα. Η σύγχυση μπορεί να προκύψει με βάση διαφορετικά χαρακτηριστικά των πραγμάτων. Ο πιο συνηθισμένος τρόπος για να μπερδευτείτε με διαφορετικά πράγματα είναι τα ονόματά τους.

Οι άνθρωποι πρώτα θα γνωρίσουν τα ονόματα ενός νέου πράγματος. Είτε πρόκειται για άλλο άτομο, ζώο, προϊόν, λογισμικό κ.λπ., Θα ψάξουν με τα ονόματά τους και μετά θα μάθουν για διάφορα χαρακτηριστικά, εφαρμογές, ιστορία κ.λπ..,

Γιατί είναι όλο αυτό;

Ναι, οι άνθρωποι συχνά μπερδεύονται με τους όρους (ονόματα) React και React Native. Εάν οι μη τεχνολογικοί τύποι βλέπουν τα ονόματα React και React Native, θα υποθέσουν το Reactive Native ως επέκταση του React στις περισσότερες περιπτώσεις. Ακόμη και κάποιοι τεχνικοί μπορεί να σκέφτονται με τον ίδιο τρόπο αν έχουν 0% γνώση σε αυτούς τους τομείς.

Ποια είναι αυτά τα πράγματα στην πραγματικότητα; Γιατί συχνά οι άνθρωποι μπερδεύονται με αυτούς, όχι με άλλους;

Αντιδρώ και React Native είναι δύο πλαίσια. Τα ονόματα μοιάζουν με μια επιπλέον λέξη μεταξύ τους. Έτσι, οι άνθρωποι συχνά μπερδεύονται λόγω των ονομάτων τους με την πρώτη ματιά. Αν έχετε την ίδια σύγχυση, τότε είστε στο σωστό μέρος για να ξετυλίξετε το μυστήριο πίσω από αυτά.

Ας ανακαλύψουμε.

Αντιδρώ

Το React είναι μια βιβλιοθήκη JavaScript που χρησιμοποιείται για τη δημιουργία διαδικτυακών εφαρμογών μιας σελίδας. Είναι μια από τις πιο δημοφιλείς βιβλιοθήκες για τη δημιουργία διεπαφών χρήστη (frontend) για τον ιστό. Ίσως μπορούμε να πούμε ότι είναι η πιο δημοφιλής βιβλιοθήκη αυτή τη στιγμή. Δημιουργείται και διατηρείται από το Facebook. Είναι επίσης γνωστό ως ReactJS.

Καθώς έχω εμπειρία με το React, μπορώ να πω ότι είναι όμορφο και απλό να μαθαίνεις και να χτίζεις. Είναι μια βιβλιοθήκη. Έτσι, μπορούμε να χτίσουμε ό,τι θέλουμε και όπως θέλουμε αξιοποιώντας τα χαρακτηριστικά του. Δεν υπάρχουν αυστηροί κανόνες που πρέπει να τηρούνται κατά την ανάπτυξη εφαρμογών με το React. Έτσι, θα έχουμε ελευθερία.

Το React έχει τόσα πολλά ωραία χαρακτηριστικά. Ας τους δούμε.

#1. Συστατικά

Στο React, τα πάντα είναι ένα συστατικό. Είναι σαν ένα δομικό στοιχείο της διαδικτυακής εφαρμογής. Μπορούμε να σχηματίσουμε μεγάλα εξαρτήματα συνδυάζοντας τα μικρά συστατικά. Κάθε στοιχείο έχει τη δική του κατάσταση και έλεγχο. Τα στοιχεία ελέγχουν τη διεπαφή χρήστη και αποφασίζουν τι θα εμφανίσουν στους χρήστες με βάση την κατάστασή της.

Τα στοιχεία είναι τα πάντα στο React. Και είναι επαναχρησιμοποιήσιμα. Γράψε μια φορά και χρησιμοποιήστε το παντού.

Πρέπει να γράφουμε εξαρτήματα με μεγάλη προσοχή. Κάνει τα πράγματα εύκολο να διατηρηθούν όταν η εφαρμογή μας μεγαλώνει. Εάν γράψουμε πολλούς κώδικα σε ένα μόνο στοιχείο, θα γίνει ένα βάρος για εμάς να το διατηρήσουμε τελικά. Τα συστατικά του React πρέπει να είναι μικρά και γλυκά. Κάνουν τη ζωή των προγραμματιστών παράδεισο και κόλαση.

#2. Εικονικό DOM

Θα έπρεπε να έχετε δει κάτι σαν φορτωτής μέσα σε ένα κουμπί. Και στις πλατφόρμες μέσων κοινωνικής δικτύωσης, τα likes αυξάνονται μόλις το πατήσετε. Τις προηγούμενες ημέρες του ιστού, πρέπει να φορτώσουμε ξανά τα πάντα για να λάβουμε τις πληροφορίες. Όμως, τώρα ένα single που πρέπει να ενημερωθεί θα ανανεωθεί για εμάς χωρίς να αγγίξει άλλα πράγματα. Τι είναι αυτό;

Όπως είδαμε προηγουμένως, τα πάντα στο React είναι ένα στοιχείο. Τα προγράμματα περιήγησης διατηρούν τη δομή DOM για τα στοιχεία μιας εφαρμογής Ιστού. Όταν ένα μέρος της διαδικτυακής εφαρμογής χρειάζεται να ενημερωθεί, πρέπει να το ενημερώσουμε χρησιμοποιώντας τους χειρισμούς DOM. Το React κάνει το ίδιο πράγμα αποτελεσματικά.

Το React δημιουργεί ένα εικονικό DOM (αντίγραφο DOM) για όλα τα στοιχεία του. Για να ενημερώσετε κάτι σε μια εφαρμογή Ιστού, το React συγκρίνει το πραγματικό DOM με το εικονικό DOM. Εάν υπάρχουν αλλαγές, τότε το React ενεργοποιεί την ενημέρωση του στοιχείου.

#3. Μονόδρομη ροή δεδομένων

Δεν μπορούμε να διαιρέσουμε το μεγάλο σύνολο στοιχείων σε μικρότερα στοιχεία χωρίς ροή δεδομένων. Πρέπει να υπάρχει κάποιος τρόπος για τη ροή των δεδομένων μεταξύ των στοιχείων.

Το React μας επιτρέπει να περάσουμε τα δεδομένα από ένα στοιχείο σε ένα άλλο στοιχείο προς μία μόνο κατεύθυνση. Τα δεδομένα ρέουν από τα μητρικά στοιχεία στα θυγατρικά στοιχεία. Και τα θυγατρικά στοιχεία δεν μπορούν να ενημερώσουν τα δεδομένα. Δεν υπάρχει τρόπος να στείλετε πίσω τα δεδομένα στο γονικό στοιχείο, καθώς η ροή δεδομένων είναι μονής κατεύθυνσης.

Μπορεί πρώτα να σκεφτείτε ότι δεν ρέει δεδομένα πολλαπλών κατευθύνσεων. Όμως, μια ροή δεδομένων μίας κατεύθυνσης μας δίνει περισσότερο έλεγχο στη ροή δεδομένων πολλαπλών κατευθύνσεων.

ΣΦΑΙΡΙΚΗ ΕΙΚΟΝΑ

Υπάρχουν πολλές άλλες δυνατότητες όπως JSX, Conditional Rendering κ.λπ.. είναι δευτερεύουσες. Έχουμε δει τα κύρια χαρακτηριστικά της βιβλιοθήκης React. Όσον αφορά τις εφαρμογές του React, μπορούμε να δημιουργήσουμε σχεδόν κάθε τύπο web εφαρμογής με αυτό. Η κοινότητα του React είναι τεράστια. Μπορείτε να βρείτε πολλά πακέτα για να εργαστείτε με το React.

React Native

Το React Native είναι ένα πλαίσιο JavaScript που χρησιμοποιείται για την ανάπτυξη εφαρμογών για κινητές συσκευές πολλαπλών πλατφορμών. Δημιουργείται και διατηρείται επίσης από το Facebook.

Οι περισσότεροι από εσάς θα εκπλαγείτε από την παραπάνω δήλωση.

Μπορούμε να δημιουργήσουμε εφαρμογές για κινητά για Android και IOS με ένα μόνο πλαίσιο;

Εάν δεν ακολουθείτε τις ενημερώσεις στον κόσμο της τεχνολογίας, τότε δεν υπάρχει περίπτωση να το γνωρίζετε. Ναι, μπορούμε να δημιουργήσουμε εφαρμογές πολλαπλών πλατφορμών (τόσο για Android όσο και για IOS) χρησιμοποιώντας το React Native. Και υπάρχουν και άλλα πλαίσια για ανάπτυξη εφαρμογών πολλαπλών πλατφορμών.

Το React Native είναι ένα από τα πιο δημοφιλή στο είδος του. Δεν είναι το πιο δημοφιλές λόγω των περιορισμών JavaScript σε εγγενείς εφαρμογές. Όμως, λάμπει στους τομείς ανάπτυξής της. Ακόμη και μεγάλες εταιρείες όπως το Facebook, το Instagram, το Flipkart κ.λπ.., το χρησιμοποιούν. Δεν σημαίνει ότι πρέπει να το χρησιμοποιήσετε. Σημαίνει ότι μπορούμε να δημιουργήσουμε εφαρμογές σε επίπεδο παραγωγής πολλαπλών πλατφορμών με το React Native.

Έχω χρησιμοποιήσει μια ομάδα λέξεων που ονομάζονται Native Applications στην παραπάνω παράγραφο. Τι είναι? Δεν είναι κάποιο νέο είδος εφαρμογής. Μια εγγενής εφαρμογή δημιουργείται ειδικά για μια συγκεκριμένη πλατφόρμα. Εφαρμογές Android για κινητά Android, εφαρμογές IOS για κινητά iPhone, εφαρμογές Windows για Windows κ.λπ..,

Τι συμβαίνει με το Native στο React Native; Ερχόμενοι σε αυτό, το React Native δημιουργεί μια εγγενή εφαρμογή που ταιριάζει τόσο στο Android όσο και στο IOS με βάση την επιθυμία μας. Οι εφαρμογές που αναπτύχθηκαν με το React Native είναι εγγενείς όπως το Android Studio για android και παρόμοια για το IOS.

Ίσως οι δημιουργοί να το ονόμασαν React Native εξαιτίας αυτού. Δεν είναι γεγονός.

Όσον αφορά τις δυνατότητες του React Native, υπάρχουν πολλά από αυτά που μας περιμένουν. Ας δούμε μερικά από τα κύρια χαρακτηριστικά τους.

#1. Cross-Platform

Μπορούμε να δημιουργήσουμε εφαρμογές για κινητά τόσο για Android όσο και για IOS ταυτόχρονα με μια ενιαία βάση κώδικα. Εξοικονομεί πολύ χρόνο και χρήμα για τις εταιρείες.

#2. Hot ή Live Reload

Εάν έχετε εμπειρία σε εφαρμογές React ή React Native, τότε μάλλον το γνωρίζετε. Αυτή η λειτουργία φορτώνει ξανά ολόκληρη την εφαρμογή με νέες ενημερώσεις όταν αλλάζουμε τον κωδικό. Δεν χρειάζεται να πατάμε το κουμπί επαναφόρτωσης κάθε φορά που αλλάζουμε τον κωδικό. Ενημερώστε τον κωδικό και δείτε τις αλλαγές. Αυτό είναι. Δεν χρειάζεται να περιμένουμε τίποτα εκτός και αν υπάρχει κάποιο σφάλμα.

Μπορεί να φαίνεται σαν δευτερεύον χαρακτηριστικό για εσάς. Αλλά, εάν προέρχεστε από την ανάπτυξη Android χωρίς κανένα πλαίσιο, θα καταλάβετε την αξία αυτής της δυνατότητας στο React Native.

#3. UI Βιβλιοθήκες και Κοινότητα

Υπάρχουν πολλά ενσωματωμένα εγγενή στοιχεία στο React Native. Μπορούμε να τα χρησιμοποιήσουμε απευθείας χωρίς καμία πρόσθετη ρύθμιση ή εγκατάσταση. Τα εγγενή στοιχεία φαίνονται εγγενή στις αντίστοιχες πλατφόρμες. Το περιβάλλον χρήστη των εφαρμογών React Native ταιριάζει με το εγγενές περιβάλλον χρήστη του IOS καθώς και το εγγενές περιβάλλον εργασίας του Android. Το React Native έχει στοιχεία παρόμοια με το React.

Και όταν πρόκειται για κοινότητα. Είναι μεγάλο και αυξάνεται συνεχώς. Μπορείτε να λάβετε βοήθεια χωρίς καμία δυσκολία από την κοινότητα όταν είστε κολλημένοι σε αυτήν.

ΣΦΑΙΡΙΚΗ ΕΙΚΟΝΑ

Μπορείτε να βρείτε πολλές άλλες δυνατότητες του React Native στο διαδίκτυο. Εξερευνήστε τα επίσης εάν σκοπεύετε να αναπτύξετε εφαρμογές για κινητά. Ένας προγραμματιστής frontend μπορεί επίσης να αναπτύξει εγγενείς εφαρμογές χρησιμοποιώντας το React Native. Κάνει εύκολη την ανάπτυξη εφαρμογών για κινητές συσκευές πολλαπλών πλατφορμών.

React Vs. React Native

Υπάρχουν ορισμένες ομοιότητες και διαφορές μεταξύ του React και του React Native. Ας τους δούμε.

Όταν πρόκειται για εφαρμογές του React και του React Native, είναι εντελώς διαφορετικές μεταξύ τους. Αλλά, όταν πρόκειται για τις αρχές, μοιάζουν. Τόσο το React όσο και το React Native έχουν στοιχεία. Και ακολουθούν τις ίδιες αρχές στην αντίστοιχη ανάπτυξη.

Και οι δύο χρησιμοποιούν τη γλώσσα JavaScript για ανάπτυξη. Ας δούμε μια απλή εφαρμογή Hello, World και στα δύο.

Αντιδρώ

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;

Όπως μπορείτε να δείτε, και οι δύο χρησιμοποιούν το πακέτο React. Η σύνταξη φαίνεται παρόμοια και στις δύο εφαρμογές καθώς χρησιμοποιούν μια ειδική σήμανση που ονομάζεται JSX. Αλλά όταν πρόκειται για το μέρος της απόδοσης, και οι δύο χρησιμοποιούν διαφορετικά πράγματα. Το React χρησιμοποιεί Virtual DOM και το React Native χρησιμοποιεί Native API για απόδοση διεπαφής χρήστη.

Υπάρχουν κάποια εξωτερικά πακέτα όπως Redux, MobX κ.λπ., για τη διαχείριση δηλώσεων των εφαρμογών React. Τα ίδια πακέτα μπορούν να χρησιμοποιηθούν και στις εφαρμογές React Native.

Τόσο το React όσο και το React Native χρησιμοποιούν JavaScript. Έτσι, μπορούμε να χρησιμοποιήσουμε σχεδόν κάθε πακέτο JavaScript και με τα δύο. Αυτό προσθέτει πολλά πακέτα και στις δύο βιβλιοθήκες πακέτων τους.

Το React και το React Native σχετίζονται μεταξύ τους. Όμως, χρησιμοποιούνται για διαφορετικούς σκοπούς.

συμπέρασμα

Το React και το React Native είναι διαφορετικά όσον αφορά το τελικό προϊόν και τις πλατφόρμες εφαρμογών. Όμως, ακολουθούν παρόμοιες αρχές στην ανάπτυξη της αντίστοιχης εφαρμογής. Εάν μπορείτε να μάθετε ένα από τα δύο πλαίσια, React ή React Native, μπορείτε να επιταχύνετε την εκμάθηση ενός άλλου. Ωστόσο, απαιτείται γνώση του React για την ανάπτυξη εφαρμογών React Native. Αλλά, δεν είναι αρκετό για αυτό. Πρέπει να μάθουμε περισσότερα για την ανάπτυξη εγγενών εφαρμογών καθώς η υποστήριξη είναι περιορισμένη στο React Native.

Ας ελπίσουμε ότι τελικά θα εξελιχθεί για πλήρη υποστήριξη στο μέλλον.

Αν θέλετε να ξεκινήσετε με την ανάπτυξη εφαρμογών ιστού ή κινητών, τότε η επιλογή React ή React Native σίγουρα θα σας ωφελήσει στο μέλλον. Δεν είναι όμως υποχρεωτικό.

Η εκμάθηση των εννοιών του React είναι μια βόλτα γνωρίζω JavaScript. Τα επίσημα έγγραφα θα είναι μια εξαιρετική πηγή για να ξεκινήσετε με το React ή το React Native.

Ευτυχισμένος Γνωρίζοντας 🙂