Saltar al contenido

¿Qué es y Cómo Funciona Reactjs?

6 junio, 2019

ReactJS es una biblioteca de javascript para construir interfaces de usuario. Aunque en ninguna parte se define estrictamente. ¿Cómo Puedo Comenzar con Reactjs?

La idea con React es seguir la ideología basada en componentes. Sus vistas declarativas hacen que el código sea más predecible y más fácil de depurar.

Podemos usar ReactJS combinado con Webpack como administrador de paquetes, Redux combinado con ImmutableJS para la administración del estado de la aplicación.

Hay algunas otras bibliotecas que facilitan la vida de los desarrolladores, como Gulp para el manejo de tareas de compilación e implementación.

¿Cómo Puedo Comenzar con Reactjs?

React y JSX

En React verás ampliamente partes de código como estas:

const element = <h1>Hello, world!</h1>;

Esto no es ni una cadena de JavaScript ni HTML, sino que se llama JSX, una extensión de sintaxis para JavaScript. Se usa ampliamente dentro de los métodos de render para React.

Para renderizar partes dinámicas de páginas web. JSX produce “elementos” de Reacción y, por ejemplo, se usa ampliamente cuando se procesa algo según la condición.

Para usar JSX dentro del método de render, debe estar envuelto dentro de {}:

<img src={user.avatarUrl}></img>

Es seguro usar JSX, ya que previene los ataques de inyección, por lo que no hay que preocuparse por la inyección de código.

Definitivamente también querrá renderizar una lista de elementos o recorrer en bucle a través de algún objeto en un momento determinado durante el desarrollo.

Esto también se hace usando JSX y al igual que con las condiciones, tengo un artículo separado que se centra únicamente en la prestación de listas.

Cómo usar las Claves para las Listas

Las claves ayudan a React a identificar qué elementos han cambiado, se agregan o se eliminan. Las claves deben ser únicas y no deben ser modificables para una representación adecuada de los elementos React en la lista.

Organización Basada en Componentes y Accesorios

En el mundo React, nos gusta dividir las cosas en componentes modulares. Por ejemplo, si estuviéramos escribiendo un cliente de correo electrónico.

Podríamos tener un componente para la lista de correo electrónico, uno para un elemento de esa lista, uno para el panel de vista previa, uno para la barra de herramientas, etc.

Mantener las cosas modulares las hace fáciles de entender, extremadamente reutilizables y fáciles de probar.

Aquí hay un ejemplo de un componente React.

import React, { Component } from 'react';

class Hello extends Component {

render() {
return <div>I am a component!</div>
}

}

Este componente simplemente generaría una etiqueta <div> con algo de texto dentro. ¡Notarás que la dependencia importada React no se usa! Bueno.

En realidad lo es! Se usa cuando el código se transpila a Javascript nativo, por lo que es un requisito de cualquier archivo JSX.

Puede utilizar otros componentes dentro de los componentes React. Aquí hay un ejemplo:

import React, { Component } from 'react';

import Hello from './Hello';

class Welcome extends Component {

render() {
return <div>
<Hello />
</div>
}

}

El Estado de React

El estado, por otro lado, es privado y su propósito principal es manipularlo dentro del componente. El estado está disponible solo para las clases.

Ae usa para manejar algunos cambios internos (como actualizar un texto almacenado en función del evento onChange):

import React, { Component } from 'react';

class Hello extends Component {

setName() {
this.setState({name: 'Dayle'});
}

render() {
return <div>
<p>Hello there {this.state.name}!</p>
<button onClick={this.setName.bind(this)}>Set name!</button>
</div>
}

}

En este ejemplo, hemos agregado un botón con un evento onClick que llama a un método setName () en ese componente.

No se preocupe demasiado por la parte de bind (), es solo una forma de cambiar el alcance de la función, y es una característica pequeña y útil de Javascript.

Inicialmente, cuando el componente se muestre, se mostrará “¡Hola!” sin un nombre, esto se debe a que este.estado.nombre no está definido.

Si hacemos clic en el botón, nuestro código llamará this.setState () para actualizar el estado con un nombre, y el componente se volverá a representar para mostrar ‘Hello there Dayle!’, Actualizándose en tiempo real.

Componente del Ciclo de Vida

Los métodos que manejan el ciclo de vida del componente se heredan de Componente. La descripción más detallada de los métodos del ciclo de vida se puede encontrar aquí.

Es importante recordar que, en el caso de las aplicaciones universales (aplicaciones renderizadas en el servidor), las variables globales relacionadas con el navegador.

Estilizando Componentes de React

Aunque React no admite el uso directo de CSS para el estilo, pero está más orientado a los estilos jsx en línea (pasando el objeto de estilo a una etiqueta HTML), este enfoque no se usa con tanta frecuencia.

React no es tan complejo. Desafortunadamente, en cuanto a muchas bibliotecas de Javascript, las herramientas y los procesos de construcción que se sientan a su alrededor reaccionan lo que complica las cosas.