Primeros pasos en React (parte 1 de 3)

Junio 20, 2022

Pedro Flores

ReactJS

Vamos a explicar el desarrollo con React desde sus inicios con manejo de clases hasta la primera parte de sus componentes básicos.

Historia

React es una biblioteca JavaScript para crear interfaces de usuario de código abierto, el cual tiene como objetivo facilitar el desarrollo de aplicaciones.

React mantiene un virtual DOM el cual nos ayuda a mejorar el rendimiento el cual transporta cambios de estado con respecto al Real DOM para realizar las actualizaciones.

React utiliza sintaxis parecida a HTML el cual se llama JSX “JavaScript + XML”, esta sintaxis hace más fácil de leer al código, pero no requiere usar JSX. Además previene ataques de inyección ya que “React DOM escapa cualquier valor insertado en JSX antes de ser renderizado”. Un ejemplo de cómo se puede insertar una expresión JSX

Const name = ‘Pedro’;
Const element = <h1> Hello, {name}</h1>;

Se puede poner cualquier expresión JavaScript dentro de llaves de JSX.

Nota: JSX es más parecido a JavaScript la convención de nomenclatura es camelCase en lugar de nombres de atributos HTML “class sería className, tabindex sería tabIndex”.

Instalaciones

Hay algunas maneras de configurar React pero para este caso vamos a utilizar dos

Archivo estático HTML

Este primer método no es el más popular para configurar React, pero vamos a familiarizarnos y entender si es que has utilizado cualquier librería de JavaScript .

En un archivo básico index.html vamos a cargar las 3 librerías CDN en la cabecera. Además vamos a crear un DIV tag con ID root y finalmente vamos a crear un script donde estará el código customizado.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Hello React!</title>
    <script src="https://unpkg.com/react@^16/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@16.13.0/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      // React code will go here
    </script>
  </body>
</html>

Ahora vamos a escribir el primer código de React a la aplicación la vamos a llamar como App.

En este ejemplo vamos a demostrar como React manejaba su ciclo de vida de sus componentes antes de su versión 16.8, que actualmente utiliza componentes funcionales:

class App extends React.Component {
  //...
}

Luego vamos a incluir el método render el cuál es el único método requerido en un componente, y es utilizado para renderizar nodos del DOM.

class App extends React.Component {
  render() {
      return (
          //...
      );
  }
}

Dentro del return vamos a incluir un simple código que se va a parecer a un elemento HTML

class App extends React.Component {
  render() {
    return <h1>Hello world!</h1>;
  }
}

Finalmente vamos a utilizar el DOM de React, con el método render() el cual va a renderizar la clase App la cual se va a visualizar en el DIV con ID root.

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

Y nuestro código final quedaría de la siguiente manera

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Hello React!</title>
    <script src="https://unpkg.com/react@^16/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@16.13.0/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
  </head>
  <body>
    <div id="root"></div>

    <script type="text/babel">
      class App extends React.Component {
        render() {
          return <h1>Hello world!</h1>
        }
      }

      ReactDOM.render(<App />, document.getElementById('root'))
    </script>
  </body>
</html>

Código Completo: static-instal

Crear una App de React

Este método es el más usado para cargar librerías JavaScript en archivos estáticos HTML y renderizar React y Babel.

Facebook creó un ambiente que viene preconfigurado con todo lo que necesitas para crear una app de React y se llama “Create React App”.

Para configurar create-react-app, debes correr el siguiente código en tu terminal en el directorio que tu vas a querer instalar la aplicación:

$ npx create-react-app name-of-proyect

Una vez finalizada la instalación, nos movemos al nuevo directorio creado e iniciamos el proyecto:

$ cd name-of-proyect && npm start

Una vez ejecutado el comando, una nueva ventana se abrirá de tu navegador en la siguiente dirección localhost:3000 con el nuevo React app.

Si miramos la estructura de directorios creados por el comando videos las carpetas /public y /src, a más de el directorio node_modules, .gitignore, README.md y package.json

En la carpeta /public nuestro archivo importante es index.html.

En la carpeta /src contendrá todos los archivos con código React en el cual visualizará el archivo App.js en el cual usted iniciara su código en este archivo y al momento de guardar usted visualizará todos sus cambios en la dirección localhost:3000

Código Completo: create-react-app

Conceptos básicos

Componentes

Los componentes son bits de código independientes y reutilizables. Tienen el mismo propósito que las funciones de JavaScript , pero funcionan de forma aislada y devuelven HTML a través de una función render().

Los componentes vienen en dos tipos, componentes de Clase y componentes de Función, en este capítulo aprenderá acerca de los componentes de Clase.

Prácticamente todo en React consiste en componentes, los cuales pueden ser clases o simples componentes.

Todos los componentes se cargan en el componente principal. Los componentes a menudo tienen su propio archivo. Un ejemplo de un componente es el siguiente, el cual creamos un archivo /src/AppTest.js:

import React, {Component} from 'react'

class AppTest extends Component {
  render() {
    return (
      <div className="AppTest">
        <h1>Hello, React!</h1>
      </div>
    )
  }
}

export default AppTest

Finalmente exportamos el componente como AppTest y lo cargamos en el archivo index.js:

import React from 'react'
import ReactDOM from 'react-dom'
import AppTest from './AppTest'
import './index.css'

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

Código Completo: create-react-app

Ciclo de vida de un componente

El ciclo de vida se puede dividir en 3 fases, el montado, actualización y desmontado del componente. Estas fases a su vez se dividen en varios métodos que puede tener el componente.

Montado

La primera fase ocurre solo una vez por componente cuando este se crea y monta en la UI. Esta fase se divide en 4 funciones.

constructor

Este método se ejecuta cuando se instancia un componente. Nos permite definir el estado inicial del componente, hacer bind de métodos y definir propiedades internas en las que podemos guardar muchos datos diferentes.

componentWillMount

Este método se ejecuta cuando el componente se está por renderizar. En este punto es posible modificar el estado del componente sin causar una actualización.

render

En este momento de la fase de montado se van a tomar las propiedades, el estado y el contexto y se va a generar la UI inicial de este componente.

componentDidMount

Este último método de la fase de montado se ejecuta una vez el componente se renderizó en el navegador

Actualización

Esa fase puede ocurrir más de una vez, sucede cuando algún dato del componente se modifica y por lo tanto requiere que la UI se vuelva a generar para representar ese cambio de datos.

Desmontado

Esta última fase consiste en un solo método que se ejecuta antes de que un componente se elimine de la UI de nuestra aplicación.

Clases de componentes

Para poder crear un componente de clase primero creamos un archivo con el nombre de la clase con forma capitalizada, esto lo hacemos para diferenciar de los elementos HTML y en nuestro archivo AppTest.js donde carga la aplicación en primer lugar lo importamos y lo cargamos dentro de render(). Un ejemplo de esto los demostramos a continuación, archivo /src/Test.js:

import React, {Component} from 'react'

class Test extends Component {
  render() {
    return (
    <h1> Hola Test! </h1>
          )
  }
}

export default Test

Además debemos incluir el llamado de la clase dentro de render().

import React, {Component} from 'react'
import Test from './Test'

class AppTest extends Component {
  render() {
    return (
      <div className="containerTest">
        <Test />
      </div>
    )
  }
}

export default AppTest

Y finalmente, vamos a importar el archivo Test.js dentro de /src/AppTest.js:

import Test from './Test'

Componentes Simples

Otro tipo de componentes en React son los componentes simples los cuales son funciones y no utilizan clases. Un ejemplo de esto es el siguiente.

En el archivo /src/Test.js vamos a crear una función flecha

const TestBody = () => {
    return (
        <h1> Hola Test! </h1>
    )
}

Nuestra función flecha necesitará el import y export:

import React, {Component} from 'react'

const Test = () => {
    return (
        <h1> Hola Test! </h1>
    )
}

export default Test

Código Completo: class-components

Como seguir

Recapitulando, pudimos ver dos formas de instalación de React, así como la primera parte de los conceptos básicos los cuales nos van a ayudar a poder entender el funcionamiento de la codificación de React.

En el siguiente artículo vamos a continuar con los conceptos básicos como son el manejo de props, estados y eventos.