ReactJS: Introducción y Primeros Pasos

ReactJS es una libería orientada a crear interfaces de usuario. Esta fue creada por el equipo de Facebook y entre sus características más destacadas encontramos el uso del virtual DOM. El concepto más importante a la hora de trabajar con esta librería es que deberemos de orientar nuestro desarrollo a componentes. (Seguro que te interesa revisar nuestro curso de React en el que aprenderás a usar este framework con profundidad).

El Virtual DOM no es más que un clón del DOM sobre el que realizamos cambios que necesitemos en este, pero que al afectar al Virtual DOM obtenemos beneficios tales como la posibilidad de ver las diferencias con el último estado del DOM.

Mientras que el DOM, por sus siglas en inglés, Document Object Model podemos definirlo como una API de JavaScript que nos permite acceder a nuestros elementos HTML e iterar sobre estos en forma de consulta, creación, modificación…

Los componentes, no son más que una manera de segmentar nuestro código en pequeñas piezas, que de estas maneras se convierten en reusables.

[BANNER_SUSCRIPCION]

¿Cómo creo mi primer componente?

A la hora de trabajar con nuestro primer componente nos vamos a encontrar con los maneras básicas de hacerlo(podemos considerar otras pero estas están en desuso, lo más recomendable es basar nuestros desarrollos en los dos siguientes tipos).

Las dos maneras que te comento para realizar un componente son las siguientes:

• Mediante una función de toda la vida(a la que se le puede pasar un parámetro el cual son las props), estos se denominan Stateless components o en su defecto Functional Components.

• Mediante una clase, estos se denominan Class Components.

Espera… ¿Props? ¿State?

• Las props no son más que un objeto que le pasamos al instanciar un componente. Es decir, si incluimos en un componente otro, a la hora de llamarlo podemos mandarle datos. Estos son las props y se podrán ver en el componente usando this.props(ya vimos que en el caso de Stateless sería props o como llamemos al primer parámetro).

• El state es algo similar. También es un objeto que usamos con el fin de trabajar con datos pero este es creado en el mismo componente. Solo está disponible en los Class Components y se crean en el constructor de la misma. Este estado puede ser modificiado en otros métodos usando this.setState() de manera que la aplicación se recargará sin que lo notemos y mostrará los nuevos datos.

¿Y si hacemos un ejemplo?

¡Claro! Por aquí va el ejemplo de un componente de Hello World que al no necesitar de métodos o algo más compolejo lo podemos encuadrar en un Stateless Component, tal que así:

import React from 'react'

function HelloWorldComponent(props) { //Si necesitamos props, hay que llamarlas ahí.

    return(
        <h1>Hello World</h1>
    )

}

export default HelloWorldComponent

En el caso de un Class Component, con un evento de click se haría de la siguiente manera:

import React, {Component} from 'react'

class ClickBtn extends Component {
    constructor(props) {
        super(props) // Necesario si ponemos constructor para no sobreescribirlas
        this.state = {
            clickOnBtn: false
        }

        this.click = this.click.bind(this) // Nos permite llamar en click a el setState
    }
    click(ev) {
        alert('Hiciste click en el botón')
        this.setState({ clickOnBtn: true })
    }
    render() {
        return(
            <button onClick={this.click}>Click me</button>
        )
    }
}

export default ClickBtn

Si importáramos este último componente en el Stateless, al importarlo y llamarlo debajo del h1 podríamos mandarle data, lo que definimos como props: <ClickBtn hola={'Esto sería this.props.hola'} />

Vale… ¿Y el tema de los métodos?

Aplican cuando creamos un componente en forma de clase y no son más que los de cualquier otra clase. La librería nos trae algunos por defecto para empezar a reaccionar con el componente pero podemos crear los nuestros propios tal como sería this.click() en el ejemplo anterior.

Aquí encontramos una lista con los métodos de React más importantes y en qué momento se disparan:

componentWillMount() => Nos permite realizar cambios sobre un componentes antes de que se monte. Es el único método que se ejecuta en el Server Rendering.

componentDidMount() => Nos permite realizar cambios sobre un componente que ya se montó, aquí podemos hacer requests a API’s o llamar a acciones de Redux.

componentDidUpdate() => Nos permite realizar cambios sobre un componente que se actualizó. Comparar las antiguas props con las nuevas sería un buen uso de este.

componentWillUnMount() => Nos permite realizar cambios sobre un componente que va a ser desmontado, permitiéndonos así eliminar elementos del DOM que ya no necesitemos.

¿Cómo inicio todo esto en el navegador?

Tal cual haces siempre. Necesitamos un HTML que llevará el archivo JS. Este archivo no es más que el build de todo React. Haciendo build conseguimos pasar nuestro código de ES6 y React a uno que el navegador entiende así como unificar todo en un mismo archivo. Una buena herramienta para ello es WebPack.

Lo único a destacar sería que el componente principal no sería importado si no montado en un elemento HTML que ya exista. Para ello instalamos el módulo react-dom y crearíamos una línea así(asumiendo que tenemos un <div> con id root):

import React from 'react'
import ReactDOM from 'react-dom'

[...] // Esto sería nuestro componente

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

Conclusión y enlaces relacionados

En este artículo, hemos aprendido a diferenciar los dos tipos destacados de componentes así como a trabajar con ellos. Puede que lo que no te haya quedado claro hayan sido el hecho de como juntar algunas piezas como el build o el hecho de implementar todo esto en un HTML base. Para ello puedes disipar cualquier duda en los comentarios y te recomiendo revisar el repositorio en GitHub de este ejemplo.

Repositorio en GitHub

Aplicación en Vivo

ReactJS - Docs

React JS - Components and Props - Functional and Class Components

React JS - React.Component - The Component Lifecycle

React JS - Handling Events

ReactDOM - Extracting Components(Props)

ReactDOM - render() method API

Document Object Model(DOM) - MDN

virtual-dom - Github