4. Instalacion de Node Js , OpenJDK y React Native CLI

 

Tutorial: Instalación de Node.js, OpenJDK y React Native CLI

🛠️ Paso 4: Instalación de Node.js, OpenJDK y React Native CLI

Objetivo:

Instalar las herramientas esenciales para desarrollar con React Native: Node.js, OpenJDK 8 y React Native CLI.

📋 Preparación del Entorno

Paso 1: Acceder a la Documentación Oficial

  1. Abre tu navegador y ve a la página oficial de React Native:

  2. text

  3. https://reactnative.dev

  4. Haz clic en "Get Started" (Comenzar)

  5. En el menú lateral, ve a "Environment Setup" (Configuración del entorno)

  6. Selecciona la pestaña "React Native CLI Quickstart"

Paso 2: Seleccionar Sistema Operativo

  1. Elige "Windows" como sistema operativo

  2. Selecciona "Android" como plataforma objetivo

  3. Sigue las instrucciones para usar Chocolatey (gestor de paquetes para Windows)

🍫 Instalación de Chocolatey

Paso 3: Preparar PowerShell

  1. Busca PowerShell en el menú de Windows

  2. Haz clic derecho sobre "Windows PowerShell"

  3. Selecciona "Ejecutar como administrador"

  4. Confirma si aparece el control de cuentas de usuario

Paso 4: Instalar Chocolatey

  1. Ve a la página de Chocolatey:

  2. text

  3. https://chocolatey.org/install

  4. Copia el comando de instalación:

  5. powershell

  6. Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

  7. En PowerShell (como administrador), pega el comando y presiona Enter

  8. Si aparece un error de política de ejecución, copia y ejecuta este comando primero:

  9. powershell

  10. Set-ExecutionPolicy RemoteSigned -Scope CurrentUser
    Y responde con "S" (Sí) cuando se solicite

  11. Espera a que complete la instalación de Chocolatey

Paso 5: Verificar Chocolatey

  1. Cierra y reabre PowerShell como administrador

  2. Verifica la instalación con:

  3. powershell

  4. choco --version

  5. Debes ver el número de versión de Chocolatey

📦 Instalación de Node.js y OpenJDK 8

Paso 6: Instalar Paquetes con Chocolatey

  1. Regresa a la página de React Native en tu navegador

  2. Busca el comando para instalar Node.js y OpenJDK 8

  3. Copia el comando (debería ser similar a este):

  4. powershell

  5. choco install -y nodejs.install openjdk8

  6. En PowerShell (como administrador), pega el comando y presiona Enter

  7. Espera mientras Chocolatey descarga e instala ambos paquetes

    • ⏱️ Esto puede tomar varios minutos

    • 📥 Se descargarán aproximadamente 100MB

✅ Verificación de las Instalaciones

Paso 7: Verificar Node.js

  1. Cierra y reabre PowerShell (no es necesario como administrador ahora)

  2. Verifica Node.js con:

  3. powershell

  4. node --version

  5. Debes ver la versión instalada (ejemplo: v15.14.0 o similar)

  6. Verifica npm (gestor de paquetes de Node.js):

  7. powershell

  8. npm --version

Paso 8: Verificar OpenJDK 8

  1. Verifica Java con:

  2. powershell

  3. java -version

  4. Debes ver información similar a:

  5. text

openjdk version "1.8.0_xxx"

OpenJDK Runtime Environment (build 1.8.0_xxx-xxx)

  1. OpenJDK 64-Bit Server VM (build 25.xxx-bxx, mixed mode)

⚛️ Instalación de React Native CLI

Paso 9: Instalar CLI Globalmente

  1. En PowerShell (puede ser normal, no como administrador)

  2. Ejecuta el comando:

  3. powershell

  4. npm install -g react-native-cli

    • npm = Node Package Manager

    • install = comando para instalar

    • -g = instalar globalmente (disponible en todo el sistema)

    • react-native-cli = interfaz de línea de comandos para React Native

  5. Espera a que complete la instalación

  6. Verifica la instalación con:

  7. powershell

  8. react-native --version

  9. Debes ver la versión de React Native CLI instalada

🎯 Configuración Final

Paso 10: Verificar Variables de Entorno

Chocolatey generalmente configura automáticamente las variables de entorno, pero verifiquemos:

  1. Verifica que Java esté en el PATH:

  2. powershell

  3. where java
    Debe mostrar la ruta de instalación de Java

  4. Verifica que Node.js esté en el PATH:

  5. powershell

  6. where node
    Debe mostrar la ruta de instalación de Node.js

🧪 Prueba Rápida

Crea un proyecto de prueba para verificar todo funciona:

powershell

# Navega a tu carpeta de proyectos

cd ~/Documentos


# Intenta crear un proyecto (no lo completaremos ahora)

react-native init TestProject --template react-native-template-typescript

Nota: Esto descargará muchos archivos. Puedes cancelar con Ctrl + C después de ver que comienza la descarga.

📝 Resumen de lo Instalado

✅ Chocolatey - Gestor de paquetes para Windows
✅ Node.js v15.x - Entorno de ejecución de JavaScript
✅ npm - Gestor de paquetes de Node.js
✅ OpenJDK 8 - Kit de desarrollo de Java (requerido para Android)
✅ React Native CLI - Herramienta para crear y gestionar proyectos React Native

🔧 Solución de Problemas Comunes

❌ "choco no es reconocido como comando"

  • Solución: Reinicia PowerShell como administrador

  • Alternativa: Agrega Chocolatey al PATH manualmente

❌ Error de permisos con npm

  • Solución: Ejecuta PowerShell como administrador para la instalación global

❌ Java no se reconoce

  • Solución: Configura manualmente la variable de entorno JAVA_HOME:

  • powershell

  • [System.Environment]::SetEnvironmentVariable('JAVA_HOME', 'C:\Program Files\OpenJDK\openjdk-8.x.x.x', 'User')

❌ Versión incorrecta de Node.js

  • Solución: Instala una versión específica:

  • powershell

choco uninstall nodejs.install

  • choco install nodejs-lts  # Para la versión LTS

🎬 Próximo Paso

En el siguiente tutorial configuraremos el entorno de desarrollo para crear nuestro primer proyecto React Native y configuraremos el emulador de Android.

🚀 ¡Excelente! Has instalado todas las herramientas base necesarias para desarrollar aplicaciones React Native. Tu entorno está casi listo

Comentarios

Publicar un comentario

Entradas más populares de este blog

18. Visualizar nuestros componentes limpios con StyleSheet

  Tema: 18. Visualizar nuestros componentes limpios con StyleSheet Objetivo: Aprender a organizar y limpiar los estilos de componentes en React Native utilizando StyleSheet.create() , separando la lógica de presentación del JSX para mejorar la legibilidad y mantenibilidad del código. Contenido del tutorial: 1. ¿Qué es StyleSheet? Definición: Una API de React Native que permite definir estilos de manera estructurada y optimizada. Ventajas: Mejora el rendimiento (caché de estilos). Separa estilos de la lógica del componente. Facilita el mantenimiento y reutilización. Valida los nombres de propiedades en tiempo de desarrollo. 2. Importar StyleSheet Se importa desde react-native : jsx import { StyleSheet } from 'react-native' ; 3. Estructura básica de StyleSheet.create() Sintaxis: jsx const styles = StyleSheet . create ({    nombreDelEstilo : {      propiedad1 : valor1 ,      propiedad2 : valor2 ,    },    o...
Leer más

15. Componente Image

  Tutorial: Componente Image en React Native 📱 Parte 15: Componente Image - Mostrando Imágenes en tu App 🎯 Objetivo: Aprender a usar el componente Image para mostrar imágenes en React Native desde diferentes fuentes: archivos locales, URLs remotas y base64. 📸 Analizando el Ejemplo de la Imagen Observando el código de la imagen: javascript < Text style = {{ margin : 5 , fontSize : 20 , fontWeight : 'bold' , color : 'gray' }} >   Componente Imagen </ Text > { /* Imagen local */ } < Image   style = {{ width : 150 , height : 150 }}   source = { require ( './imgs/react-native.jpg' )} /> { /* Imagen remota */ } < Image   style = {{ width : 150 , height : 150 }}   source = {{ uri : 'https://reactnative.dev/img/tiny_logo.png' }} /> Resultado visual esperado: text ┌─────────────────────────────────┐ │ Componente Imagen               │ │         ...
Leer más

Tema: 23. Justify Content en Flexbox para Column (Columna) en React Nativ

Objetivo: Comprender y aplicar la propiedad justifyContent en contenedores con flexDirection: 'column' (valor por defecto) para controlar la distribución vertical de elementos en React Native. Contenido del tutorial: 1. Introducción a justifyContent en columnas Por defecto en React Native: flexDirection: 'column' Cuando usamos flexDirection: 'column' : Eje principal → Vertical (de arriba a abajo) Eje cruzado → Horizontal (de izquierda a derecha) justifyContent controla: Distribución de elementos a lo largo del eje vertical 2. Configuración inicial del ejemplo Código base para columnas: jsx import React from 'react' ; import { View , Text , StyleSheet } from 'react-native' ; const App = () => {    return (      < View style ={ styles . container }>        < View style ={ styles . boxSize }>          < Text style ={ styles . text }> 1 </ Text > ...
Leer más