Fundamentos de Programación
Antes de meternos de lleno a React Native, veamos los bloques básicos que vas a encontrar en todos los archivos. Piensa en el código como una receta — la computadora lee tus instrucciones de arriba a abajo y las sigue al pie de la letra.
Variables — contenedores con nombre
Las variables guardan valores para usarlos después, como ponerle etiqueta a una caja:
const appName = "Mi Primera App"; // nunca cambia
let score = 0; // puede cambiar después
score = score + 1;
Usa const para valores que no cambian, let para valores que sí van a cambiar.
Tipos de datos — tipos de valores
"Hola" // string — un texto (siempre entre comillas)
42 // number — para hacer cuentas
true // boolean — sí o no (true / false)
["a", "b", "c"] // array — una lista de elementos
{ name: "Alex", age: 25 } // object — un grupo de valores con nombre
Funciones — instrucciones reutilizables
Una función es un conjunto de pasos que puedes ejecutar cuando quieras — como guardar una receta para cocinarla otra vez:
// Función regular
function greet(name) {
return "Hola, " + name;
}
// Arrow function (sintaxis más corta, misma idea)
const greet = (name) => {
return "Hola, " + name;
};
Los valores que le pasas (name) se llaman parámetros. El valor que regresa es el valor de retorno.
Llaves — tres usos
Las llaves {} hacen tres cosas diferentes dependiendo de dónde aparezcan:
// 1. Agrupar código dentro de una función
function greet() {
return "¡Hola!";
}
// 2. Crear un objeto
const user = { name: "Alex", age: 25 };
// 3. Meter JavaScript dentro de JSX
<Text>{user.name}</Text>;
Desestructuración — atajos muy útiles
Saca valores de objetos o arreglos en un solo paso:
// Desestructuración de objeto
const { name, age } = user; // en vez de user.name, user.age
// Desestructuración de arreglo
const [first, second] = ["a", "b"]; // first = "a", second = "b"
Esto lo vas a ver por todos lados en React — como en const [count, setCount] = useState(0).
Template literals — texto con expresiones
Usa backticks y ${} para mezclar texto y valores:
const greeting = `Hola, ${name}! Tienes ${age} años.`;
Operador ternario — if/else en una línea
Una forma compacta de elegir entre dos valores:
const message = isLoggedIn ? "¡Bienvenido de vuelta!" : "Inicia sesión";
Léelo así: "si isLoggedIn entonces '¡Bienvenido de vuelta!' si no 'Inicia sesión'."
Punto y coma
Vas a ver punto y coma (;) al final de algunas líneas. En JavaScript son opcionales — el lenguaje los agrega automáticamente. No te claves con eso.
¡Ya conoces los fundamentos! Todo en React Native se construye sobre estas ideas. Cuando veas sintaxis que no reconozcas, regresa aquí a checar.
Ve este concepto en acción con resaltado interactivo de código
Probar en el Playground