Instalación de Node JS y creación de proyectos React Native con Expo

Contenido del curso

Configuración del entorno de desarrollo

Primeros pasos con React Native

React Navigation

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:009:08

Instalación de Node JS y creación de proyectos React Native con Expo

Curso de Introducción a React Native

Clase 4 de 16

Clase 4 / 16

Recursos

Poner en marcha un proyecto de React Native con Expo es más sencillo de lo que parece, pero requiere tener las herramientas correctas instaladas y configuradas. A continuación se explica todo el proceso, desde la instalación de Node.js hasta la generación del proyecto listo para desarrollar.

¿Qué necesitas instalar antes de trabajar con React Native?

El primer requisito es contar con Node.js en tu equipo [0:16]. Para descargarlo, accede a la página oficial nodejs.org, donde encontrarás dos versiones disponibles.

LTS (Long Term Support): es la versión estable, recomendada para producción y para la mayoría de los usuarios [0:30].
Current: incluye las últimas características, pero estas cambian constantemente y no se recomiendan para proyectos en producción [0:44].

La recomendación es clara: utiliza siempre la versión LTS. El proceso de instalación varía según el sistema operativo: en macOS se descarga un archivo .pkg, en Windows un .exe y en Linux se accede a la sección de descargas correspondiente [0:56]. La instalación es tan simple como dar clic en "Siguiente" varias veces.

Para verificar que Node.js está instalado correctamente, abre una terminal y ejecuta:

bash node -v

Si devuelve un número de versión, todo funciona bien [1:22].

¿Por qué instalar Yarn como gestor de dependencias?

Aunque Node.js trae npm por defecto, se recomienda instalar Yarn como gestor de dependencias alternativo [1:34]. Yarn se instala desde su página oficial yarnpkg.com ejecutando el siguiente comando:

bash npm install -g yarn

Si en macOS o Linux aparece un error de permisos, basta con agregar sudo al inicio del comando [2:06]:

bash sudo npm install -g yarn

En Windows este error de permisos no suele presentarse. Una vez instalado, verifica la versión con:

bash yarn -v

Con Node.js y Yarn listos, ya tienes todo lo necesario para pasar a React Native [2:34].

¿Cómo se crea un proyecto de React Native con Expo?

El punto de partida es la documentación oficial en reactnative.dev [2:44]. Dentro de la sección Docs, busca el apartado Environment Setup, donde encontrarás una guía paso a paso. React Native ofrece dos variantes para iniciar: Expo y CLI nativo. En este caso se trabaja con Expo [3:08].

¿Cómo instalar Expo CLI de forma global?

El requisito mínimo es Node.js versión 12 LTS, aunque con la versión 14 LTS que ya se instaló se cumple de sobra [3:18]. Para instalar Expo CLI de manera global con Yarn, ejecuta:

bash yarn global add expo-cli

Si prefieres npm, el equivalente sería npm install -g expo-cli [3:28]. Tras la instalación, comprueba que Expo quedó disponible:

bash expo --version expo-cli --version

Ambos comandos deben devolver el número de versión correspondiente [4:06].

¿Qué comando genera el proyecto nuevo?

Una vez dentro de la carpeta de tu curso o directorio de trabajo, ejecuta:

bash expo init my-app

El sistema hará varias preguntas sobre la plantilla que deseas usar [4:38]:

Blank: proyecto vacío y minimalista con JavaScript.
Blank (TypeScript): lo mismo pero con TypeScript.
Tabs: incluye navegación con pestañas preconfigurada.

La opción recomendada para aprender es blank, ya que permite construir todo de forma manual y comprender cada parte del proyecto [4:50].

Al seleccionar blank y presionar intro, Expo comienza a generar la estructura de archivos y a instalar todas las dependencias necesarias. Si abres la carpeta del proyecto en tu explorador de archivos, verás cómo se van creando los ficheros que componen la aplicación [5:02].

¿Qué obtienes después de crear el proyecto?

Al finalizar la instalación, la carpeta del proyecto contiene toda la estructura base de una aplicación React Native con Expo [5:30]. Al abrirla en un editor de código, se puede observar la organización de archivos y carpetas que conforman el proyecto.

El significado de cada archivo y carpeta se aborda en las sesiones siguientes, pero lo importante aquí es que con solo tres herramientas instaladas — Node.js, Yarn y Expo CLI — y un único comando, ya tienes una aplicación funcional lista para desarrollar.

¿Ya creaste tu primer proyecto? Comparte en los comentarios cualquier duda que te haya surgido durante el proceso de instalación.

Paúl Terán

Hace 5 años

Hola, hola! Es una pena no haber tenido la oportunidad de manejar React Native CLI, pero de todas maneras creo que es una buena manera de poder iniciar en este tipo de Desarrollo (tomando en cuenta que Expo SDK ha recibido buenas actualizaciones últimamente).

Para quienes ya hayan manejado React Native CLI y Expo, pues las diferencias serían las siguientes:

REACT NATIVE CLI:

Genera un proyecto con lo mínimo necesario para poder correr una App con la configuración de Android y iOS abierta.

Contiene el proyecto de Android y iOS de manera independiente con la opción de poder escribir código nativo para cada plataforma.

Se necesita una Mac para el caso del control de iOS y dependencias (POD INSTALL) con Xcode.

EXPO CLI

En expo no existen las carpetas de Android y iOS ya que el SDK se encarga de hacer los builds necesarios para cada plataforma.
Puedes utilizar un template ya hecho sin necesidad de crear todo desde cero como pasa en RN CLI.
Puedes correr tu proyecto sin necesidad de un $npx react-native run-android/ios. => Expo tiene un ambiente súper interesante para correr apps en un sitio web con Expo Snack o en su aplicativo móvil con Expo Go.

***RESUMEN: Si su proyecto necesita manejar un performance más dedicado, lo mejor es utilizar RN CLI, pero si solo quieren probar la herramienta y no manipular algúna librería, comportamiento, engine, etc; pues lo mejor es utilizar RN Expo.

Luis Fernando Pedroza Taborda

Hace 5 años

Muchas gracias por el resumen, soy nuevo en esto, ya tengo claro la diferencia.

Francisco Pessano

Hace 5 años

Gran explicación!, una lastima que no la haya dado el profesor.

Comentarios (90)90 comentarios

José Francisco Del Rio Díaz

Hace 4 años

Leibniz Moreno

José Fabián Beltrán Meza

Gera Garcia

Franklin Villalobos

Jhonatan Jose Ramirez Leal

Anderson Josué Oroya Silva

Aaron Yamil Luna Parrado

Kenedy Masedonio Palma Hernandez

Reynaldo Francisco Moreno Briceño

Hace 2 años

Gabriel Vladimir Valdivieso Vanegas

Edison Andres Portilla Chungandro

Florentino Daniel Acosta Nava

Jose Manuel Hernandez De la Cruz

Camilo José Mezú Mina

Juan Jose Mayorga

Paulo Andrés Loaiza Villegas

Daniel Cueto

Juan Manuel Mena Carrillo

Hace 3 años

waek vexotiq youtube

Sergio Leonardo Benancio Mauricio

JULIETA VICTORIA PARRA VARGAS

Gerardo Andrés Cabrera Medina

Octavio Villavicencio Cruz

Moises Baldenegro Melendez

Darío Condori Humerez

María Antonia Lobato

Neo TRAN

Alberto Andres Torres Foltyn

Configuración del entorno de desarrollo

Desarrollo de Apps Móviles con React Native y Expo

Instalación de Visual Studio Code para React Native

Configuración de Visual Studio Code para React Native

Instalación de Node JS y creación de proyectos React Native con Expo

Instalación del emulador de Xcode para aplicaciones iOS

Instalación de Android Studio y creación de emulador

Ejecutar aplicaciones React Native en dispositivos físicos con Expo Go

Primeros pasos con React Native

Estructura de un proyecto React Native con Expo

Creación de componentes de React Native con Expo

Props en React Native: envío de datos entre componentes

Asignación de default props en componentes React

Validación de Props con PropTypes en React

React Navigation

Instalación de React Navigation versión 5 en React Native con Expo

Cómo crear un stack de navegación en React Native

Creación de menú de pestañas en React Navigation

Drawer Navigation en React Native

Instalación de Node JS y creación de proyectos React Native con Expo

Progreso del curso

Configuración del entorno de desarrollo

Primeros pasos con React Native

React Navigation

Recursos

Recursos