Què és React Native?

React Native és un marc popular i en ràpida expansió per crear aplicacions mòbils multiplataforma. Utilitza JavaScript i React per representar interfícies d’aplicacions i inclou els seus propis components d’interfície d’usuari. Aquest marc permet als desenvolupadors aprofitar els avantatges de l’ús de JavaScript, com ara un temps de desenvolupament ràpid i una gestió senzilla de dades, alhora que permet als usuaris utilitzar els seus SDK mòbils natius preferits. Els desenvolupadors poden compartir codi entre plataformes amb React Native, que és absolutament impecable per als equips que treballen en diversos projectes.

També us pot interessar: “AWS Cloud Development Kit using Java”

React Native: components bàsics i components natius

És un marc de desenvolupament d’aplicacions mòbils de codi obert per a què els usuaris desenvolupin aplicacions per a Android i iOS mitjançant React i les capacitats de la plataforma nativa. Aquest marc us permet utilitzar JavaScript per accedir a les API de la vostra plataforma i descriure l’aspecte de la vostra interfície d’usuari mitjançant components React: blocs de codi imbricat reutilitzable.

Components natius

Utilitzem Java o Kotlin per escriure vistes al desenvolupament d’Android; al desenvolupament d’IOS fem servir Swift o Objective C. Podem invocar fàcilment aquestes vistes amb JavaScript mitjançant components React amb Native. Crea les vistes d’Android i iOS corresponents per a aquests components en temps d’execució. Com que els components natius estan recolzats per les mateixes vistes que Android i iOS, les aplicacions natives es veuen, senten i funcionen com qualsevol altra aplicació. Aquests són components recolzats per la plataforma, components natius .

Components bàsics

React inclou un conjunt de components natius importants i llestos per utilitzar que podem utilitzar per començar a crear la nostra aplicació a l’instant. Aquests són els components bàsics de React Native. Tanmateix, React ens ofereix l’oportunitat de crear els nostres propis components natius tant per a Android com per a iOS per adaptar-nos a les necessitats individuals de la nostra aplicació. React Native té molts components bàsics, us mostrarem els components bàsics més utilitzats:

Configuració de l’entorn de desenvolupament

Hi ha dues maneres de configurar la participació en el desenvolupament del vostre primer projecte React Native.

Expo CLI

La millor manera per als principiants de començar és desenvolupar una aplicació mitjançant Expo CLI . Expo és un conjunt d’eines creades per a React Native, i el més útil per a nosaltres ja que ens permet crear aplicacions utilitzant aquest marc a temps. Només necessiteu una versió actualitzada de Node.js i un telèfon o un emulador. Si voleu provar Native directament al vostre navegador web sense instal·lar cap eina, podeu provar Snack.expo.dev per començar amb qualsevol projecte que inclogui React Native.

Reacciona CLI nativa

Si teniu experiència en desenvolupament mòbil, podeu utilitzar React Native CLI . Xcode o Android Studio és necessari per començar amb React Native CLI . Si ja teniu instal·lada una d’aquestes aplicacions, hauríeu de poder començar en pocs minuts. Si encara no estan disponibles, espereu passar una hora instal·lant-los i configurant-los.

Començant amb l’Expo CLI a Windows

Si teniu instal·lat el Node 12 LTS o la darrera versió, podeu utilitzar npm per instal·lar la utilitat de línia d’ordres Expo CLI. En cas contrari, primer haureu d’instal·lar Node 12 LTS o la versió més recent. Podeu comprovar la vostra versió del node que feu servir escrivint aquesta ordre a continuació:

C:Usersuser>node -v
C:Usersuser>node --version

Ara executeu l’ordre següent per instal·lar l’ Expo CLI a la vostra màquina.

C:Usersuser>npm install -g expo-cli.

Depenent de la configuració del vostre ordinador i la velocitat d’Internet, pot trigar una estona a instal·lar Expo CLI al vostre ordinador (uns 5-10 minuts).

Després de completar el procés d’instal·lació, escriviu aquesta ordre per veure la versió de l’Expo CLI .

C:Usersuser>expo --version

Ara que tot està configurat i funcionant, estem bé per crear el nostre primer projecte amb React Native .

Creant la nostra primera aplicació nativa React

Podeu crear la carpeta del projecte allà on vulgueu, i depèn de vosaltres. Crearé una carpeta al meu escriptori anomenada ” ReactNative ” Ara escriviu les ordres següents per crear la vostra primera aplicació:

C:UsersuserDesktopReactNative>expo init MyFirstApp

Ara el projecte està llest! Per executar el projecte, hem d’anar al directori del projecte i executar les ordres següents.

C:UsersuserDesktopReactNative>cd MyFirstApp

Ara escriviu les ordres següents a continuació per iniciar el servidor de desenvolupament. Podeu obrir iOS, Android o Web des d’aquí o executar-los directament amb l’ordre específica.

C:UsersuserDesktopReactNativeMyFirstApp>npm start
C:UsersuserDesktopReactNativeMyFirstApp>npm run android
C:UsersuserDesktopReactNativeMyFirstApp>npm run ios
C:UsersuserDesktopReactNativeMyFirstApp>npm run web

El resultat podria ser el següent:

http://localhost:19002/ és l’URL de les eines de desenvolupament. Visiteu aquest URL al vostre navegador web preferit. I fes clic a l’enllaç on vulguis per veure el resultat. Vaig a fer clic a ” Executar al navegador web “, el resultat hauria de ser el següent:

Ara obriu el fitxer App.js amb el vostre editor de codi preferit a la carpeta del projecte. L’obriré al Bloc de notes ++ i afegiré algun codi bàsic.

import {StatusBar} from 'expo-status-bar';
import {StyleSheet, Text, View} from 'react-native';

export default function app(){
    return(
        <View style = {styles.container}>
            <Text style = {style.cong}> Congratulations! </Text>
            <Text> You've built your first React Native App. </Text>
            <StatusBar style = "auto"/>
        </View>
    );
}

const style = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
    cong:{
        backgroundColor: 'red',
        padding: '10px',
    },
});

Com React Native ajuda a construir una carrera fantàstica en el desenvolupament d’aplicacions

React Native us permet orientar directament a dispositius mòbils en comptes de navegadors, i podeu utilitzar aquesta funció per compondre aplicacions natives per a Android i iPhone. És una tecnologia fantàstica per entrar-hi. Si voleu aprendre React, a continuació hi ha alguns motius pels quals hauríeu de triar construir una carrera fantàstica en el desenvolupament d’aplicacions.

• És fàcil d’aprendre
• És similar a React.js, de manera que no cal que aprengueu coses addicionals
• Falta de competència
• És un servei que paga molt

El marc React Native és una plataforma dinàmica que us ajuda a crear aplicacions mòbils eficients i instintives utilitzant els vostres coneixements existents de JavaScript. React us facilita la creació d’aplicacions mòbils que s’executen en una varietat de plataformes com Android i iOS amb codis perfectes sense comprometre la interfície d’usuari i l’experiència de l’usuari. React Native, sens dubte, anirà bé a la indústria informàtica.

En conclusió, React Native és un marc popular per al desenvolupament d’aplicacions mòbils perquè ofereix suport multiplataforma tant per a Android com per a iOS sense violar la interfície o l’experiència de l’usuari.

React Native ha demostrat ser una manera eficaç de crear aplicacions multiplataforma d’alt rendiment. La clau és trobar l’equilibri adequat entre les tecnologies natives i web.

Trobeu els nostres altres blocs de React aquí.

Unimedia Technology

Aquí a Unimedia Technology tenim un equip de desenvolupadors nadius al núvol que us poden ajudar a desenvolupar les vostres aplicacions AWS i Azure més complexes.