Javascript para aprender React
Aprender React (Biblioteca de Javascript) puede llegar a ser una tarea muy complicada si no dominas algunos conceptos básicos de Javascript, así que en este tutorial voy a mostrarte que temas y fundamentos de Javascript debes conocer para poder sentirte cómodo cuando vayas a estudiar React.
Consideraciones
Este no es un curso de Javascript, asi que no voy a explicarte conceptos básicos como condicionales, objetos, tipos de datos, bucles y código básico en general, si no sabes estos conceptos, primero ve al Curso de Javascript. Este solo un tutorial, de conceptos muy usados de Javacript cuando se estudia o trabaja con React.
Configuracion del Proyecto
Empecemos configurando nuestro proyecto. Como no quiero enfocarme en herramientas solo vamos a crear una carpeta, con un archivo HTML, CSS y Javascript y nada Mas.
Adicionalmente a esto tambien puedes usar una extension de Visual Studio Code llamado Live Server la cual te permitira refrescar la pagina cada vez que haces un cambio en tu navegador.
Otra herramienta muy util para generar proyectos tambien podria ser Vitejs, pero lo dejo a la eleccion del que estudia si usarla o No.
Crear y Ejecutar Funciones
Una de la sintaxis que mas se va a repetir en React es la creacion de funciones de Javascript. Asi que Debes tener muy claro que es una funcion y como crearla.
function hello() { console.log(Hello()) }
function Hello() {
return "Hello"
}
console.log(Hello())
Las funciones nos permiten agrupar logica bajo un nombre, y nos permiten poder reutilizarlos facilmente.
console.log(Hello())
console.log(Hello())
console.log(Hello())
console.log(Hello())
console.log(Hello())
Retonar valores de funciones
Debes entender que las funciones tambien pueden devolver distintos tipos de datos, como strings, numeros, booleanos, arreglos, objetos e incluso otras funcioens.
function Hello() {
// return 'Hello'
// return 20
// return true
// return []
// return {}
return function () {
return '30'
}
}
Esto es importante porque en React aprenderas que puedes devolver HTML en funciones de Javascript ademas de los tipos de datos de Javascript.
function Hello() {
return <h1>Hello</h1>;
}
No te preocupes si no entiendes este codigo anterior, eso es codigo de React, pero si lo notas es solo una funcion de JavaScript que esta devolviendo una etiqueta H1 de HTML.
Parametros de funciones
Cuando declaramos funciones muchas veces vamos a querer procesar datos, asi que para esto estan los parametros. Los parametros de la funciones solo son los nombres que le decimos que podemos esperar en la declaracion de la funcion.
function sayHello(name) {
return 'Hi I am ' + name
}
console.log(sayHello('Ryan'))
console.log(sayHello('Jane'))
console.log(sayHello('Joe'))
Parametros opcionales
Si en una funcion esperamos valores para que funcione, ?que pasa si no nos pasan estos valores?
Bueno, podemos hacer una validacion, y asignar un valor:
function add(x, y) {
if (!y) {
y = 0;
}
return x + y;
}
console.log(add(10, 20));
console.log(add(10));
Pero es mucho mas facil colocando un parametro opcional.
function add(x, y=0) {
return x + y;
}
console.log(add(10, 20));
console.log(add(10));
Esto es mucho mas facil de escribir, de leer, y evitamos usar una condicional extra.
Objectos
Un tipo de dato muy comun en Javacript son los Objetos, asi que es necesario conocer los Objetos en Javascript si quieres usar React. Debes saber que estos pueden almacenar distintos tipos de datos como strings, numeros, booleanos, funciones, arreglos y demas. Tambien es importante conocer como acceder a estos valores.
const user = {
name: 'Maria',
lastname: 'Perez',
age: 30,
address: {
country: 'Colombia',
city: 'bogota',
street: 'Main Street #123'
},
friends: ['Brandon Perez', 'Elena Gomez'],
active: true,
sendMail: function () {
return 'Sending email'
}
}
console.log(user.name)
console.log(user.age)
console.log(user.sendMail())
Si quieren estudiar mas a fondo pueden ir al cuso de Orientacion a Objetos en Javascript:
- Curso de Orientacion a Objetos en Javascript: https://youtu.be/N_t1A39IB_8
shorthand property names
Muchas veces tambien vamos a necesitar crear objetos de Javascript, a partir de otros datos:
const name = "laptop";
const price = 3000;
const newProduct = {
name,
price,
};
console.log(newProduct)
Manipulación Básica del DOM
React es una biblioteca que la estudiaras para crear aplicaciones web, asi que una parte importante de las interface
const title = document.createElement('h1')
title.innerText = 'Hola mundo'
const button = document.createElement('button')
button.innerText = 'click'
button.addEventListener('click', () => {
title.innerText = 'Hello World'
})
document.body.append(title)
document.body.append(button)
Objetos en parametros
const user = { ... }
function printInfo(userInfo) {
// return '<h1> Hi I am ' + userInfo.name + '</h1>'
return '<h1> Hi I am ' + userInfo['name'] + '</h1>'
}
document.body.innerHTML = printInfo(user)
Destructuring
El destructuring de Javascript nos permite usar solo algunos valores de un Objeto.
function printInfo({ age }) {
return "<h1> Hi I am " + age + "</h1>";
}
tambien puedes destructurar desde cualquier parte del codigo, en este ejemplo dentro de la funcion:
function printInfo(user) {
const { age } = user
return "<h1> Hi I am " + age + "</h1>";
}
Funciones Anonimas
En JavaScript muchas veces no es necesario asignar nombres a las funcioens por ejemplo:
function start() {
return "Starting...!";
}
console.log(start());
Este es otra forma de usar una funcion sin declaracion:
console.log(
function () {
return "Starting...!"
}()
)
Esto hace que no tenga que nombrar la funcion por aparte. Esto es muy util cuando ejecutamos funciones en eventos como clicks, submits, change, y otros eventos de elementos HTML.
const button = document.createElement('button')
button.innerText = 'Click me'
button.addEventListener('click', function () {
alert('Clicked!')
})
document.body.append(button)
evitando que tenga que hacer esto:
const button = document.createElement("button");
button.innerText = "Click me";
function handleClick() {
alert("Clicked!");
}
button.addEventListener("click", handleClick);
document.body.append(button);
No significa que uno sea mejor que el otro, solo son dos formas disntias de escribir la misma logica, a veces una es mas conveniente que la otra y depende de lo que el desarrollador vea como mejor opcion.
Arrow Functions
En javascript tenemos dos tipos de funciones:
- Function declaration, las que usan la palabra
function - Arrow Functions o funciones flechas
ambas son usadas en React.
Function Declaration en Javascript:
function add(x, y) {
return x + y
}
Arrow Function en Javascript:
const add = (x, y) => {
return x + y;
}
Estos Arrow functions son muy utiles para poder escribir codigo mas compacto y facil de leer.
const button = document.createElement("button");
button.innerText = "Click me";
button.addEventListener("click", () => alert("Clicked!"));
document.body.append(button);
Arrow Functiones en una Sola Linea
Es muy importante tener en claro que cuando usamos un Arrow function sin las llaves, este ya tiene un return implicito, asi que es como si la funcion retornara algo.
Por ejemplo todas estas funciones retornan algo:
const showText = () => "Hola Mundo";
const showNumber = () => 22;
const showBoolean = () => true;
const showArray = () => [1, 2, 3];
const showFunction = () => () => 'Hola desde funcion'
const showObject = () => ({
name: "Ryan",
});
console.log(showText());
console.log(showNumber());
console.log(showBoolean());
console.log(showArray());
console.log(showFunction()());
console.log(showObject());
Algo interesante con la ultimas funcion showObject es que no se ha podido colocar en una sola linea. Esto es asi porque las llaves definen el cuerpo de una funcion, asi que cuando quiero decirle que retorno un objeto () => {} lo que el entiende es que quiero colocar el cuerpo de la funcion. Pero esto se puede arreglar asi:
const showObject = () => ({
name: "Ryan",
});
Usando los parentesis estamos declarando que el cuerpo de la funcion, sino un tipo de dato, que debe retornar.
Las ventajas de las funciones flecha:
- Requieren menos codigo de escritura
Las ventajas de las Declaration Functions:
- No tenemos preocuparnos del Hoisting de las funciones, es decir podemos declarar una funcion antes o despues y seguira disponible en todo el archivo.
Condicionales en Funciones
const button = document.createElement("button");
button.innerText = 'Profile'
const isAuthorized = true;
button.addEventListener("click", () => {
if (isAuthorized) {
alert("Autorizado");
} else {
alert("No Autorizado");
}
});
document.body.append(button);
Lo anterior esta bien, sin embargo muchas veces es mejor saber usar el return de la funcion como una forma de poder acabar la ejecucion
button.addEventListener("click", () => {
if (isAuthorized) {
return alert("Autorizado");
}
alert("No Autorizado");
});
String Literals
const name = 'John';
const lastname = "Doe"
const fullname = name + " " + lastname;
// const fullname = `${name} ${lastname}`;
Los String Literals sirven para añadir un propiedades dinamicas a un componente, como clases o estilos:
let color = 'white'
let background = 'red'
const button = document.createElement("button");
button.innerText = "active";
button.style = `background: ${background}; color: ${color};`
document.body.append(button);
Metodos de Funciones
Cuando trabajamos con arreglos y arrays en Javascript es muy comun recorerlos, asi que los arreglos ya vienen con metodos para poder recorrer elementos, buscar elementos, filtrar elementos, ordernarlos y asi. De esta forma podemos evitar recrear esta misma logica una y otra vez.
- map
- find
- filter
- concat
map:
const names = [ 'ryan', 'joe', 'bruce' ]
const greetings = names.map(function (name) {
return "Hola " + name
})
console.log(names)
console.log(greetings)
El metodo find nos permite buscar un elemento de un arreglo, si encuentra el elemento lo retorna, sino nos devuelve undefined.
const names = ["ryan", "joe", "bruce"];
const nameFound = names.find(function (name) {
if (name === "joe") {
return name;
}
});
console.log(names)
console.log(nameFound);
filter
el metodo filter nos permite crear un nuevo array, con elementos que hayan cumplido con una condicion.
const names = ["ryan", "joe", "bruce"];
const newNames = names.filter(function (name) {
if (name !== "joe") return name
})
console.log(names)
console.log(newNames);
concat
const names = ["ryan", "joe", "bruce"];
const newNames = ["Maria", "Marta", "Veronica"];
const allNames = names.concat(newNames);
console.log(names);
console.log(newNames);
console.log(allNames);
Para conocer acerca de los metodos de arreglos en Javascript y verlos mas a fondo, recomiendo ver este video:
- Javascript Arrays: https://youtu.be/qqR1enOceVg
spreed operator
en la seccion anterior hemos visto que es posible combinar dos arreglos en uno solo usando contact, pero esto puede ser mucho mas facil usando el spreed operator.
const names = ["ryan", "joe", "bruce"];
const newNames = ['Maria', 'Marta', 'Veronica']
const allNames = [...names, ...newNames]
console.log(names)
console.log(newNames)
console.log(allNames)
copiar propiedades en un nuevo Objeto
El spreed operator tambien funciona con objetos de Javascript:
const user = {
name: 'ryan',
lastname: 'ray'
}
const address = {
street: 'Main Street 123',
city: 'London'
}
const userInfo = {
...user,
address
}
console.log(userInfo)
ES Modules (EcmaScript Modules)
export const myModule = () => {}
export default myModule
estos tambien se usan cuando importas modulos de terceros, es decir paquetes de npm que puedes descargar desde github por ejemplo
Operador Ternario
A pesar que podemos crear condicionales con Javascript usando if y else, es muy tipico tambien usar los operadores ternarios, los cuales nos permiten hacer lo mismo pero con una sintaxis más corta:
background: isRedColor ? "red" : "black",
Optional Chaining
person = { name: 'Beth', dog: { name: 'Laddie' } }
te permiten leer el valor de una propiedad anidada sin tener que revisar si el valor previo es valido.
person.cat.name // error
person.cat?.name // undefined, no hay error
Otros temas importantes
- Async/await
- nullish coalescing operator