React.js: Conceptos básicos que te ayudarán a empezar

Si has llegado a este artículo puede ser por dos cosas, estás aprendiendo React o quieres saber si vale la pena o no. Para todos los programadores, esta se ha convertido en una intrigante respuesta. ¿Es importante aprender React.js o no?

Pues, a continuación te mostraremos unos conceptos básicos para que te ayude a entender de que trata esta grandiosa librería que ha creado tendencias en el mundo digital. Queremos saber en los comentarios además ¿Por qué escogerías React? Ya te lo diremos.

Pero bueno ¿Qué es React?

Entender que React es una “librería” de Javascript que nos ayuda a crear aplicaciones web (UX/UI). No es una solución a todos tus problemas de código, y puede que también te dé dolores de cabeza en alguna ocasiones.

A menudo, necesitarás  instalar paquetes adicionales para conseguir una solución a tus problemas. React te ayudará a generar interfaces de usuarios. Fue creada por Facebook, parte del porqué ha tomado tanta cancha en la programación.

Quiero más

Por supuesto! gracias al apoyo que se ha conseguido por todos ustedes (comentando, suscribiéndote y compartiendo) se agregaron nuevos videos, en esta ocasión iniciamos el curso de testing en angular, curso de node, curso mongo y mucho más

¿Qué es "Create React App"? 🤓

Es la herramienta que usarás si estás comenzando con esta librería. Te ahorrará mucho tiempo y crear una aplicación web sin necesidad de configurar nada. No se encarga del Back End, solo genera un flujo de construcción para Front End.

Será el instrumento que nos entregue todo lo necesario para comenzar una app sin tener que desperdiciar tiempo configurando herramientas. Para poder utilizarla necesitas tener Node >= 10.16 y npm >= 5.6 instalados.

Es hora de crear el proyecto, pero, ¿qué diferencia existen entre npx y npm?

Hay varios contenidos en la web, en donde se usan npm, pero también se ha visto que se usa de la misma manera el npx. Y entonces, ¿Cómo saber cuál usar cuando se está empezando?

Crear proyecto y ejecutarlo:

npx create-react-app my-app
cd my-app
npm start

“En donde se coloca el my-app” va el nombre de su aplicación React. Tienes la facilidad de poder cambiar ese nombre al que tú prefieras.”

Este es el comando para crear e instalar una aplicación de react, y queremos aclarar que a continuación las diferencias entre ellas:

• NPM: Se encarga de gestionar paquetes, pero no facilita la ejecución de nada. Por sí mismo no puede ejecutar ninguno de ellos. Si eso es lo que busca necesita especificarlo en su package.json del archivo.
• NPX: Ejecuta paquetes de Node. El npx es la actualización a este comando, viene incluido con la versión 5.2+ de NPM. Con él podrá comprobar si <command> existe en $PATH o en los binarios del proyecto local y lo ejecutará. Además, tiene la facilidad de realizar paquetes que no se han instalado aún.

¿Qué es lo que hemos hecho con ese comando?

Si todo va bien se abrirá nuestro navegador con la aplicación funcionando.

El Create React App ha formado una estructura de ficheros que se puede visualizar así:

  README.md
  node_modules/     // Librerías de la aplicación
  package.json      // Información y dependencias de nuestro proyecto
  .gitignore        // Fichero donde se determina qué carpetas no deberán ser trackeadas con git
  public/
    favicon.ico
index.html          // Página donde se inyectarán los componentes de React
  src/              // Directorio de desarrollo que es el que usaremos nosotros
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg
  

De manera predeterminada el URL del servidor que funciona por lo general es: http://localhost:3000/, pero el puerto podría variar.

¿Y qué carpetas se formaron?

De forma automática, se crearon las siguientes carpetas:

• Node_modules: Allí encontraremos las dependencias npm del proyecto.
• Public: Es la raíz del servidor donde encuentras el index.html, el archivo principal y el favicon.ico de nuestra nueva aplicación.
• Src: Es la carpeta donde trabajaremos. En ella se alojan los archivos de los componentes de React.

Entonces ¿Cómo aplicamos componentes?

Para crear el primer componente hacemos un nuevo fichero llamado: Hola.js en la carpeta src.

Para crear entonces el “Hola Mundo” haremos lo siguiente:

“En React se escribe con la primera letra en mayúscula”

import React, { Component } from 'react';
 
class Hola extends Component {
  render() {
    return (
      <h1>Hola mundo, estamos empezando en el React con Código en Casa</h1>
    );
  }
}
 
export default Hola;

Y ¿Qué son los Hooks? 🧐

Son la nueva API de React que permite tener un estado y otras características más en los componentes creados con una función. Antes, esto no existía y se usaban las clases para poder acceder a las.

La traducción directa de Hook es gancho, y esa es su función obtener o enganchar los componentes funcionales. Antes con las clases para crear un componente contador se tenía que hacer de la siguiente forma:

Import React, { Component } from 'react'

class Contador extends Component {
  state = { count: 0 } // inicializamos el state a 0

  render () {
    const { count } = this.state // extraemos el count del state

    return (
      <div>
        <p>Has hecho click {count} veces</p>
        { /* Actualizamos el state usando el método setState */ }
        <button onClick={() => this.setState({ count: count + 1 })}>
          Haz click!
        </button>
      </div>
    )
  }
}

Pero, ahora esto ha quedado en el olvido gracias a los hooks, se utiliza function y se importa con useState de la siguiente manera:

// importamos useState, el hook para crear un state en nuestro componente
import React, { useState } from 'react'

function Contador() {
  // useState recibe un parámetro: el valor inicial del estado (que será 0)
  // y devuelve un array de dos posiciones:
  //  la primera (count), tiene el valor del estado
  //  la segunda (setCount), el método para actualizar el estado
  const [count, setCount] = useState(0)

  return (
    <div>
      <p>Has hecho click {count} veces</p>
      { /* actualizamos el state al hacer click con setCount */ }
      <button onClick={() => setCount(count + 1)}>
        Haz click!
      </button>
    </div>
  )
}

Ahora cuando actualicemos el estado de nuestro componente, se volverá a renderizar para plasmar los cambios. Así que, si te preguntabas cuál era mejor es en definitivo React Hook.

¿Qué ventajas tendría utilizarlo?

El punto clave y principal es actualizarte, ya que los nuevos códigos utilizarán los hooks, pero si aún no te terminas de convencer te traemos otros puntos a su favor.

• Código organizado: Las líneas empezar a verse más organizada y descienden automáticamente, de esta forma la funcionalidad quedará agrupada así evitaremos recorrer todo el archivo en diferentes partes.
• Reutilización: Con hooks se abre un mundo de opciones y posibilidades de reutilizar el código. Son tan usables que la gente se está animando a compartir pequeños y diferentes catálogos de lógicas comunes cuando estás desarrollando.
• Evitar preocupación con this: A las tampoco le gustan las clases, ya que no minimizan las funciones, porque nuestra programación ocupa más. Empezar a utilizarlas, lograrás más comodidad y acortará nuestro código.

Resumen

React parece que ha llegado para quedarse por su estabilidad con las API, además sus contantes actualizaciones y mejoras atraen la confianza de los programadores. No te preocupes si en tu código aún tienes clases, no desaparecerán de un día para otro. Te recomendamos si, empezar a usar los hook para futuras creaciones. Y entender que aunque React es solo para Front End, te puede abrir puertas laborales de forma remota y más.

Esperamos que este pequeño post te haya gustado, coméntanos si quisieras que habláramos más a profundidad de este tema, y comparte para seguir creciendo.