Curso de React | Parte 1

En un post anterior vimos como crear un proyecto de una página web React así que en este curso de React vamos a aprender algunos conceptos básicos.

¿Qué es React?

React es una librería java script, que nos permite crear componentes para el desarrollo frontend, y además este trabaja en un una extensión propia conocida como .jsx aun que se pueden usar sus beneficios en un archivo .js tranquilamente.

¿Qué es un archivo .JSX en React?

Los archivos .jsx en mi opinión son los que mayor cumplen con los requisitos de ser un componente, ya que tiene tanto la lógica como la vista encapsulada en este archivo.
Este archivo puede confundir bastante si ya vienes de la vieja escuela programando con el patrón MVC, o si vienes de desarrollar bastante en Angular(no angular.js).
Vamos a ver un ejemplo de lo que conforma usar un archivo .jsx. Primero que nada como mencione anteriormente la vista es decir las etiquetas HTML será utilizadas en conjunto con la lógica java script (js) ¿esto que quiere decir?, que podremos poner tags html como una variable por ejemplo.

const element = <h1>Hello, world!</h1>;
// este luego se puede randerizar en conjunto con otro bloque de HTML

Pero para no confundirnos tantos pasemos a ver los componentes, donde podremos notar mejor la explicación de los jsx.

¿Qué son los componentes React?

Los componentes van a ser nuestras porciones de código tanto lógica usando java script y visual usando etiquetas HTML que harán sentido a una funcionalidad y parte visual en específico de nuestra página web que podría ser reutilizable, por ejemplo una barra de navegación, una tabla.

En esta imagen podemos notar las partes que resalte que cada una va a tener su propia responsabilidad en el caso del navbar será la de navegar por la página por lo cual ese componente tendrá lógica para navegar y únicamente esa porción de la vista.

Componentes React como Función

La forma más fácil y rápida de armar un componente es con una función js

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Esta es una manera rápida pero obviamente para tener un archivo completo del componente deva a ver algo así.

import React from 'react';
const Welcome = (props) => {
  return <h1>Hello, {props.name}</h1>;
}
export default Welcome

Ahora si este componente está listo para ser usado, si nos damos cuenta utilice una función de flecha es total mente compatible con React.

Componentes React como Clase

A diferencia del componente como función (Function component) usar una clase para un componente nos proporciona de funcionalidades como los hooks y los states que veremos en otro post curso de React, pero la estructura de un componente como clase es.

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Y el ejemplo más completo aquí.

import React from 'react';
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}
export default Welcome

Si lo notan casi que no hay mucha diferencia solo que aquí ya vemos como hace uso de un hook que se llama render(){} el cual es el encargado de que se imprima la vista en pantalla.

Renderizado de elementos React

Para esto vamos a hacer uso de una librería llamada ReactDom que al crear el proyecto ya viene instalada en los paquetes de Node.js.
Si crearon el proyecto React podemos avanzar pero si no pueden crear un proyecto React aquí.
lo primero que quiero que vean es que solo hay un archivo HTML en la carpeta public llamada index.js, quiero que noten como tiene un div con un atributo llamado id=”root” algo asi.

<div id="root"></div>

Este es el tag que va a buscar nuestra aplicación React, y también a través de jsx o js que también es compatible veremos un archivo llamado index.js el cual hará la búsqueda para encontrar esa etiqueta con el id ‘root’ y renderizar todo los componentes que vallamos armando, este se vera algo asi.

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Básicamente lo que pasa aquí es que el método ReactDOM.render(VIEW, HTML ID) es que incerta la vista en este caso solo vemos el componente App y lo randeriza o incerta dentro del tag id que le proporcionamos.

Bueno espero que le haya gustado este curso de React parte 1 en el próximo post ya empezaremos a crear nuestros componentes y armar algunas vistas para practicar.