DEV Community: Isaac Cantún

Introducción a Ruby

Isaac Cantún — Wed, 13 May 2020 03:21:24 +0000

Tabla de contenido

Introducción
¿Qué es Ruby?
Sintaxis básica
Condicionales
Arrays y Hashes
Estructuras de control (ciclos)
Fin :(

Introducción

¡hola a todos! he vuelto con un nuevo artículo, en esta última semana estuve leyendo sobre un lenguaje de programación, el cual nunca había tenido ningún acercamiento, no conocía su sintaxis (solo sabía que era muy parecido a Python), no conocía frameworks escritos con él, en pocas palabras no me había interesado por aprenderlo, sin embargo leyendo en Twitter y en LinkedIn que muchas empresas lo usan, me dio mucha curiosidad y comencé a ver algunos videos y a leer algunos libros y artículos que encontré y la verdad me atrapó, el lenguaje del que hablo es Ruby, y bien la idea de escribir una serie de tutoriales sobre el es porque aún lo estoy aprendiendo y quiero compartir todo lo que pueda aprender y todos aprendamos juntos, voy a omitir la instalación de Ruby ya que realmente es bastante sencilla y creo que tomando 5 minutos en Google puedes lograr instalarlo sin problemas.

¿Qué es Ruby?

Antes de entrar en tema de sintaxis quiero mostrarte lo que la página oficial dice de Ruby:

Ruby es...

Un lenguaje de programación dinámico y de código abierto enfocado en la simplicidad y productividad. Su elegante sintaxis se siente natural al leerla y fácil al escribirla.

También se dice que Ruby es el lenguaje de las grandes Startups, si haz utilizado Python te sentirás familiarizado con la sintaxis de Ruby, ya que de cierto modo son parecidos, Ruby es un lenguaje de tipado dinámico, lo que quiere decir que no necesitarás declarar un tipo de dato cuando declaras una variable o definir un tipo de dato de retorno en las funciones como en otros lenguajes de tipado estático como Java o C#, entonces vamos a comenzar con las variables y tipos de datos en Ruby.

Sintaxis básica

Antes de comenzar vamos a crear un archivo con el nombre que tu quieras en la carpeta que tu desees, yo lo pondré en mi workspace y lo llamare intro.rb, OJO .rb es la extensión que deben tener los archivos de Ruby y así el interprete pueda ejecutarlos.

Bueno para comenzar no hay trucos, las variables en Ruby se definen escribiendo el nombre y su valor asignándolo con el signo de = de la siguiente manera:

name = 'John'
last_name = 'Doe'
age = 30

Si bien nuestro ejemplo es muy básico, creo que podemos hacer algunas observaciones, la primera es que Ruby es indiferente a las comillas simples o las comillas dobles, sin embargo se recomienda que estandarices las que vayas a usar en tu código y no que las combines, segunda observación es que a diferencia de otros lenguajes Ruby recomienda usar snake_case para variables y funciones, y CamelCase solo para nombres de clases, algo muy parecido a lo que recomienda la comunidad de Python, para continuar podemos imprimir en pantalla las variables de la siguiente manera:

puts "Mi nombre es #{name} #{last_name} y tengo #{age} años"

Si desde nuestra terminal ejecutamos ruby intro.rb podemos observar la siguiente salida:

Mi nombre es John Doe y tengo 30 años

Vamos a detenernos a explicar lo que acaba de ocurrir, bien la palabra reservada puts realmente es un método en Ruby, podemos o no escribirlo con paréntesis (puts()) sin embargo en documentación y otros ejemplos en internet difícilmente lo encontrarás con paréntesis, porque en Ruby es común escribirlo así como lo hicimos, lo segundo que podemos observar es algo que muchos lenguajes ya han incorporado y es la interpolación de cadenas con Ruby usamos esta sintaxis "#{variable}" para imprimir contenido dinámico en un string sin necesidad de concatenarlo, y si eres un poco observador, te darás cuenta que esta vez usamos comillas dobles, y es que esto tiene un propósito, la interpolación de cadenas solo se puede hacer con comillas dobles, ya que las comillas simples imprimirán el contenido de la cadena tal cual lo escribimos y eso incluye nuestra sintaxis para la interpolación.

Ahora vamos a ver las constantes, podemos definir constantes en Ruby simplemente con poner el nombre de la "variable" en mayúsculas, de esta forma el interprete de Ruby entenderá que el valor asignado a la constante nunca cambiará, por ejemplo:

BIRTHDAY = Time.new(1992, 07, 24)

De esta forma hemos declarado una constante BIRTHDAY con nuestra fecha de cumpleaños, si la reasignamos, obtendremos el siguiente warning en la consola warning: previous definition of BIRTHDAY was here este nos avisará que la constante ya fue asignada, la clase Time como en todo lenguaje de programación existe una clase para manejar fechas y horas y en este tutorial no vamos a profundizar en esta clase.

Existen muchos detalles que no considero tan relevantes en un tutorial como este si es que ya conoces de programación, ya que no es un tutorial de fundamentos de programación sino de Ruby, así que los mencionaré muy rápidamente, por ejemplo los tipos de datos que tenemos en ruby son int como 100, los float como 100.0, boolean como true o false entre otros que tenemos disponibles en la mayoría de los lenguajes, en Ruby todo es un objeto y por ende cada tipo de dato tiene muchos métodos a los cuales se pueden acceder, te invito a que los explores, por ejemplo si quieres saber que métodos corresponden a la clase String puedes hacer lo siguiente:

puts "una cadena cualquiera".methods

Y de esta manera puedes comprobarlo con cualquier tipo de dato, recuerda todo en Ruby es un objeto y por lo tanto todo tiene métodos a los que podemos acceder. Otro detalle poco relevante pero que es bueno que lo sepas es que existen 3 métodos para imprimir en consola, print, puts y p, puedes experimentar con ellos y ver sus diferencias que no son muchas.

Bien otro detalle interesante que aprendí de Ruby, la entrada datos por el usuario y como hacemos esto, muy fácil:

print "dame tu nombre: "
nombre = gets.chomp
puts "Mucho gusto #{nombre}"

Te explico en la primera línea usamos print porque puts nos agrega un salto de línea y print no hace eso, segundo gets captura lo que el usuario escriba en la terminal, gets también agrega un salto de línea, y eso aunque sea invisible nos agrega un caracter más que no necesitamos, para eliminarlo utilizamos chomp, como puedes ver en el ejemplo podemos asignar la entrada del usuario a una variable e imprimirla.

Condicionales

Vamos a ver los condicionales en Ruby, la sintaxis es muy sencilla y de nuevo comparando con Python son muy parecidos, en este momento vamos a entrar a una característica del lenguaje que son los bloques de código, pero ¿cómo definimos un bloque de código? con el condicional if lo miraremos:

if true 
  puts 'es verdadero!'
end

Así de simple es Ruby, delimitamos el final de un bloque de código a través de la palabra reservada end, rápidamente otra característica del lenguaje son los operadores lógicos que de igual manera como en otros lenguajes son, and (&&), or (||) not (!), puedes usar los símbolos que están entre paréntesis o las palabras reservadas, vamos al código:

#con palabras reservadas
falso = false
verdadero = true

if not falso and verdadero or true
  puts 'es falso! o verdadero? O.o'
end

#con simbolos
falso = false
verdadero = true

if !falso && verdadero || true
  puts 'es falso! o verdadero? O.o'
end

La salida es la misma sin embargo los símbolos tienen mayor procedencia, un detalle en este ejemplo es este símbolo #, el cual usamos para hacer comentarios en la misma línea, continuando con las condiciones todo if podría tener un else y se ve de la siguiente manera:

if 10 < 1
  puts 'si es'
else
  puts 'no es'
end

Y también podría tener un sino o elsif, si así se escribe elsif:

if 10 < 1
  puts 'si es menor que 1'
elsif 10 > 5
  puts 'si es mayor que 5'
else
  puts 'no es'
end

Como puedes ver las condiciones y los operadores lógicos en Ruby son muy simple, para terminar con la parte de condicionales, vamos a ver muy rápidamente el condicional case:

dia = 8

case dia
when 1
  puts 'es lunes'
when 2
  puts 'es martes'
when 3
  puts 'miercoles'
when 4
  puts 'es jueves'
when 5
  puts 'es viernes'
else
  puts 'es fin de semana'
end

Y unless:

unless !true
  puts 'es falso'
else
  puts 'es verdadero'
end

unless es exactamente lo opuesto a if, es la negación de if, puedes experimentar con los condicionales e ir probándolos y descubriendo su funcionamiento.

Arrays y Hashes

Antes de comenzar a hablar de las estructuras de control, vamos a ver dos estructuras de datos las cuales vamos a ocupar para trabajar con ciclos, bien estos son los arrays y los hashes, vamos a empezar rápidamente con los array, como en otros lenguajes son colecciones de información que pueden ser de cualquier tipo de dato, por ejemplo:

arr = [1,2,4,true,'string']
puts arr

Los hashes son diccionarios osea que son estructuras de tipo clave-valor, un ejemplo sería el siguiente:

dict = {
  'clave' => 'valor',
  'otra clave' => 'otro valor'
}

puts dict

Algo que me gustaría mucho mencionar sobre los hashes, es que existe una sintaxis especial sobre las cadenas, de hecho esta sintaxis es muy usada con los hashes, y esta sintaxis lleva el nombre de symbols, esta solo pueden ser aplicadas a cadenas de una sola palabra osea que no tienen espacios, por ejemplo:

dict = {
  :clave => 'valor',
  :otra_clave => 'otro valor'
}

puts dict

Tenemos otra manera de escribir los hashes y es la siguiente:

dict = {
  clave: 'valor',
  otra_clave: 'otro valor'
}

puts dict

También son symbols pero con una sintaxis diferente, son como los diccionarios en Python.

Bien rápidamente, los symbols, hacen referencia a un solo objeto o mejor dicho al mismo lugar en memoria, y muchas veces trabajar con symbols es mas eficiente que las cadenas y el mejor ejemplo es trabajar con ellos en los hashes, las claves debería ser symbols y no strings, para demostrar que se trata del mismo objeto (recuerda en Ruby todo es un objeto) podemos hacer lo siguiente:

puts 'hola'.object_id
puts 'hola'.object_id
puts :hola.object_id
puts :hola.object_id

Nuestra consola arrojará el siguiente resultado, porque aunque los strings son los mismos, se crea un objeto diferente por cada uno, en cambio los symbols siempre apuntan al mismo:

Para terminar solo nos falta ver como accedemos a los elementos de un array y de un hash y esto es muy sencillo:

#accediendo al valor de un hash
dict = {
  clave: 'valor',
  otra_clave: 'otro valor'
}

puts dict[:clave]

#accediendo al valor de un array por medio de su índice
arr = [1,2,4,true,'string']
puts arr[4]

Como podemos ver es muy sencillo trabajar con estas estructuras de datos y nos serán muy útiles para trabajar con ciclos.

Estructuras de control (ciclos)

Bien ahora si vamos directo a las estructuras de control, y la primera que vamos a explorar será el ciclo for, supongamos que tenemos el siguiente array: colores = ['rojo', 'azul', 'verde', 'amarillo', 'negro', 'blanco'], podemos hacer un puts o podemos recorrerlo de la siguiente manera:

colores = ['rojo', 'azul', 'verde', 'amarillo', 'negro', 'blanco']

for color in colores
  puts color
end

Así de simple, así de sencillo, sin más complicaciones hemos recorrido nuestro array, pero Ruby nos provee otras formas, por ejemplo:

colores = ['rojo', 'azul', 'verde', 'amarillo', 'negro', 'blanco']

colores.each do |color|
  puts color
end

Prácticamente es una manera de hacer un ciclo de manera funcional, recuerda que en Ruby TODO es un objeto, de modo que los array y los hash también tienen métodos que pueden ser aplicados a ellos, para terminar con el ciclo for vamos a ver un ejemplo de como recorrer un hash:

autos_colores = {
  nissan: 'rojo',
  chevrolet: 'azul',
  volkswagen: 'verde',
  susuki: 'amarillo',
  ford: 'negro',
  kia: 'blanco'
}

autos_colores.each do |key, value|
  puts "El auto #{key} es de color #{value}"
end

Por último en este artículo, vamos a ver el ciclo while, su modificador o "do while" y el ciclo ùntil:

numero = 1

while numero <= 5
  puts 'en ejecucion'
  numero += 1
end

El ciclo while es muy sencillo sin embargo, existe un modificador para este ciclo, que hace la función de do while en otros lenguajes, vamos a ello:

begin 
  puts 'en ejecucion'
end while 1 > 10

La condición NO es verdadera pero de igual manera que do while, la instrucción se ejecuta una sola ves, después se evalúa la condición y al ser false se sale del ciclo. Por último y muy rápidamente vamos a ver el ciclo until:

numero = 1

until numero > 5
  puts 'en ejecucion'
  numero += 1
end

Si notas su función, así como unless es la negación de if, until es la negación del while, ya que until se va a ejecutar mientras la condición sea falsa, cuando la condición se evalúe como verdadera el ciclo se termina.

Fin :(

Como pudiste ver Ruby es un lenguaje, muy simple, súper expresivo, muy divertido y sobre todo "fácil" de aprender, NO abarcamos funciones, clases, métodos de clases, atributos etc... Porque podemos utilizarlo para un artículo posterior, y también conforme siga adentrándome a este maravilloso lenguaje podemos seguir compartiendo conocimiento, sin embargo esta introducción ha sido bastante buena y productiva, insisto acabo de empezar a aprenderlo y si tu ya sabes Ruby y consideras que algo de lo que escribí es incorrecto, con toda confianza envíame un mensaje, porque no solo busco compartir información, sino también aprenderla bien, esta serie de artículos serán como una especie de diario, la cual irá creciendo a medida que siga aprendiendo más sobre Ruby y descubriendo algunos trucos que nos harán más productivos y mejores programadores. Hasta la próxima, nos vemos pronto.

TODO app con React (ejemplo básico)

Isaac Cantún — Wed, 29 Apr 2020 18:23:12 +0000

Tabla de contenido

Introducción
Instalando create-react-app y creando nuestra aplicación
Proyecto a realizar
Primeros pasos
Construyendo la lógica de nuestra aplicación
Puntos finales

Introducción

¡Hola que tal! en los anteriores artículos estuvimos aprendiendo React, pero lo estábamos haciendo de una manera muy básica y sin tantas complicaciones porque el propósito era que aprendiéramos las bases de esta librería, sin embargo no es la forma correcta de trabajar porque cuando trabajamos en aplicaciones reales, necesitamos instalar paquetes, mejorar la arquitectura de nuestras carpetas y algunas cosas más que con simplemente dos scripts es muy difícil, pero no hay de que preocuparse, en esta ocasión vamos a aprender a trabajar con create-react-app, pero ¿qué es create-react-app? según la documentación oficial:

create-react-app is:

Create React App is an officially supported way to create single-page React applications. It offers a modern build setup with no configuration.

¡¡En español por favor!!, bien, es un proyecto desarrollado por el equipo que creó React, nos permite comenzar a trabajar sin "configuraciones", si, entre comillas porque al final de cuentas cuando un proyecto crece siempre hay cosas que configurar, sin embargo esta es una buena manera de empezar, pero antes de que comencemos tienes que tener en cuenta algunas cosas:

Necesitas conocer la terminal de tu sistema operativo 💻.
Tener instalado Node Js.
Tener bases de JavaScript, HTML y CSS.

Instalando create-react-app y creando nuestra aplicación

Para empezar y sin tanto rollo vamos a nuestra terminal a ubicarnos en una carpeta que ya tengas preparada para tus proyectos y ejecutamos el siguiente comando npx create-react-app my-todo, bueno quizá si ya conocías algo de Node Js te preguntarás ¿ y npm?, actualmente la documentación de create-react-app recomienda utilizar npx y esto es porque anteriormente requeríamos instalar create-react-app como una dependencia global para poder utilizar la CLI que nos proporciona, npx se encarga de la instalación (no global) y la creación de nuestro proyecto, dos acciones en un solo paso, así de simple (quizá haya mas que agregar pero esto es lo que nos importa por ahora), continuando con nuestro proyecto, si ya ha terminado de descargar e instalar todas las dependencias deberíamos poder ver dentro de nuestra carpeta de proyectos una nueva llamada my-todo.

Si la abrimos en nuestro editor de código favorito (en mi caso utilizo visual studio code) podemos ver la siguiente estructura de carpetas:

Muy bien en lo que respecta a este artículo no voy a explicar cada archivo, porque no es el objetivo, así que vamos a continuar. Todo el trabajo que vamos a realizar en este proyecto lo haremos dentro de la carpeta src, así que antes de iniciar tenemos que ejecutar nuestro servidor de desarrollo, para levantarlo ejecutamos el comando npm start, puedes usar Yarn si lo tienes instalado, Yarn es un gestor de paquetes para JavaScript creado por Facebook, de hecho yo utilizo Yarn, sin embargo por esta ocasión y por motivos de rapidez usaremos npm, podemos ver la siguiente salida en nuestra terminal lo cual significa que nuestro servidor se esta ejecutando:

Ahora si nos dirigimos a nuestro navegador y visitamos http://localhost:3000 encontramos corriendo nuestra aplicación de React:

Proyecto a realizar

Nuestro proyecto será una clásica, simple y básica aplicación de tareas, quizá puede que sea muy sencilla, pero aprenderemos lo que necesitamos saber de react-create-app, en posteriores artículos iremos trabajando en ejemplos mas complejos, incluso al final de este post, tendrás algunos "retos" o mejoras que podrás hacerle a la aplicación, y poner en práctica lo aprendido, ¡manos a la obra!.

Primeros pasos

Vamos de lleno al código, vamos a modificar algunos archivos para poder comenzar a trabajar, abrimos el archivo src/App.css y eliminamos el código y copiamos lo siguiente:



.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-content {
  background-color: #61dafb;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

form input {
  height: 26px;
  border-radius: 5%;
  display: flex;
  vertical-align: auto;
}

form button {
  cursor: pointer;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  margin: 2px 0;
  border: solid 1px transparent;
  border-radius: 4px;
  padding: 0.5em 1em;
  color: #ffffff;
  background-color: darkgreen;
  height: 30px;
  width: 120px;
}

h3 {
  margin: 0;
}

.list {
  display: flex;
  margin: 5px;
  flex-direction: row;
  align-items: flex-end;
}

.btn-delete {
  cursor: pointer;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  border: solid 1px transparent;
  border-radius: 4px;
  color: #ffffff;
  background-color: red;
  height: 30px;
  width: 30px;
}

Y ahora en src/App.js eliminamos el contenido y copiamos lo siguiente:



import React from 'react';
import './App.css';

const  App = () => {

  return (
    <div className="App">
      <div className="App-content">
        <p>
          Aquí haremos nuestro TO-DO list
        </p>
      </div>
    </div>
  );
}

export default App;

```

te explico rápidamente ya que esto no es muy relevante, solo hice unas pequeñas modificaciones a la hoja de estilos que usaremos y al componente `App` el cual solo lo convertimos a una `arrow function`, así que continuemos si vamos a nuestro navegador podemos ver los cambios realizados:

![modificaciones](https://i.ibb.co/X3SL4xF/cambios.png) 

Es todo, no necesitamos nada más con lo que a estilos corresponde, vamos a empezar con la parte ruda, lo primero que tenemos que hacer es crear una carpeta en la raíz de `src` a la cual llamaremos `components`, obviamente y como lo imaginas ahí estarán nuestros componentes, para este ejemplo solo crearemos 2, vamos al primero, dentro de `components` creamos un archivo llamado `Todo.jsx`, antes de ir al código te explico, con React podemos utilizar la extensión `.js` o `.jsx` para nuestros componentes sin ningún problema, el motivo por el cual yo uso la extensión `.jsx` es únicamente por mi editor de código, ya que con esta extensión tengo un mejor autocompletado, continuemos agregamos el siguiente código dentro de nuestro componente `Todo`:

```react
import React from 'react'


const Todo = () => {
    return (
        <h1>Todo component</h1>
    )
}

export default Todo
```

Y ahora también dentro de la carpeta `components` creamos un archivo llamado `Form.jsx` con el siguiente código:

```react
import React from 'react'


const Form = () => {
    return (
        <h1>Form component</h1>
    )
}

export default Form
```

Ahora que tenemos ambos componentes hagamos lo siguiente dentro del componente `Form`, agregamos lo siguiente:

```react
import React from 'react'
import Todo from './Todo'


const Form = () => {
    return (
        <>
            <h1>Form component</h1>
            <Todo />
        </>
    )
}

export default Form
```

Y ahora en nuestro componente `App` hacemos lo siguiente:

```react
import React from 'react';
import './App.css';
import Form from './components/Form';

const  App = () => {

  return (
    <div className="App">
      <div className="App-content">
        <p>
          Aquí haremos nuestro TO-DO list
        </p>
        <Form />
      </div>
    </div>
  );
}

export default App;
```

En nuestro navegador ya podemos ver que nuestros dos componentes se han incluido correctamente:

![form y todo](https://i.ibb.co/WDd8Zn7/form-y-todo.png)

## Construyendo la lógica de nuestra aplicación <a name="logica">

Hasta este punto tenemos todo lo que necesitamos para trabajar, la mayor parte del trabajo lo vamos a realizar en nuestro componente `Form` así que vamos a el, estamos construyendo una aplicación con tareas, entonces necesitamos las tareas (*si ya se repetí la palabra tareas, pero es para que no lo olvides*), entonces lo primero que haremos es usar uno de nuestros queridos `Hooks` para esto, vamos al código:

```react
import React, {useState} from 'react'
import Todo from './Todo'


const Form = () => {
    const [todos, setTodos] = useState([
        {todo: 'todo 1'},
        {todo: 'todo 2'},
        {todo: 'todo 3'}
    ])

    return (
        <>
            <h1>Form component</h1>
            <Todo />
        </>
    )
}

export default Form
```

Lo que hicimos aquí fue importar `useState` y declarar un estado dentro de nuestro componente `Form`, el cual es un `array` de `objetos` que serán nuestras tareas, bien pero esto aún no hace absolutamente nada, así que arreglemos eso, en nuestro componente `Todo` realizamos los siguientes cambios:

```react
import React from 'react'


const Todo = ({todo}) => {
    return (
        <>
            <h3>{todo}</h3>
        </>
    )
}

export default Todo
```

Eliminamos la etiqueta `h1` y en su lugar agregamos un `h3` el cual se encarga de imprimir un `prop` que es únicamente el nombre de nuestra tarea, vamos de nuevo al componente `Form` y agregamos lo siguiente:

```react
import React, {useState} from 'react'
import Todo from './Todo'


const Form = () => {
    const [todos, setTodos] = useState([
        {todo: 'todo 1'},
        {todo: 'todo 2'},
        {todo: 'todo 3'}
    ])

    return (
        <>
            {
                todos.map((value, index) => (
                    <Todo todo={value.todo} />
                ))
            }
        </>
    )
}

export default Form
```

Muy bien, lo que hacemos es recorrer nuestro `array` de tareas (`todos`) el cual habíamos inicializado con tres objetos, dentro de la función `map` incluímos nuestro componente `Todo` y le pasamos el `prop` que necesita, si vamos al navegador tenemos el siguiente resultado:

![tareas renderizadas](https://i.ibb.co/XkLC4hn/tareas-navegador.png)

¡Perfecto! ya tenemos nuestras tareas renderizadas, pero ahora necesitamos empezar a agregar más tareas, vamos al código, vamos a realizar unas modificaciones algo amplias en nuestro componente `Form` para que se vea así:

```react
import React, {useState} from 'react'
import Todo from './Todo'


const Form = () => {
    const [todo, setTodo] = useState({})
    const [todos, setTodos] = useState([
        {todo: 'todo 1'},
        {todo: 'todo 2'},
        {todo: 'todo 3'}
    ])

    const handleChange = e => setTodo({[e.target.name]: e.target.value})

    const handleClick = e => console.log('click click')

    return (
        <>
            <form onSubmit={e => e.preventDefault()}>
                <label>Agregar tarea</label><br />
                <input type="text" name="todo" onChange={handleChange}/>
                <button onClick={handleClick}>agregar</button>
            </form>
            {
                todos.map((value, index) => (
                    <Todo todo={value.todo} />
                ))
            }
        </>
    )
}

export default Form
```

Voy a tratar de explicarte a detalle cada cambio, vamos a empezar con la nueva constante que definimos arriba de nuestro estado de `TAREAS`, agregamos este fragmento de código `const [todo, setTodo] = useState({})`, el cual inicializa un nuevo estado que nos va a servir para agregar UNA tarea, ya que el estado anterior, nos ayuda a crear UNA LISTA de TAREAS, una vez aclarado esto, vamos a la siguiente, la función `const handleChange = e => setTodo({[e.target.name]: e.target.value})`, captura el evento `change` de nuestro `input` el cual se mira ahora así `<input type="text" name="todo" onChange={handleChange}/>`, si te fijas el `input` tiene un atributo `name` en el cual el nombre es el mismo que la `key` de nuestros objetos (tareas), esto es porque en la función `handleChange` recibimos como parámetro el evento como tal y esta representado con la variable `e`, `e` nos permite acceder a algunas propiedades entre ellas al `name` del input y al `value` del mismo y estos se encuentran dentro de `target`, es por eso que hacemos `setTodo({[e.target.name]: e.target.value})` dentro de `handleChange`, modificamos el estado de nuestra aplicación para capturar una nueva tarea, la siguiente función se llama `handleClick`, su única función en este momento es imprimir en consola un mensaje, pero mas adelante eso cambiará, para terminar con los detalles nuestro formulario también ejecuta un evento, solo que esta vez no creamos una nueva función sino que ejecutamos una `arrow function` directamente, de nuevo capturamos el evento y hacemos un `e.preventDefault()`, si vienes de `jQuery` creo que sabes perfectamente para que sirve esto, y si no sabes pues es para que al hacer `submit` de nuestro formulario no se refresque nuestro navegador, bien por último nuestro botón ejecuta en el evento `onClick` la función `handleClick`, si en efecto esa que solo imprime un mensajito, perfecto, teniendo ya todo esto vamos a nuestro componente `Todo` para realizar unas modificaciones y se vea de la siguiente manera:

```react
import React from 'react'

const Todo = ({todo, index, deleteTodo}) => {
    return (
        <>
            <div className="list">
                <h3>{todo}</h3> <button className="btn-delete" onClick={() => deleteTodo(index)}>x</button>
            </div>
        </>
    )
}

export default Todo
```

Aquí no hay mucho que explicar, agregamos un boton con una clase `btn-delete`, **OJO** en react no podemos usar la palabra `class` en nuestro código `jsx`, recuerda que `jsx` **NO** es `HTML` sino una extensión del lenguaje `JavaScript` y `class` es una palabra reservada del lenguaje, en su lugar usamos `className`, aclarado este punto, continuemos, agregamos dos `props` más `index` y `deleteTodo`, estas dos propiedades la cual una es un entero y la otra es una función nos ayudarán mas adelante para eliminar tareas, la función `deleteTodo` se ejecuta en el evento `onClick` del botón que acabamos de agregar (*comunicación hijos a padres, ¿recuerdas?*), hemos terminado nuestro componente `Todo` aquí ya no haremos más.

Volvamos a nuestro componente `Form` modificamos `handleclick` y de igual manera agregamos un nuevo método, así es `deleteTodo` que será el prop que le pasaremos a nuestro componente `Todo` al igual que `index`, entonces el código se vería de la siguiente manera.

```react
const handleClick = e => {
    if(Object.keys(todo).length === 0 || todo.todo.trim() === '') {
        alert('el campo no puede estar vacio')
        return
    }
    setTodos([...todos, todo])
}

const deleteTodo = indice => {
    const newTodos = [...todos]
    newTodos.splice(indice, 1)
    setTodos(newTodos)
}
```

La función `handleClick` ahora ya tiene una funcionalidad, lo primero que hacemos es validar que nuestro input no este vacío y después solo lo agregamos al estado, hacemos uso del `spread operator` dentro de `setTodos` para agregar nuestra nueva tarea y conservar todas las que tenemos, y la función `deleteTodo` obtiene todas las tareas, y elimina la tarea con el indice que le pasamos como parámetro y por último actualizamos el estado con la nueva lista de tareas, para terminar con nuestro ejemplo vamos a modificar la función `map` dentro del `return` para pasarle a `Todo` los props que necesita:

```react
todos.map((value, index) => (
   <Todo todo={value.todo} key={index} index={index} deleteTodo={deleteTodo}/>
))
```

Y nuestra aplicación se ve así:
 ![fin](https://i.ibb.co/rxydQ9g/fin.png)

## Puntos finales <a name="final">

Hemos terminado nuestra aplicación, la cual funciona sin embargo, hay muchas cosas que podemos mejorar, puedes probar tratando de mejorarlas, por ejemplo nuestra aplicación debería poder modificar una tarea específicamente, quizá marcarla como completada, quizá la lista de tareas podamos tenerla en un componente por separado y definitivamente mejorar el diseño, eres libre de clonar el repositorio de [Github](https://github.com/izakntun/todo-app) y mirar el código y mejorarlo, espero que te haya sido útil y nos vemos en el próximo artículo, saludos y ¡Happy Coding!

Fundamentos de React

Isaac Cantún — Tue, 21 Apr 2020 19:23:33 +0000

Tabla de contenido

Introducción
¿Qué son los componentes web?
Componentes funcionales con React
Múltiples componentes
Comunicación entre componentes
Comunicación de hijos a padres, eventos y... ¡Hooks!
El fin :(

Introducción

¡Hey! El día de hoy vamos a continuar con el tutorial de React, si no tuviste la oportunidad de leer mi artículo anterior aquí te lo dejo, el cual fue una introducción a React, realmente no profundizamos mucho pero fue suficiente para comprender el funcionamiento de nuestra librería favorita.

En esta ocasión vamos a continuar trabajando en nuestro archivo app.js, si recordamos como se miraba nuestro app.js:


const greeting = 'Hola React!'
const element = <h1>{greeting}</h1>

ReactDOM.render(
    element,
    document.getElementById('root')
)

Vamos a seguir sobre el mismo camino. ACLARACIÓN esta serie de artículos solo son tutoriales básicos, la implementación no debería usarse para producción, aclarado esto, continuemos.

¿Qué son los componentes web?

Una de las características de las librerías y frameworks actuales como React, Vue o Angular entre otros, es el paradigma que siguen y este se llama basado en componentes, pero ¿qué son los componentes?, según la Wikipedia, define un componente de la siguiente manera:

Definición de componente

Un componente de software es un elemento de un sistema que ofrece un servicio predefinido, y es capaz de comunicarse con otros componentes.

No vamos a entrar a detalle para no extendernos más con la teoría y para explicarlo mejor nos vamos directo al código, entonces tenemos la siguiente línea:

const element = <h1>{greeting}</h1>

Prácticamente eso podría ser un "componente", sin embargo vamos a entrar en materia, existen dos formas de crear componentes en React, la primera y la que en su momento fue la mas usada son los componentes de clase,hoy en día y según la documentación oficial de React, todos deberíamos comenzar a migrar a la segunda forma que son los componentes funcionales, y aunque no hay planes AÚN de remover los componentes de clase, los creadores de React nos sugieren dejar de usarlos y en su lugar utilizar los functional components haciendo uso de hooks, y por eso en esta serie de tutoriales los usaremos.

Componentes funcionales con React

Como vimos en el bloque anterior tenemos asignada una etiqueta h1 a nuestra constante element, vamos a convertir eso en un componente funcional de la siguiente manera:

const Element = () => (<h1>{greeting}</h1>)

Bien, en este tutorial haremos uso de las nuevas (ni tan nuevas) características que nos ofrece la especificación EcmaScript y deberías estar familiarizado con ella, bueno, definimos una función que retorna nuestra etiqueta h1, los paréntesis son la forma en la que podemos retornar elementos JSX, pero ¿cómo hacemos uso de este nuevo componente que hemos creado?, nuestro código se vería de la siguiente manera:

const greeting = 'Hola React!'
const Element = () => (<h1>{greeting}</h1>)

ReactDOM.render(
    <Element />,
    document.getElementById('root')
)

Como puedes observar dentro del método render de la clase ReactDOM sustituimos nuestra constante element, por la función Element que acabamos de crear, en React todos los componentes deben empezar con mayúscula y utilizando camel case, el elemento <Element /> es el método que acabamos de construir, solo que esta expresado en sintaxis JSX, como puedes ver crear componentes con React es muy sencillo, sin embargo podemos hacer mucho mas que eso.

Múltiples componentes

Podemos crear múltiples componentes que pueden ser usados dentro de otros componentes, sí continuamos con nuestro ejemplo vamos a crear otro componente de la siguiente manera:

const Button = () => (<button>click me</button>)

Hemos creado un componente Button que en este momento no hace absolutamente nada, pero aún así lo vamos a ocupar, vamos a realizar unos cambios a nuestro componente Element para poder usar nuestro componente Button en él:

const Element = () => {
    return (
        <React.Fragment>
            <h1>{greeting}</h1>
            <Button />
        </React.Fragment>
    )
}

Ok, vamos a explicar algunas cosas que podemos observar en las modificaciones que realizamos, la primera, estamos retornando en nuestro jsx la etiqueta h1 y nuestro componente Button, pero si eres observador puedes darte cuenta que están dentro de una etiqueta <React.Fragment></React.Fragment>, esto es porque todos los componentes en React necesitan tener una etiqueta padre, esto quiere decir que nosotros no podemos solo retornar dos o mas elementos jsx o componentes que estén al nivel mas alto, es por eso que hemos envuelto nuestro h1 y nuestro componente Button con una etiqueta <React.Fragment></React.Fragment>, pudimos haberlo echo con una etiqueta div, la diferencia es que <React.Fragment></React.Fragment>, no nos crea ningún elemento html, solo nos ayuda a cumplir la regla, de modo que si lo hiciéramos con una etiqueta div, esta se renderizaría en nuestro html y realmente no la necesitamos, puedes leer en la documentación oficial de React acerca de esto. Si vamos al navegador podemos observar que nuestro componente Button se esta renderizando correctamente:

Y, si inspeccionamos nuestro html no existe ningún elemento más que nuestro h1 y nuestro button:

Comunicación entre componentes

Otra característica de los componentes en React es que pueden comunicarse entre ellos como decía la definición de este bloque, entonces vamos ahí, todos los componentes al final de cuentas son funciones, por eso se llaman componentes funcionales, entonces por defecto todos pueden recibir un parámetro llamado props, el cual contiene todos los "mensajes" de los componentes padre, vamos a jugar con esto un poco, que tal si yo quisiera usar mi componente Button en muchos otros lugares, pero el texto del botón no siempre será el mismo, entonces podemos hacer que el texto sea una propiedad dinámica de la siguiente manera:

const Button = props => {
    return (
        <button>{props.text}</button>
    )
}

Bien, nuestro componente esta listo, pero ¿cómo le pasamos esa propiedad?, lo hacemos de la siguiente manera en nuestro componente Element:

const Element = () => {
    return (
        <React.Fragment>
            <h1>{greeting}</h1>
            <Button text="click me"/>
        </React.Fragment>
    )
}

Como puedes observar lo pasamos como si se tratara de un atributo html, muy sencillamente lo hemos logrado, si revisas tu navegador el texto sigue siendo click me.

Comunicación de hijos a padres, eventos y... ¡Hooks!

En el bloque anterior, aprendimos a enviar "mensajes" a los componentes hijos desde el padre, por medio de props, pero también hay la probabilidad de que tu necesites que en el padre algo se actualice, desde el hijo y esto lo realizamos por medio de funciones, de una manera muy sencilla, antes de terminar este articulo vamos a escribir un ejemplo clásico y muy básico de un contador, utilizaremos un hook de React llamado useState, los hooks son parte de una nueva API, que nos facilitan el trabajo con functional components, anteriormente nuestros componentes funcionales no contaban con un estado, solo nuestros componentes de clase, ya que el state, la función setState, el ciclo de vida de los componentes, etc... se encontraba en la clase React.Component, de la cual heredaban todos nuestros componentes de clase, entonces un componente funcional al no poder heredar de ella, pues perdíamos todas estas características, pero esto ha cambiado para las últimas versiones de React con la llegada de los hooks, en este ejemplo solo utilizaremos uno como mencione antes, usaremos useState para proveer a nuestro functional component de un estado local.

Antes de continuar rápidamente te explico que es el state así como los propscontiene información que puede ser usada por el componente, la diferencia es que el state cuando "cambia", el componente es renderizado nuevamente en el virtual DOM, el estado es inmutable, osea que no puede ser modificado directamente y para cambiarlo tenemos que hacer uso de una función, pero te lo explico en un momento.

vamos directo a los hooks, dentro de nuestro componente Element agregamos lo siguiente:

const [count, setCount] = React.useState(0)

Como ves estamos haciendo uso de un hook llamado useState, el parámetro que le pasamos a useState es la inicialización de nuestro estado, en este caso hacemos destructuring de useState, para obtener como primer valor del array nuestro contador del state de nuestro componente y el segundo valor es una función que nos ayudará a cambiar el valor de count, continuamos, entonces ¿cómo modificamos el estado de nuestra aplicación?, como explicaba mas arriba vamos a ocupar que nuestro componente hijo (Button) modifique el estado del componente padre (Element) y la manera de hacerlo es por medio de una función de la siguiente forma:

const Element = () => {

    const [count, setCount] = React.useState(0)

    const handleClick = () => console.log('click!!')

    return (
        <React.Fragment>
            <h1>{greeting}</h1>
            <Button handleClick={handleClick} text="click me"/>
        </React.Fragment>
    )
}

const Button = ({text, handleClick}) => {
    return (
        <button onClick={handleClick}>{text}</button>
    )
}

Vamos paso a paso, primero en nuestro componente Element agregué una función llamada handleClick que será la responsable de actualizar el state desde el hijo, después pasamos handleClick como un prop con el mismo nombre a nuestro componente Button, otro cambio que realizamos es, en nuestro componente Button, recibíamos props como parámetro, eso podemos cambiarlo haciendo destructuring de props y solo obteniendo lo que nos interesa, en este caso obtuvimos text y handleClick, ya dentro de nuestra etiqueta button que esta en nuestro componente Button ejecutamos handleClick a través de un evento JavaScript, en React el manejo de eventos es sencillo solo escribes el evento como si de un atributo se tratara, en este caso estamos usando onClick, si quieres conocer mas acerca de los eventos en React puedes mirar la documentación oficial, si hacemos click varias veces en nuestro botón y vamos a la consola de nuestro navegador, podemos ver que la función se esta ejecutando:

Para terminar nuestro ejemplo, hagamos algo útil con nuestra función ya que imprimir algo en consola no es el objetivo, modificamos handleClick de a siguiente manera:

const handleClick = e => {
    setCount(count + 1)
}

Si observamos, estamos haciendo uso de nuestra función setCount que obtenemos de useState para modificar el estado de nuestro componente, le pasamos como parámetro nuestra variable count y le sumamos 1 al valor que actualmente tiene ya que cada que hacemos click en el botón nuestro estado se actualiza, vamos a terminar nuestro ejemplo agregando en nuestro componente Element lo siguiente:

const Element = () => {

    const [count, setCount] = React.useState(0)

    const handleClick = e => {
        setCount(count + 1)
    }

    return (
        <React.Fragment>
            <h1>{greeting} {count}</h1>
            <Button handleClick={handleClick} text="click me"/>
        </React.Fragment>
    )
}

Solo agregamos count a nuestro h1 como puedes ver hemos terminado, si vamos a nuestro navegador y hacemos click en el botón podemos observar que count se esta actualizando sin problemas:

El fin :(

Hemos terminado esta serie de dos artículos, en los cuales aprendimos bastantes cosas interesantes de React, con esto siéntete listo para ir por temas más avanzados, estos artículos están orientados a programadores que nunca han utilizado React y que desean un vistazo rápido, agradezco mucho el tiempo que tomaste para leerlos, en el futuro planeo escribir más artículos con temas más avanzados, aunque déjame decirte que hemos utilizado las características más importantes de React y no ha sido poco, aunque quizá fue un ejemplo pequeño, creo que fue bastante completo para comenzar de lleno con esta maravillosa librería de JavaScript. Antes terminar quiero dejarte el código completo de nuestro ejemplo, decidí no subirlo a github ya que solo fueron dos archivos, así que aquí te lo dejo:

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React - Basic Example</title>
</head>
<body>
    <div id="root"></div>

    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script src="app.js" type="text/babel"></script>
</body>
</html>

/** app.js **/

const greeting = 'Hola React!'

const Element = () => {

    const [count, setCount] = React.useState(0)

    const handleClick = e => {
        setCount(count + 1)
    }

    return (
        <React.Fragment>
            <h1>{greeting} {count}</h1>
            <Button handleClick={handleClick} text="click me"/>
        </React.Fragment>
    )
}

const Button = ({text, handleClick}) => {
    return (
        <button onClick={handleClick}>{text}</button>
    )
}

ReactDOM.render(
    <Element />,
    document.getElementById('root')
)

Hasta la próxima, saludos!!

Introducción a React

Isaac Cantún — Mon, 20 Apr 2020 21:32:51 +0000

Tabla de contenido

Introducción
Formas de usar React
Jsx, ReactDOM y otras cosas raras

Introducción

Actualmente existe muchas librerías y frameworks en el mercado, de muchos sabores y colores, y probablemente tú seas fanático de uno u otro, sin embargo hoy quiero darte una pequeña introducción a una librería de JavaScript que en lo personal me ha gustado mucho, he probado los 3 más reconocidos del mercado (Vue.js, Angular, ReactJs) y de entre ellos me he quedado con uno y este es React.Js.

Bien, pero ¿por qué React? React es una librería para construir interfaces de usuario y consigo trae muchos beneficios dentro de las muchas ventajas que encontré de trabajar con React vs Vue.js y Angular que de hecho fue la que más llamó mi atención fue la expresividad de React, la forma en la que se declaran los componentes (obviamente es porque jsx es una belleza), también aprovecha al máximo las nuevas características de la especificación ECMAScript, últimamente hubieron cambios importantes dentro de la librería motivando a los programadores a dejar de usar componentes de clase y en su lugar utilizar componentes funcionales, los cuales apoyan la programación funcional con React, los hooks son baterías incluídas que nos facilitan la tarea de trabajar con componentes funcionales, por supuesto la enorme comunidad que hay detrás de React creando librerías y herramientas que nos facilitan muchas tareas complejas, por último los ingenieros de Facebook son los creadores y quienes mantienen la librería y por supuesto que React también es usado dentro del core de la red social quizá esto nos garantiza que no va a ser un proyecto abandonado, por el contrario en cada actualización habrán cambios y mejoras en beneficio de todos, esto y más hace de React una excelente opción, pero bueno para eso es esta introducción y vamos allá.

Formas de usar React

Puedes usar React de varias maneras, desde instalar react-create-app con npm hasta usarlo con una simple etiqueta script (dos realmente) y esta última opción es la que ocuparemos, al ser una introducción no necesitamos más.

Lo primero que haremos será crear la estructura básica de un HTML con el nombre index.html en el cual vamos a agregar los scripts que corresponden a react y a react-dom, de igual manera crearemos un elemento div con un id llamado root:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React - Basic Example</title>
</head>
<body>
    <div id="root"></div>

    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
</body>
</html>

La primer etiqueta corresponde al core de la librería, este script apenas tiene un peso de 100kb lo que lo convierte en una librería bastante ligera, el segundo script corresponde a react-dom el cual nos proporciona métodos del dom que es con los que React hace su magia. OJO!! Estos scripts son únicamente para DESARROLLO, no es correcto usarlos en producción, en posteriores tutoriales aprenderemos la forma correcta de trabajar un proyecto de react que puedas llevar a producción.

Dentro de la misma carpeta donde creamos el archivo index.html vamos a crear un nuevo archivo con el nombre app.js este es el que va a contener todo nuestro codigo jsx, ahora agregamos el script dentro de nuestro html debajo de los dos scripts de React:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React - Basic Example</title>
</head>
<body>
    <div id="root"></div>

    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="app.js" type="text/javascript"></script>
</body>
</html>

Jsx, ReactDOM y otras cosas raras

Estamos listos para empezar a explorar todas las funcionalidades que React nos proporciona, primero para empezar a trabajar dentro de nuestro archivo app.js vamos a proceder a declarar una constante:

const greeting = 'Hola React!!'

Obviamente, esto aún no renderiza nada en el navegador, ya que aún no estamos haciendo uso de react, pero vamos allá, no te desesperes, ¿recuerdas el script de react-dom? bien ahora vamos a usarlo para poder empezar a jugar con sus métodos y comprender como es que react intereactúa con nuestro navegador, primero tenemos que agregar el método render que nos proporciona la clase ReactDOM y lo hacemos de la siguiente manera:


const greeting = 'Hola React!!'

ReactDOM.render()

Probablemente y si estas siguiendo este ejemplo conmigo veas un error en consola que diga algo así Uncaught Error: Target container is not a DOM element. tranquilo/a no hay que preocuparse, este error se debe a que el método render de ReactDOM recibe dos parámetros, el primero es un elemento que puede ser de cualquier tipo (string, number, html o mejor dicho jsx, etc...) y el segundo es un contenedor que será quien contenga todo el rederizado de nuestra aplicación, recuerdas cuando que creamos la estructura de nuestro html creamos un elemento <div id="root"></div> aquí es el momento donde lo vamos a ocupar.

Como primer parámetro pasaremos nuestra constante greeting, y como segundo parámetro pasaremos nuestro elemento root de la siguiente manera:


const greeting = 'Hola React!!'

ReactDOM.render(
    greeting,
    document.getElementById('root')
)

Para poder probar en tu navegador nuestro código yo estoy haciendo uso de una extensión de VS Code que se llama live server que nos levanta un servidor para probar aplicaciones como la de nuestro ejemplo, si vamos al navegador podemos ver algo como esto:

Wow, ¿sabes que acaba de ocurrir? bien, te explico, el método render tomo nuestra constante greeting y la puso dentro de nuestro contenedor, si así es, nuestro elemento #root, si inspeccionamos el html podemos comprobarlo, se vería algo así:

Ok, pero..., React no sería tan divetido si solo hiciera eso, bien hagamos algo mejor, que tal si empezamos con jsx, bueno, pero ¿qué es jsx? (según la documentación oficial de React), jsx es:

JSX

Es una extensión de la sintaxis de JavaScript.

Se usa para describir cómo debería ser la interfaz de usuario.

JSX puede recordarte a un lenguaje de plantillas (HTML), pero viene con todo el poder de JavaScript.

JSX produce “elementos” de React.

Pero te ayudaré a comprenderlo un poco mejor, jsx es una "manera" de escribir html dentro de nuestro código javascript sin la necesidad de escribirlo entre comillas, o strings literals o concatenarlo etc... (tu me entiendes eso que hace engorroso a html dentro de javascript), pero, ¿cómo lo hacemos? ¡es muy fácil! presta mucha atención lo primero que debemos hacer son dos modificaciones a nuestro archivo index.html, recuerda que esto es solo una introducción muy básica a React y lo que te muestro aquí nunca debe ser usado en producción, aclarado una vez mas continuemos:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React - Basic Example</title>
</head>
<body>
    <div id="root"></div>

    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script src="app.js" type="text/babel"></script>
</body>
</html>

Si pudiste observar que sucedió te darás cuenta que agregamos una etiqueta script nueva la cual contiene babel y nuestra etiqueta que contiene el enlace a nuestro archivo app.js le cambiamos el atributo type de text/javascripta text/babel pero ¿porqué hicimos esto?, mira, si bien los navegadores actuales ya soportan la mayoría de las nuevas características de javascript, ellos no entienden jsx porque esta sintaxis es propia de React, entonces babel nos ayuda a convertir nuestro código jsx a algo que los navegadores puedan entender, una vez comprendido este asunto, continuemos porque... ¡ya podemos usar jsx en nuestro pequeño ejemplo!, vamos hacer lo siguiente:


const greeting = 'Hola React!!'

const element = <h1>{greeting}</h1>

ReactDOM.render(
    element,
    document.getElementById('root')
)

Si vamos al navegador podemos ver que nuestra constante greeting se mira mas grande y el texto se ve como en negritas y esto es porque si inspeccionamos nuestro html de nuevo podemos observar que dentro de nuestro contenedor (así es de nuevo nuestro #root) se encuentra una etiqueta h1 que contiene el texto de nuestro saludo, aquí podemos observar dos de las características mas poderosas de React, la primera es la forma en la que podemos incluir etiquetas html dentro de nuestro código javascript esto mi querid@ amig@ es jsx y la segunda es la forma en la que podemos pasar código dinámico a nuestras etiquetas de jsx por medio de las llaves, brackets, corchetes o como te guste llamarlos {}, lo importante es que conozcas que estas características son las que le darán poder y dinamismo a tu código y si tienes la oportunidad de trabajar con esta librería en tu empleo o empresa, este será el pan de cada día.

Antes de terminar este post que por supuesto fue muy básico pero que nos ayudó a comprender como funciona React, quisiera hacer unas pequeñas aclaraciones, jsx NO es html, es solo una extensión del código javascript que usa React y la segunda aclaración es que este ejemplo se pudo haber hecho de muchas maneras, sin embargo decidí que fuera así porque de esta forma es como realmente se trabaja a nivel profesional (hablando de la sintaxis ocupada), si quizá conoces un poco de React puede que conozcas React.createElement pero no tiene caso extender el tutorial solo para comparar ambas formas.

Espero que este artículo te haya abierto el panorama con respecto al funcionamiento de esta librería que por cierto tiene un amplo abaníco laboral, en próximos tutoriales haremos cosas mucho mas interesantes para que puedas conocer los usos reales que le podemos dar a React, muchas gracias por leer este artículo y nos vemos en el próximo.