{"id":24572,"date":"2024-01-06T19:41:25","date_gmt":"2024-01-06T18:41:25","guid":{"rendered":"https:\/\/nelkodev.com\/blog\/como-crear-aplicaciones-moviles-con-react-native-y-javascript\/"},"modified":"2024-06-03T18:44:28","modified_gmt":"2024-06-03T17:44:28","slug":"como-crear-aplicaciones-moviles-con-react-native-y-javascript","status":"publish","type":"post","link":"https:\/\/nelkodev.com\/en\/blog\/how-to-create-mobile-applications-with-react-native-and-javascript\/","title":{"rendered":"How to Create Mobile Applications with React Native and JavaScript"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #ffffff;color:#ffffff\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #ffffff;color:#ffffff\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nelkodev.com\/en\/blog\/how-to-create-mobile-applications-with-react-native-and-javascript\/#Introduccion\" >Introduction<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nelkodev.com\/en\/blog\/how-to-create-mobile-applications-with-react-native-and-javascript\/#%C2%BFQue_es_React_Native\" >What is React Native?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nelkodev.com\/en\/blog\/how-to-create-mobile-applications-with-react-native-and-javascript\/#Principios_basicos_de_React_Native\" >React Native Basics<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nelkodev.com\/en\/blog\/how-to-create-mobile-applications-with-react-native-and-javascript\/#Configuracion_del_entorno_de_desarrollo\" >Development environment configuration<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nelkodev.com\/en\/blog\/how-to-create-mobile-applications-with-react-native-and-javascript\/#Instalacion_de_Nodejs_y_npm\" >Installing Node.js and npm<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nelkodev.com\/en\/blog\/how-to-create-mobile-applications-with-react-native-and-javascript\/#Instalacion_de_Expo_CLI_o_React_Native_CLI\" >Installing Expo CLI or React Native CLI<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nelkodev.com\/en\/blog\/how-to-create-mobile-applications-with-react-native-and-javascript\/#Creacion_de_un_nuevo_proyecto_con_React_Native\" >Creating a new project with React Native<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nelkodev.com\/en\/blog\/how-to-create-mobile-applications-with-react-native-and-javascript\/#Estructura_de_una_aplicacion_en_React_Native\" >Structure of an application in React Native<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nelkodev.com\/en\/blog\/how-to-create-mobile-applications-with-react-native-and-javascript\/#Componentes_en_React_Native\" >Components in React Native<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/nelkodev.com\/en\/blog\/how-to-create-mobile-applications-with-react-native-and-javascript\/#Estilizando_componentes_con_StyleSheet\" >Styling components with StyleSheet<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/nelkodev.com\/en\/blog\/how-to-create-mobile-applications-with-react-native-and-javascript\/#Navegacion_entre_pantallas\" >Navigation between screens<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/nelkodev.com\/en\/blog\/how-to-create-mobile-applications-with-react-native-and-javascript\/#Gestion_del_estado_con_Hooks_y_Context_API\" >State management with Hooks and Context API<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/nelkodev.com\/en\/blog\/how-to-create-mobile-applications-with-react-native-and-javascript\/#Llamadas_a_APIs_y_manejo_de_datos_remotos\" >API calls and remote data management<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/nelkodev.com\/en\/blog\/how-to-create-mobile-applications-with-react-native-and-javascript\/#Testing_y_depuracion\" >Testing and debugging<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/nelkodev.com\/en\/blog\/how-to-create-mobile-applications-with-react-native-and-javascript\/#Preparacion_para_la_publicacion\" >Preparation for publication<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/nelkodev.com\/en\/blog\/how-to-create-mobile-applications-with-react-native-and-javascript\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Introduccion\"><\/span>Introduction<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>In recent years, the need to build cross-platform mobile applications has led to the emergence of several frameworks that allow developers to use a single code base to deploy apps on iOS and Android. Among all the options available, React Native, created by Facebook, has established itself as one of the most popular and powerful tools for this purpose. By uniting the power of React with the versatility of JavaScript, React Native allows developers to create robust, high-performance applications. This article will guide you through the steps needed to start building mobile apps with React Native and JavaScript.<\/p>\n<p><\/p>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFQue_es_React_Native\"><\/span>What is React Native?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>React Native is a framework for mobile development, which allows programmers to use the well-known JavaScript programming language to create native mobile applications for iOS and Android. Unlike other solutions that simply present a web view, React Native translates app components into native platform elements, providing a user experience close to that of a traditional native app.<\/p>\n<p><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Principios_basicos_de_React_Native\"><\/span>React Native Basics<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>React Native is based on the principles of React, such as components, state, and properties (props), but brings them to the context of a mobile application. Developers can leverage their prior experience in React and JavaScript to build apps without needing to learn mobile-specific languages like Swift or Kotlin.<\/p>\n<p><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Configuracion_del_entorno_de_desarrollo\"><\/span>Development environment configuration<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Before you start building apps with React Native, you need to set up your development environment. The following tools will be required:<\/p>\n<ul>\n<li><strong>Node.js and npm<\/strong>: They must be installed on the computer. Node provides the runtime environment, while npm is the package manager used to install React Native libraries and tools.<\/li>\n<li><strong>Expo CLI or React Native CLI<\/strong>: Both are command line tools for starting new React Native projects. Expo is simpler as it handles much of the configuration automatically, while the React Native CLI offers more control and customization.<\/li>\n<li><strong>IDE or code editor<\/strong>- Visual Studio Code is widely recommended by the community due to its great support for JavaScript and React Native.<\/li>\n<\/ul>\n<h4><span class=\"ez-toc-section\" id=\"Instalacion_de_Nodejs_y_npm\"><\/span>Installing Node.js and npm<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Visit the official Node.js page (<a href=\"https:\/\/nodejs.org\/\" target=\"_blank\" rel=\"noopener nofollow\">https:\/\/nodejs.org\/<\/a>) and download the latest LTS version of the installer. Npm will be automatically installed along with Node.js.<\/p>\n<p><\/p>\n<h4><span class=\"ez-toc-section\" id=\"Instalacion_de_Expo_CLI_o_React_Native_CLI\"><\/span>Installing Expo CLI or React Native CLI<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>To install Expo CLI, run the following command in the terminal:<\/p>\n<pre class=\"&quot;ql-syntax&quot;\" spellcheck=\"&quot;false&quot;\">npm install -g expo-cli\n<\/pre>\n<p>If you prefer to use React Native CLI, you first need to install the Android and\/or iOS environment and then use this command:<\/p>\n<pre class=\"&quot;ql-syntax&quot;\" spellcheck=\"&quot;false&quot;\">npm install -g react-native-cli\n<\/pre>\n<h3><span class=\"ez-toc-section\" id=\"Creacion_de_un_nuevo_proyecto_con_React_Native\"><\/span>Creating a new project with React Native<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>With the environment configured, the next step is to start a new project. Here&#039;s how to do it with the Expo CLI, which is the quickest method to get started:<\/p>\n<pre class=\"&quot;ql-syntax&quot;\" spellcheck=\"&quot;false&quot;\">expo init ProjectName\n<\/pre>\n<p>You will be asked to choose a template for your new project. For this example, select the &quot;blank&quot; option which creates a clean, minimal application.<\/p>\n<p><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Estructura_de_una_aplicacion_en_React_Native\"><\/span>Structure of an application in React Native<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>After creating the project, you will have a series of initial files and folders. The most important are:<\/p>\n<ul>\n<li><code>App.js<\/code>: The main entry point of the application.<\/li>\n<li><code>package.json<\/code>: A file that lists dependencies and scripts.<\/li>\n<li><code>\/node_modules<\/code>: A folder containing all installed libraries.<\/li>\n<li><code>\/assets<\/code>: Directory to store images and other static resources.<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"Componentes_en_React_Native\"><\/span>Components in React Native<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>React Native offers a number of built-in components that map to their native counterparts on each platform. Some of the most used include:<\/p>\n<ul>\n<li><code>View<\/code>: It is similar to a container <code>&lt;div&gt;<\/code> in web development.<\/li>\n<li><code>text<\/code>: To display text on the screen.<\/li>\n<li><code>button<\/code>: A simple interactive button.<\/li>\n<\/ul>\n<p>Here is an example of how a component is created in React Native:<\/p>\n<pre class=\"&quot;ql-syntax&quot;\" spellcheck=\"&quot;false&quot;\">import React from &#039;react&#039;; import { View, Text, Button } from &#039;react-native&#039;; const MyComponent = () =&gt; ( Hello React Native! <button title=\"Press here\">alert(&#039;Button pressed!&#039;)} \/&gt;<\/button> <button title=\"Press here\">);<\/button>\n<\/pre>\n<h3><span class=\"ez-toc-section\" id=\"Estilizando_componentes_con_StyleSheet\"><\/span>Styling components with StyleSheet<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>In React Native, styles are not defined with CSS but with its own system based on JavaScript that is very similar to CSS. Use is made of <code>StyleSheet<\/code>, which is a similar abstraction to inline styles in React:<\/p>\n<pre class=\"&quot;ql-syntax&quot;\" spellcheck=\"&quot;false&quot;\">import React from &#039;react&#039;; import { View, Text, StyleSheet } from &#039;react-native&#039;; const styles = StyleSheet.create({ container: { padding: 20, backgroundColor: &#039;#fff&#039; }, text: { fontSize: 20, color: &#039;black&#039; } }); const MyComponent = () =&gt; ( Styling in React Native );\n<\/pre>\n<h3><span class=\"ez-toc-section\" id=\"Navegacion_entre_pantallas\"><\/span>Navigation between screens<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>To handle navigation between different screens, React Native uses libraries such as React Navigation or React Native Navigation. Here is an example with React Navigation:<\/p>\n<p>First, install the necessary dependencies:<\/p>\n<pre class=\"&quot;ql-syntax&quot;\" spellcheck=\"&quot;false&quot;\">npm install @react-navigation\/native npm install react-native-screens react-native-safe-area-context npm install @react-navigation\/native-stack\n<\/pre>\n<p>Next, configure a stack navigator:<\/p>\n<pre class=\"&quot;ql-syntax&quot;\" spellcheck=\"&quot;false&quot;\">import * as React from &#039;react&#039;; import { NavigationContainer } from &#039;@react-navigation\/native&#039;; import { createNativeStackNavigator } from &#039;@react-navigation\/native-stack&#039;; import HomeScreen from &#039;.\/HomeScreen&#039;; import ScreenDetail from &#039;.\/ScreenDetail&#039;; const Stack = createNativeStackNavigator(); function App() { return (  ); }\n<\/pre>\n<h3><span class=\"ez-toc-section\" id=\"Gestion_del_estado_con_Hooks_y_Context_API\"><\/span>State management with Hooks and Context API<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>React Native uses hooks like <code>useState<\/code> y <code>useEffect<\/code> for state management and component lifecycle. Here a simple example using <code>useState<\/code>:<\/p>\n<pre class=\"&quot;ql-syntax&quot;\" spellcheck=\"&quot;false&quot;\">import React, { useState } from &#039;react&#039;; import { View, Text, Button } from &#039;react-native&#039;; const Counter = () =&gt; { const [counter, setCounter] = useState(0); return ( {counter} <button title=\"Increase\">setCounter(counter + 1)} \/&gt;<\/button> <button title=\"Increase\">); };<\/button>\n<\/pre>\n<h3><span class=\"ez-toc-section\" id=\"Llamadas_a_APIs_y_manejo_de_datos_remotos\"><\/span>API calls and remote data management<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>React Native makes it easy to integrate with external APIs for data retrieval. You can use the <code>fetch<\/code> API or libraries like <code>axios<\/code> to make HTTP calls:<\/p>\n<pre class=\"&quot;ql-syntax&quot;\" spellcheck=\"&quot;false&quot;\">import React, { useEffect, useState } from &#039;react&#039;; import { View, Text } from &#039;react-native&#039;; const APIData = () =&gt; { const [data, setData] = useState([]); useEffect(() =&gt; { fetch(&#039;https:\/\/api.example.com\/datos&#039;) .then((response) =&gt; response.json()) .then((json) =&gt; setData(json) ) .catch((error) =&gt; console.error(error)); return ( {data.map((item) =&gt; ( {item.title} ))} ); };\n<\/pre>\n<h3><span class=\"ez-toc-section\" id=\"Testing_y_depuracion\"><\/span>Testing and debugging<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Testing and debugging are crucial for any software development. React Native provides tools and libraries like Jest for testing and the built-in development menu for real-time debugging.<\/p>\n<pre class=\"&quot;ql-syntax&quot;\" spellcheck=\"&quot;false&quot;\">npm install --save-dev jest\n<\/pre>\n<h3><span class=\"ez-toc-section\" id=\"Preparacion_para_la_publicacion\"><\/span>Preparation for publication<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Before publishing your app, you should make sure it is well tested and optimized. Additionally, each app store has its own review process and requirements that must be met, such as app listing settings, screenshots, and descriptions.<\/p>\n<p><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>React Native combines the ease of web application development with the performance and capabilities of native applications. Through its use of JavaScript and the powerful architecture of React, along with an active community and a large number of available libraries, it is an excellent option for any developer looking to enter the world of cross-platform mobile development.<\/p>\n<p>Building mobile apps with React Native and JavaScript is a modern development approach that speeds up and simplifies the process of bringing innovative ideas to market. With a relatively gentle learning curve for those already familiar with JavaScript and React, and the ability to build native apps for both major platforms from a single codebase, it&#039;s no surprise that React Native has gained widespread popularity among the developer community.<\/p>","protected":false},"excerpt":{"rendered":"<p>Introducci\u00f3n En los \u00faltimos a\u00f1os, la necesidad de construir aplicaciones m\u00f3viles multiplataforma ha llevado al surgimiento de varios frameworks que permiten a los desarrolladores utilizar un solo c\u00f3digo base para desplegar apps en iOS y Android. Entre todas las opciones disponibles, React Native, creado por Facebook, se ha establecido como una de las herramientas m\u00e1s [&hellip;]<\/p>","protected":false},"author":1,"featured_media":24573,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[420,2207],"tags":[38,314,205,90,340,211,185,1519,395,1430,2208,234],"class_list":["post-24572","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-nodejs","tag-como","tag-aplicaciones","tag-blog","tag-con","tag-crear","tag-desarrollo","tag-javascript","tag-movil","tag-moviles","tag-native","tag-nodejs","tag-react"],"_links":{"self":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/24572","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/comments?post=24572"}],"version-history":[{"count":0,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/24572\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media\/24573"}],"wp:attachment":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media?parent=24572"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/categories?post=24572"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/tags?post=24572"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}