Skip to main content

React.js: introducción a la biblioteca UI más poderosa jamás creada.

Requisitos previos: cierta familiaridad con HTML, JavaScript y CSS.

¿Una introducción a React?

Desafortunadamente, la mayoría de los tutoriales de React no tienen en cuenta las mejores prácticas y no siempre te enseñan la manera “correcta” de hacer React.

En este tutorial, repasaré los conceptos básicos de React y las malas prácticas más comunes que se pueden encontrar.

Esto va para largo, ¡así que asegúrate de conseguir algo de café o tu bebida favorita!

¿Por qué elegir React?

Antes de comenzar, detengámonos un momento y veamos por qué React es la mejor opción.

Hay muchos otros frameworks por ahí. ¿Por qué elegir React? Comparemos los dos más populares: React y Angular. Aunque Vue.js está ganando popularidad, no lo analizaremos en esta comparación.

Declarativo

En React, tu describes que procesar (en lugar de decirle al navegador como hacerlo). Esto también significa que la cantidad de boilerplate se reduce considerablemente.

Angular, por otro lado, incluso tiene un CLI que genera todos los componentes repetitivos para ti. Hay una gran cantidad de repetitivos en Angular.

En React, simplemente inicias la codificación, no tiene ningún componente que se deba generar. Hay algunas configuraciones involucradas, pero cuando se trata de los componentes, puedes expresarlos como funciones puras.

Sintaxis clara

Usar las directivas ng-model , ngIfy ngForen Angular se siente incómodo. Por otro lado, JSX en React se siente como HTML, no hay una sintaxis especial para aprender:

const Greetings = ({ firstName }) => (
   <div>Hi, {firstName}</div>
);

 

Curva de aprendizaje

La curva de aprendizaje es muy importante a la hora de elegir un framework de IU. React tiene menos abstracciones. Si conoces JavaScript, probablemente puedas comenzar a escribir el código React en muy poco tiempo. Sin olvidar de dedicar tiempo a considerar las mejores prácticas, pero podrás comenzar muy rápido.

Por otro lado, si deseas comenzar a usar Angular, debes elegir un nuevo idioma (Angular usa TypeScript), Angular CLI, directivas, entre otras cosas.

El enlace de datos

Angular tiene enlace de datos bidireccional, lo que significa que los cambios en un elemento de formulario actualizarán automáticamente el estado. Este es un gran inconveniente y hace que la depuración sea mucho más difícil. Nunca puede estar 100% seguro de lo que causó la actualización del estado.

React, por otro lado, tiene enlace de datos unidireccional. Lo que es un gran beneficio: siempre sabrá qué causó el cambio del estado, y la depuración es mucho más fácil.

Funcional

En mi opinión, la mayor fortaleza de React proviene del hecho de que ni siquiera estás obligado a usar clases. En Angular todos los componentes deben ser implementados como clases. Las clases exageran la base de código sin proporcionar ningún beneficio.

En React, toda la interfaz de usuario se puede expresar como un conjunto de funciones puras, y el uso de funciones puras para hacer que la interfaz de usuario se sienta como una bocanada de aire fresco.

Bueno, por el momento parece que es suficiente del tema y no olvidar que se trata de una opinión personal basada en la experiencia, pero tu puedes tener otra muy distinta y es respetable.

 

 

¡Vamos a empezar a programar!

Ahora que espero que te haya convencido para probar React, ¡vamos a escribir código!

Node.js

Node.js es un entorno de ejecución de JavaScript que nos permite compilar código React genial.

En primer lugar, asegurémonos de tener instalado Node.js. Si no, puede descargarlo desde aquí: https://nodejs.org/en/download

create-react-app

Esta es la forma más popular de configurar tu entorno y comenzar a codificar. Viene con muchas herramientas necesarias integradas, lo que nos ayuda a eliminar muchas decisiones.

Para instalar la aplicación create-react-global:

npm i -g create-react-app

 

Luego para estructurar tu proyecto:

create-react-app react-intro

 

¡Eso es todo! Ahora, para iniciar la aplicación:

cd react-intro
npm start

 

Esto iniciará un servidor de desarrollo y te permitirá abrir la nueva y brillante aplicación React en http: // localhost: 3000 / en su navegador.

Bajo el cofre del motor

Ahora, veamos cómo funcionan las cosas bajo el capó. Usando el IDE de su elección (recomiendo Visual Studio Code ) abra el proyecto recién creado.

index.html

Dentro del proyecto vaya al public/index.htmlarchivo. Esto es lo que verás:

 

La parte que nos interesa es la <div id="root"></div>. Aquí es donde irá nuestra aplicación React. Toda la división de raíz simplemente se reemplazará con el contenido de nuestra aplicación React. Todo lo demás se mantendrá sin cambios.

index.js

Ahora vamos a abrir src/index.js. Este es el archivo que arranca toda la aplicación React. Y, por cierto, todo nuestro código fuente React irá al directorio src.

 

 

La línea que hace la magia es:

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

 

Esta línea es una forma de decirle a React que tome nuestro componente de la Aplicación (lo discutiremos un poco después) y lo colocará dentro del div root que se definió anteriormente dentro de index.html.

Centrémonos ahora en la <App />parte. Esto se parece mucho a HTML, ¿no es así? Esto se llama JSX y es una sintaxis especial de JavaScript que React usa para hacer su magia. Tenga en cuenta que comienza con una mayúscula A , es <App /> , no <app /> . Esta es una convención utilizada por React, que le permite desambiguar entre las etiquetas HTML normales y los componentes React que hemos creado. Si no inicias tus componentes con una letra mayúscula, React no podrá procesar sus componentes.

Siempre que usemos JSX, siempre tenemos que importar React agregando la siguiente línea dentro de nuestro archivo  .js:

import React from 'react';

 

App.js

Ahora estamos listos para echar un vistazo a nuestro primer componente. Vamos a abrir src/app.js :

 

Para crear un componente React, tenemos que crear una clase que herede React.Component. Eso es exactamente lo que hace la línea class App extends Component. Todos los componentes de React deben implementar un método render; como puedes haber adivinado, toda la representación se realiza dentro de este método. El método render tiene que devolver el marcado a ser renderizado.

Una pequeña nota al margen: el atributo className es equivalente al atributo class en HTML y se utiliza para asignar clases CSS. classes una palabra clave reservada en JavaScript y no se puede utilizar para un nombre de atributo.

Recapitulemos:

  1. El componente se llama App (mayúscula A)
  2. Se extiende la clase React.Component
  3. Tiene que implementar el método render, que devuelve el marcado.

 

hasta aquí una pausa mientras ordeno mis ideas….

 

 

 

Close Menu