{"id":7248,"date":"2022-06-09T16:40:36","date_gmt":"2022-06-09T14:40:36","guid":{"rendered":"http:\/\/www.unimedia.tech.mialias.net\/react-native-como-comenzar-con-reack\/"},"modified":"2024-01-04T10:45:35","modified_gmt":"2024-01-04T09:45:35","slug":"react-native-como-comenzar-con-reack","status":"publish","type":"post","link":"https:\/\/www.unimedia.tech\/es\/react-native-como-comenzar-con-reack\/","title":{"rendered":"React Native: C\u00f3mo empezar con React"},"content":{"rendered":"\n

<\/p>\n\n

\u00bfQu\u00e9 es React Native?<\/h2>\n\n

React Native es un framework popular y en r\u00e1pida expansi\u00f3n para crear aplicaciones m\u00f3viles<\/a> multiplataforma. Utiliza JavaScript y React para renderizar las interfaces de la aplicaci\u00f3n y viene con sus propios componentes de interfaz de usuario. Este marco permite a los desarrolladores aprovechar las ventajas del uso de JavaScript, como la rapidez de desarrollo y la facilidad de gesti\u00f3n de datos, al tiempo que permite a los usuarios utilizar sus SDK nativos para m\u00f3viles favoritos. Los desarrolladores pueden compartir c\u00f3digo entre plataformas con React Native, lo que es absolutamente impecable para los equipos que trabajan en varios proyectos.<\/p>\n\n

Tambi\u00e9n te puede interesar : ” Kit de desarrollo de la nube de AWS con Java”<\/a><\/p>\n\n

React Native: Componentes principales y componentes nativos<\/h2>\n\n

Es un marco de desarrollo de aplicaciones m\u00f3viles de c\u00f3digo abierto para que los usuarios desarrollen aplicaciones Android e iOS utilizando React y las capacidades de la plataforma nativa. Este marco te permite utilizar JavaScript para acceder a las API de tu plataforma y describir la apariencia de tu interfaz de usuario mediante componentes React: bloques de c\u00f3digo reutilizable y anidado.<\/p>\n\n

Componentes nativos<\/h3>\n\n

Usamos Java o Kotlin para escribir vistas en el desarrollo Android; en el desarrollo IOS usamos Swift u Objective C. Podemos invocar f\u00e1cilmente estas vistas con JavaScript usando componentes React usando Native. Crea las correspondientes vistas de Android e iOS para esos componentes en tiempo de ejecuci\u00f3n. Dado que los componentes nativos est\u00e1n respaldados por las mismas vistas que Android e iOS, las aplicaciones nativas se ven, se sienten y funcionan como cualquier otra aplicaci\u00f3n. Se trata de componentes respaldados por plataformas Componentes nativos<\/strong><\/a>.<\/strong><\/p>\n\n

Componentes b\u00e1sicos<\/h3>\n\n

React viene con un conjunto importante de Componentes nativos listos para usar que podemos utilizar para empezar a construir nuestra aplicaci\u00f3n al instante. Estos son los de React Native<\/strong><\/a>. Sin embargo, React nos da la oportunidad de construir nuestros propios Componentes Nativos tanto para Android como para iOS que se adapten a las necesidades individuales de nuestra app. React Native tiene muchos componentes b\u00e1sicos, pero aqu\u00ed s\u00f3lo te mostrar\u00e9 los componentes b\u00e1sicos m\u00e1s utilizados a continuaci\u00f3n.<\/p>\n\n

Componentes de interfaz de usuario React Native<\/strong><\/td>Android View<\/strong><\/td>Vista IOS<\/strong><\/td>Web Anal\u00f3gica<\/strong><\/td>Descripci\u00f3n<\/strong><\/td><\/tr>
<View><\/code><\/td><ViewGroup><\/code><\/td><UIView><\/code><\/td>Sin desplazamiento <div><\/code><\/td>Un contenedor que admite dise\u00f1o con flexbox, estilo, algunos controles t\u00e1ctiles y de accesibilidad.<\/td><\/tr>
<Text><\/code><\/td><TextView><\/code><\/td><UITextView><\/code><\/td><p><\/code><\/td>Muestra, estiliza y anida cadenas de texto e incluso gestiona eventos t\u00e1ctiles.<\/td><\/tr>
<Image><\/code><\/td><ImageView><\/code><\/td><UIImageView><\/code><\/td><img><\/code><\/td>Muestra diferentes tipos de im\u00e1genes<\/td><\/tr>
<ScrollView><\/code><\/td><ScrollView><\/code><\/td><UIScrollView><\/code><\/td><div><\/code><\/td>Un contenedor de desplazamiento gen\u00e9rico que puede contener varios componentes y vistas<\/td><\/tr>
<TextInput><\/code><\/td><EditText><\/code><\/td><UITextField><\/code><\/td><input type=\"text\"><\/code><\/td>Permite al usuario introducir texto<\/td><\/tr><\/tbody><\/table><\/figure>\n\n

Configuraci\u00f3n del entorno de desarrollo<\/h2>\n\n

Hay dos maneras de configurar la participaci\u00f3n en el desarrollo de tu primer proyecto React Native.<\/p>\n\n

Expo CLI<\/h3>\n\n

La mejor manera de empezar para los principiantes es desarrollar una aplicaci\u00f3n utilizando Expo CLI<\/strong>. Expo es un conjunto de herramientas construidas para React Native, y lo m\u00e1s \u00fatil para nosotros ahora es que nos permite construir apps usando este framework en el momento justo. S\u00f3lo necesitas una versi\u00f3n actualizada de Node.js<\/strong> y un tel\u00e9fono o emulador. Si quieres probar Native directamente en tu navegador web sin instalar ninguna herramienta, puedes probar Snack.expo.<\/strong> dev para empezar con cualquier proyecto que implique React Native.<\/p>\n\n

React Native CLI<\/h3>\n\n

Si tienes experiencia en desarrollo m\u00f3vil, puedes utilizar React Native CLI<\/strong>. Xcode o Android Studio es necesario para empezar con React Native CLI<\/strong>. Si ya tienes instalada una de estas aplicaciones, podr\u00e1s empezar en unos minutos. Si a\u00fan no est\u00e1n disponibles, espere pasar una hora instal\u00e1ndolos y configur\u00e1ndolos.<\/p>\n\n

Empezar con la Expo CLI en Windows<\/h2>\n\n

Si tienes instalado Node 12 LTS o la \u00faltima versi\u00f3n, puedes utilizar npm para instalar la utilidad de l\u00ednea de comandos Expo CLI. De lo contrario, es posible que tenga que instalar primero Node 12 LTS o la versi\u00f3n m\u00e1s reciente. Puedes comprobar la versi\u00f3n del Nodo que est\u00e1s utilizando escribiendo este comando a continuaci\u00f3n:<\/p>\n\n

C:Usersuser>node -v\nC:Usersuser>node --version<\/code><\/pre>\n\n
\"
Nota: Si ves que tu versi\u00f3n de Node es la 12 o superior, est\u00e1s listo. De lo contrario, es posible que tenga que actualizar la versi\u00f3n de Node.<\/figcaption><\/figure>\n\n
Ahora ejecute el siguiente comando para instalar la Expo CLI <\/strong>en su m\u00e1quina.<\/p>\n\n
C:Usersuser>npm install -g expo-cli.<\/code><\/pre>\n\n
\n
\"<\/figure>\n<\/figure>\n\n
Dependiendo de la configuraci\u00f3n de su PC y la velocidad de Internet, puede tomar un tiempo para instalar Expo CLI<\/strong> en su PC (alrededor de 5-10 min). <\/p>\n\n
Despu\u00e9s de completar el proceso de instalaci\u00f3n, escriba este comando para ver la versi\u00f3n de Expo CLI<\/strong>.<\/p>\n\n
C:Usersuser>expo --version<\/code><\/pre>\n\n
\"<\/figure>\n\n
Ahora que todo est\u00e1 configurado y funcionando, estamos listos para crear nuestro primer proyecto con React Native<\/strong>.<\/p>\n\n
Creaci\u00f3n de nuestra primera aplicaci\u00f3n React Native<\/h2>\n\n
Puedes crear la carpeta del proyecto donde quieras, depende de ti. Voy a crear una carpeta en mi escritorio llamada“ReactNative<\/strong>” Ahora escriba los siguientes comandos para crear su primera aplicaci\u00f3n:<\/p>\n\n
C:UsersuserDesktopReactNative>expo init MyFirstApp<\/code><\/pre>\n\n
\"
Nota: Le dar\u00e1 a seleccionar una opci\u00f3n. Despu\u00e9s, puedes elegir el que prefieras. Elegir\u00e9 la que est\u00e1 en blanco con una aplicaci\u00f3n m\u00ednima tan limpia como un lienzo vac\u00edo.<\/figcaption><\/figure>\n\n
Ahora el proyecto est\u00e1 listo. Para ejecutar el proyecto, tenemos que el directorio del proyecto y ejecutar los siguientes comandos.<\/p>\n\n
C:UsersuserDesktopReactNative>cd MyFirstApp<\/code><\/pre>\n\n
Ahora escriba los siguientes comandos a continuaci\u00f3n para iniciar el servidor de desarrollo para usted. Puedes abrir iOS, Android o Web desde aqu\u00ed o ejecutarlos directamente con el comando espec\u00edfico.<\/p>\n\n
C:UsersuserDesktopReactNativeMyFirstApp>npm start\nC:UsersuserDesktopReactNativeMyFirstApp>npm run android\nC:UsersuserDesktopReactNativeMyFirstApp>npm run ios\nC:UsersuserDesktopReactNativeMyFirstApp>npm run web<\/code><\/pre>\n\n
El resultado podr\u00eda ser el siguiente:<\/p>\n\n
\"<\/figure>\n\n
http:\/\/localhost:19002\/<\/a> es la URL de las herramientas de desarrollo. Visite esta URL en su navegador favorito. Y haz clic en el enlace donde quieras ver el resultado. Voy a hacer clic en “Ejecutar en el navegador web<\/strong>” el resultado debe ser el siguiente:<\/p>\n\n
\"<\/figure>\n\n
Ahora abre el archivo App.js<\/strong> con tu editor de c\u00f3digo favorito en la carpeta del proyecto. Voy a abrirlo en Bloc de notas++<\/em><\/strong> y a\u00f1adirle algo de c\u00f3digo b\u00e1sico.<\/p>\n\n
import {StatusBar} from 'expo-status-bar';\nimport {StyleSheet, Text, View} from 'react-native';\n\nexport default function app(){\n    return(\n        <View style = {styles.container}>\n            <Text style = {style.cong}> Congratulations! <\/Text>\n            <Text> You've built your first React Native App. <\/Text>\n            <StatusBar style = \"auto\"\/>\n        <\/View>\n    );\n}\n\nconst style = StyleSheet.create({\n    container: {\n        flex: 1,\n        backgroundColor: '#fff',\n        alignItems: 'center',\n        justifyContent: 'center',\n    },\n    cong:{\n        backgroundColor: 'red',\n        padding: '10px',\n    },\n});<\/code><\/pre>\n\n
\"<\/figure>\n\n
C\u00f3mo React Native ayuda a construir una fant\u00e1stica carrera de desarrollo de aplicaciones<\/h2>\n\n
React Native le permite dirigirse directamente a los dispositivos m\u00f3viles en lugar de a los navegadores, y puede utilizar esta funci\u00f3n para componer aplicaciones nativas para android y iPhone. Es una tecnolog\u00eda fant\u00e1stica en la que introducirse. Si quieres aprender React, a continuaci\u00f3n te damos algunas razones por las que deber\u00edas elegirlo para construir una fant\u00e1stica carrera en el desarrollo de aplicaciones.<\/p>\n\n