One place for hosting & domains

      Cómo crear componentes personalizados en React


      El autor seleccionó Creative Commons para recibir una donación como parte del programa Write for DOnations.

      Introducción

      En este tutorial, aprenderá a crear componentes personalizados en React. Los componentes son elementos de funcionalidad independientes que puede reutilizar en sus aplicaciones, y son las unidades estructurales básicas de todas las aplicaciones de React. A menudo, pueden ser simples clases y funciones de JavaScript, pero se los utiliza como si fueran elementos HTML personalizados. Los botones, los menús y cualquier otro contenido de las páginas de front-end pueden crearse como componentes. Los componentes también pueden contener información de estado y mostrar marcado.

      Una vez que aprenda a crear componentes en React, podrá dividir aplicaciones complejas en pequeñas piezas más fáciles de compilar y mantener.

      En este tutorial, creará una lista de emojis que mostrarán sus nombres cuando se hace clic en ellos. Los emojis se crearán usando un componente personalizado y se los invocará desde el interior de otro componente personalizado. Al final de este tutorial, habrá creado componentes personalizados utilizando clases y funciones de JavaScript, y sabrá cómo separar código existente en elementos reutilizables y cómo almacenar los componentes en una estructura de archivos legible.

      Requisitos previos

      Paso 1: Configurar el proyecto React

      En este paso, creará una base para su proyecto usando Create React App. También modificará el proyecto predeterminado para crear su proyecto de base al asignar una lista de emojis y añadir algo de estilo.

      Primero, cree un proyecto nuevo. Abra un terminal y, luego, ejecute el siguiente comando:

      • npx create-react-app tutorial-03-component

      Una vez completado, pase al directorio del proyecto:

      Abra el código App.js en un editor de texto:

      A continuación, elimine el código de la plantilla creado por Create React App y sustituya el contenido por el nuevo código de React que muestra una lista de emojis:

      tutorial-03-component/src/App.js

      import React from 'react';
      import './App.css';
      
      const displayEmojiName = event => alert(event.target.id);
      const emojis = [
        {
          emoji: '😀',
          name: "test grinning face"
        },
        {
          emoji: '🎉',
          name: "party popper"
        },
        {
          emoji: '💃',
          name: "woman dancing"
        }
      ];
      
      function App() {
        const greeting = "greeting";
        const displayAction = false;
        return(
          <div className="container">
            <h1 id={greeting}>Hello, World</h1>
            {displayAction && <p>I am writing JSX</p>}
            <ul>
              {
                emojis.map(emoji => (
                  <li key={emoji.name}>
                    <button
                      onClick={displayEmojiName}
                    >
                      <span role="img" aria-label={emoji.name} id={emoji.name}>{emoji.emoji}</span>
                    </button>
                  </li>
                ))
              }
            </ul>
          </div>
        )
      }
      
      export default App;
      

      Este código utiliza la sintaxis de JSX para hacer map() sobre la matriz de emojis y enumerarlos como elementos de la lista <li>. También adjunta eventos onClick para mostrar datos de los emojis en el navegador. Para analizar el código con mayor detenimiento, consulte Cómo crear elementos de React con JSX, que contiene una explicación detallada de JSX.

      Guarde y cierre el archivo. Ahora, puede eliminar el archivo logo.svg, dado que era parte de la plantilla y ya no está haciendo referencia a ella:

      A continuación, actualice el estilo. Abra src/App.css:

      Sustituya el contenido por el siguiente CSS para centrar los elementos y ajustar la fuente:

      tutorial-03-component/src/App.css

      .container {
          display: flex;
          flex-direction: column;
          align-items: center;
      }
      
      button {
          font-size: 2em;
          border: 0;
          padding: 0;
          background: none;
          cursor: pointer;
      }
      
      ul {
          display: flex;
          padding: 0;
      }
      
      li {
          margin: 0 20px;
          list-style: none;
          padding: 0;
      }
      

      Se utiliza flex para centrar la <h1> principal y enumerar los elementos. También elimina estilos de botones predeterminados y de <li> para que los emojis se alineen en una fila. Puede encontrar más detalles en Cómo crear elementos de React con JSX.

      Guarde el archivo y ciérrelo.

      Abra otra ventana de terminal en el root de su proyecto. Inicie el proyecto con el siguiente comando:

      Una vez que el comando se ejecute, verá el proyecto en ejecución en su navegador web en http://localhost:3000.

      Déjelo en ejecución todo el tiempo que esté trabajando en su proyecto. Cada vez que guarde el proyecto, el navegador se actualizará de forma automática y mostrará el código más actualizado.

      Verá la página de su proyecto con Hello, World y los tres emojis que enumeró en su archivo App.js:

      Navegador con emoji

      Ahora que configuró su código, puede comenzar a unir componentes en React.

      Paso 2: Crear un componente independiente con clases de React

      Ahora que su proyecto se está ejecutando, puede comenzar a crear su componente personalizado. En este paso, creará un componente de React independiente ampliando la clase Component de React. Creará una nueva clase, agregará métodos y usará la función de representación para mostrar datos.

      Los componentes de React son elementos autónomos que puede reutilizar en una página. Al crear pequeñas piezas de código centradas, las puede mover y reutilizar a medida que su aplicación se amplía. La clave es que son autónomas y centradas, lo que le permite separar el código en piezas lógicas. De hecho, ya ha estado trabajando con componentes que se separan de forma lógica: el archivo App.js es un componente funcional, que verá en más detalle en el paso 3.

      Hay dos tipos de componentes personalizados: basados en clases y funcionales. El primer componente que va a crear es un componente basado en clases. Creará un nuevo componente denominado Instructions que explica las instrucciones del visor de emojis.

      Nota: Los componentes basados en clases solían ser la forma más popular de crear componentes de React. Pero con la introducción de los hooks de React, muchos desarrolladores y bibliotecas están comenzando a usar componentes funcionales.

      Si bien, ahora, los componentes funcionales son la norma, a menudo, encontrará componentes de clases en código heredado. No es necesario que los use, pero sí que sepa reconocerlos. También ofrecen una introducción clara a muchos conceptos futuros, como la gestión de estados. En este tutorial, aprenderá a crear componentes funcionales y de clase.

      Para comenzar, cree un archivo nuevo. Por convención, los archivos de componentes se escriben con mayúscula:

      • touch src/Instructions.js

      Luego, abra el archivo en su editor de texto:

      Primero, importe React y la clase Component y exporte Instructions con las siguientes líneas:

      tutorial-03-component/src/Instructions.js

      import React, { Component } from 'react';
      
      export default class Instructions extends Component {}
      

      La importación de React convertirá el JSX. Component es una clase de base que ampliará para crear su componente. Para ampliarlo, creó una clase que tiene el nombre de su componente (Instructions) y extendió la clase Component de base con la línea export. También está exportando esta clase como predeterminada con las palabras export default al comienzo de la declaración de clase.

      El nombre de la clase se debe escribir con mayúscula y debe coincidir con el nombre del archivo. Esto es importante cuando se utilizan herramientas de depuración, que mostrarán el nombre del componente. Si el nombre coincide con la estructura de archivos, será más fácil localizar el componente en cuestión.

      La clase Component de base tiene varios métodos que puede usar en su clase personalizada. El más importante, y el único que usará en este tutorial, es el método render(). El método render() devuelve el código JSX que desea mostrar en el navegador.

      Para comenzar, añada una pequeña explicación de la aplicación en una etiqueta <p>:

      tutorial-03-component/src/Instructions.js

      import React, { Component } from 'react';
      
      export class Instructions extends Component {
      
        render() {
          return(
            <p>Click on an emoji to view the emoji short name.</p>
          )
        }
      
      }
      

      Guarde y cierre el archivo. En este momento, todavía no hay cambios en su navegador. Esto se debe a que todavía no utilizó el componente nuevo. Para usarlo, deberá añadirlo a otro componente que se conecte con el componente root. En este proyecto, <App> es el componente root en index.js. Para que aparezca en su aplicación, deberá añadirlo al componente <App>.

      Abra src/App.js en un editor de texto:

      Primero, deberá importar el componente:

      tutorial-03-component/src/App.js

      import React from 'react';
      
      import Instructions from './Instructions';
      
      import './App.css';
      
      ...
      
      export default App;
      

      Como es la importación predeterminada, puede importar a cualquier nombre que desee. Es mejor mantener los nombres consistentes por motivos de legibilidad: la importación debe coincidir con el nombre del componente, que, a su vez, debe coincidir con el nombre del archivo. Pero la única regla fija es que el componente debe comenzar con una letra mayúscula. Así es como React sabe que se trata de un componente de React.

      Ahora que importó el componente, añádalo al resto de su código, como si fuera un elemento HTML personalizado:

      tutorial-03-component/src/App.js

      import React from 'react';
      
      import Instructions from './Instructions.js'
      
      ...
      function App() {
        const greeting = "greeting";
        const displayAction = false;
        return(
          <div className="container">
            <h1 id={greeting}>Hello, World</h1>
            {displayAction && <p>I am writing JSX</p>}
            <Instructions />
            <ul>
              {
                emojis.map(emoji => (
                  <li key={emoji.name}>
                    <button
                      onClick={displayEmojiName}
                    >
                      <span role="img" aria-label={emoji.name} id={emoji.name}>{emoji.emoji}</span>
                    </button>
                  </li>
                ))
              }
            </ul>
          </div>
        )
      }
      
      export default App;
      

      En este código, encerró el componente entre corchetes angulares. Como este componente no tiene elementos secundarios, se puede cerrar de forma automática al terminar con />.

      Guarde el archivo. Al hacerlo, la página se actualizará y verá el componente nuevo.

      Navegador con texto de instrucción

      Ahora que tiene algo de texto, puede añadir una imagen. Descargue una imagen de emoji de wikimedia y guárdela en el directorio src como emoji.svg con el siguiente comando:

      • curl -o src/emoji.svg https://upload.wikimedia.org/wikipedia/commons/3/33/Twemoji_1f602.svg

      curl realiza la solicitud a la URL y el indicador -o le permite guardar el archivo como src/emoji.svg.

      A continuación, abra el archivo de su componente:

      Importe el emoji y añádalo a su componente personalizado con un enlace dinámico:

      tutorial-03-component/src/Instructions.js

      import React, { Component } from 'react';
      import emoji from './emoji.svg'
      
      export default class Instructions extends Component {
      
        render() {
          return(
            <>
              <img alt="laughing crying emoji" src={emoji} />
              <p>Click on an emoji to view the emoji short name.</p>
            </>
          )
        }
      }
      

      Tenga en cuenta que debe incluir la extensión del archivo .svg al realizar la importación. Al importar, importa una ruta dinámica que crea webpack cuando se compila el código. Para obtener más información, consulte Cómo configurar un proyecto de React con Create React App.

      También deberá envolver las etiquetas <img> y <p> con etiquetas vacías para asegurarse de que se devuelva un único elemento.

      Guarde el archivo. Al volver a cargar el navegador, la imagen será muy grande en comparación con el resto del contenido:

      Ventana de navegador con una imagen de emoji grande

      Para reducir el tamaño de la imagen, deberá añadir algo de CSS y un className a su componente personalizado.

      Primero, en Instructions.js, cambie las etiquetas vacías por div y asigne un className de instructions:

      tutorial-03-component/src/Instructions.js

      import React, { Component } from 'react';
      import emoji from './emoji.svg'
      
      export default class Instructions extends Component {
      
        render() {
          return(
            <div className="instructions">
              <img alt="laughing crying emoji" src={emoji} />
              <p>Click on an emoji to view the emoji short name.</p>
            </div>
          )
        }
      }
      

      Guarde y cierre el archivo. A continuación, abra App.css:

      Cree reglas para el selector de clases .instructions:

      tutorial-03-component/src/App.css

      .container {
          display: flex;
          flex-direction: column;
          align-items: center;
      }
      
      ...
      
      .instructions {
          display: flex;
          flex-direction: column;
          align-items: center;
      }
      

      Al añadir un display de estilo flex, hace que img y p se centren con flexbox. Cambió la dirección para que todo se alinee verticalmente con flex-direction: column;. La línea align-items: center; centrará los elementos en la pantalla.

      Ahora que los elementos están alineados, deberá cambiar el tamaño de la imagen. Asigne a img dentro de div un valor de width (ancho) y height (alto) de 100 px.

      tutorial-03-component/src/App.css

      .container {
          display: flex;
          flex-direction: column;
          align-items: center;
      }
      
      ...
      
      .instructions {
          display: flex;
          flex-direction: column;
          align-items: center;
      }
      
      .instructions img {
          width: 100px;
          height: 100px;
      }
      

      Guarde y cierre el archivo. El navegador se volverá a cargar y verá que la imagen es mucho más pequeña:

      Ventana de navegador con una imagen más pequeña

      En este punto, creó un componente personalizado independiente y reutilizable. Para ver cómo se reutiliza, añada una segunda instancia a App.js.

      Abra App.js:

      En App.js, añada una segunda instancia del componente:

      tutorial-03-component/src/App.js

      import React from 'react';
      
      import Instructions from './Instructions.js'
      
      ...
      
      function App() {
        const greeting = "greeting";
        const displayAction = false;
        return(
          <div className="container">
            <h1 id={greeting}>Hello, World</h1>
            {displayAction && <p>I am writing JSX</p>}
            <Instructions />
            <Instructions />
            <ul>
              {
                emojis.map(emoji => (
                  <li key={emoji.name}>
                    <button
                      onClick={displayEmojiName}
                    >
                      <span role="img" aria-label={emoji.name} id={emoji.name}>{emoji.emoji}</span>
                    </button>
                  </li>
                ))
              }
            </ul>
          </div>
        )
      }
      
      export default App;
      

      Guarde el archivo. Cuando el navegador se vuelva a cargar, verá el componente dos veces.

      Navegador con dos instancias del componente Instructions

      En este caso, no desea dos instancias de Instructions, pero puede ver que el componente se puede reutilizar de forma eficiente. Es probable que use los botones o las tablas personalizados que cree varias veces en una página, por lo que son ideales para usar como componentes personalizados.

      Por ahora, puede eliminar la etiqueta de imagen adicional. En su editor de texto, elimine el segundo <Instructions /> y guarde el archivo:

      tutorial-03-component/src/App.js

      import React from 'react';
      
      import Instructions from './Instructions.js'
      
      ...
      
      function App() {
        const greeting = "greeting";
        const displayAction = false;
        return(
          <div className="container">
            <h1 id={greeting}>Hello, World</h1>
            {displayAction && <p>I am writing JSX</p>}
            <Instructions />
            <ul>
              {
                emojis.map(emoji => (
                  <li key={emoji.name}>
                    <button
                      onClick={displayEmojiName}
                    >
                      <span role="img" aria-label={emoji.name} id={emoji.name}>{emoji.emoji}</span>
                    </button>
                  </li>
                ))
              }
            </ul>
          </div>
        )
      }
      
      export default App;
      

      Ahora, tiene un componente independiente y reutilizable que puede añadir a un componente principal varias veces. La estructura que tiene ahora funciona para un número reducido de componentes, pero hay un pequeño problema: todos los archivos están mezclados. La imagen de <Instructions> se encuentra en el mismo directorio que los recursos de <App>. También se está mezclando el código CSS de <App> con el de <Instructions>.

      En el siguiente paso, creará una estructura de archivos que le dará independencia a cada componente al agrupar sus funcionalidades, estilos y dependencias, lo que le permitirá moverlos según sea necesario.

      Paso 3: Crear una estructura de archivos legible

      En este paso, creará una estructura de archivos para organizar sus componentes y recursos, como imágenes, código CSS y otros archivos de JavaScript. Agrupará el código por componentes, no por tipo de recursos. En otras palabras, no tendrá un directorio separado para CSS, imágenes y JavaScript. En su lugar, tendrá un directorio independiente para cada componente que contendrá CSS, JavaScript e imágenes pertinentes. En los dos casos, está separando cuestiones.

      Como tiene un componente independiente, necesita una estructura de archivos que agrupe el código pertinente. En este momento, todo se encuentra en el mismo directorio. Enumere los elementos en su directorio src:

      El resultado indica que todo se está desordenando bastante:

      Output

      App.css Instructions.js index.js App.js emoji.svg serviceWorker.js App.test.js index.css setupTests.js

      Tiene el código del componente <App> (App.css, App.js y App.test.js) junto a su componente root (index.css e index.js) y su componente personalizado Instructions.js.

      React es intencionalmente independiente de la estructura de archivos. No recomienda ninguna estructura en particular y el proyecto puede funcionar con diversas jerarquías de archivos. Sin embargo, recomendamos añadir cierto orden para evitar sobrecargar el directorio root con componentes, archivos CSS e imágenes que serán difíciles de navegar. Además, usar una nomenclatura explícita puede facilitar la visualización de las piezas de su proyecto que están relacionadas.  Por ejemplo, puede no ser claro que un archivo de imagen denominado Logo.svg es parte de un componente llamado Header.js.

      Una de las estructuras más simples es la creación de un directorio components con un directorio separado para cada componente. Esto le permitirá agrupar sus componentes de forma separada del código de configuración, como serviceWorker, y, a la vez, agrupar los recursos con los componentes.

      Crear un directorio components

      Para comenzar, cree un directorio denominado components:

      A continuación, pase los siguientes componentes y código al directorio: App.css, App.js, App.test.js, Instructions.js y emoji.svg:

      • mv src/App.* src/components/
      • mv src/Instructions.js src/components/
      • mv src/emoji.svg src/components/

      Aquí, está usando un carácter comodín (*) para seleccionar todos los archivos que se comienzan con App.

      Después de trasladar el código, verá un error en su terminal que ejecuta npm start.

      Output

      Failed to compile. ./src/App.js Error: ENOENT: no such file or directory, open 'your_file_path/tutorial-03-component/src/App.js'

      Recuerde que todo el código está importando usando rutas relativas. Si cambia la ruta de ciertos archivos, deberá actualizar el código.

      Para hacerlo, abra index.js.

      Luego, cambie la ruta de la importación de App para que importe desde el directorio components/.

      tutorial-03-component/src/index.js

      import React from 'react';
      import ReactDOM from 'react-dom';
      import './index.css';
      import App from './components/App';
      import * as serviceWorker from './serviceWorker';
      
      ...
      
      serviceWorker.unregister();
      

      Guarde y cierre el archivo. Su secuencia de comandos detectará los cambios, y el error desaparecerá.

      Ahora, tiene componentes en un directorio separado. A medida que sus aplicaciones se vuelven más complejas, es posible que tenga directorios para servicios API, almacenes de datos y funciones de utilidad. Separar el código de los componentes es el primer paso, pero todavía tiene el código CSS de Instructions mezclado en el archivo App.css.  Para crear esta separación lógica, primero, trasladará los componentes a directorios separados.

      Trasladar componentes a directorios individuales

      Primero, cree un directorio específicamente para el componente <App>:

      Luego, traslade los archivos relacionados al directorio nuevo:

      • mv src/components/App.* src/components/App

      Al hacerlo, obtendrá un error similar al de la última sección:

      Output

      Failed to compile. ./src/components/App.js Error: ENOENT: no such file or directory, open 'your_file_path/tutorial-03-component/src/components/App.js'

      En este caso, deberá actualizar dos cosas. Primero, deberá actualizar la ruta en index.js.

      Abra el archivo index.js:

      Luego, actualice la ruta de importación de App para que apunte al componente App en el directorio App.

      tutorial-03-component/src/index.js

      import React from 'react';
      import ReactDOM from 'react-dom';
      import './index.css';
      import App from './components/App/App';
      import * as serviceWorker from './serviceWorker';
      
      ...
      
      serviceWorker.unregister();
      

      Guarde y cierre el archivo. La aplicación seguirá sin ejecutarse. Verá un error como este:

      Output

      Failed to compile. ./src/components/App/App.js Module not found: Can't resolve './Instructions.js' in 'your_file_path/tutorial-03-component/src/components/App'

      Como <Instructions> no se encuentra en el mismo nivel de directorio que el componente <App>, deberá cambiar la ruta de importación. Antes de hacerlo, cree un directorio para Instructions. Cree un directorio denominado Instructions en el directorio src/components:

      • mkdir src/components/Instructions

      Luego, traslade Instructions.js y emoji.svg a ese directorio:

      • mv src/components/Instructions.js src/components/Instructions
      • mv src/components/emoji.svg src/components/Instructions

      Ahora que se creó el directorio del componente Instructions, puede terminar de actualizar las rutas de archivos para conectar su componente a su aplicación.

      Actualizar rutas de importación

      Ahora que los componentes se encuentran en directorios individuales, puede ajustar la ruta de importación en App.js.

      Abra App.js:

      • nano src/components/App/App.js

      Como la ruta es relativa, deberá subir un directorio, src/components, y, luego, ingresar al directorio Instructions de Instructions.js, pero, como se trata de un archivo JavaScript, no necesita la importación final.

      tutorial-03-component/src/components/App/App.js

      import React from 'react';
      
      import Instructions from '../Instructions/Instructions.js';
      
      import './App.css';
      
      ...
      
      export default App;
      

      Guarde y cierre el archivo. Ahora que todas sus importaciones están usando la ruta correcta, su navegador se actualizará y mostrará la aplicación.

      Ventana de navegador con una imagen más pequeña

      Nota: También puede denominar el archivo root de cada directorio index.js. Por ejemplo, en lugar de src/components/App/App.js, podría crear src/components/App/index.js. La ventaja es que, de esta manera, sus importaciones son ligeramente más pequeñas. Si la ruta apunta a un directorio, la importación buscará un archivo index.js. La importación de src/components/App/index.js en el archivo src/index.js sería import ./components/App. La desventaja de este método es que termina teniendo muchos archivos con el mismo nombre, lo que puede dificultar la lectura en algunos editores de texto. En última instancia, se trata de una decisión personal y de equipo, pero lo mejor es ser coherente.

      Separar código en archivos compartidos

      Ahora, cada componente tiene su propio directorio, pero no todo es completamente independiente. El último paso es extraer el CSS de Instructions a un archivo separado.

      Primero, cree un archivo CSS en src/components/Instructions:

      • touch src/components/Instructions/Instructions.css

      Luego, abra el archivo CSS en su editor de texto:

      • nano src/components/Instructions/Instructions.css

      Añada el CSS de instrucciones que creó en una sección anterior:

      tutorial-03-component/src/components/Instructions/Instructions.css

      .instructions {
          display: flex;
          flex-direction: column;
          align-items: center;
      }
      
      .instructions img {
          width: 100px;
          height: 100px;
      }
      

      Guarde y cierre el archivo. Luego, elimine el CSS de instrucciones de src/components/App/App.css.

      • nano src/components/App/App.css

      Elimine las líneas sobre .instructions. El archivo final tendrá el siguiente aspecto:

      tutorial-03-component/src/components/App/App.css

      .container {
          display: flex;
          flex-direction: column;
          align-items: center;
      }
      
      button {
          font-size: 2em;
          border: 0;
          padding: 0;
          background: none;
          cursor: pointer;
      }
      
      ul {
          display: flex;
          padding: 0;
      }
      
      li {
          margin: 0 20px;
          list-style: none;
          padding: 0;
      }
      

      Guarde y cierre el archivo. Por último, importe el CSS en Instructions.js:

      • nano src/components/Instructions/Instructions.js

      Importe el CSS usando la ruta relativa:

      tutorial-03-component/src/components/Instructions/Instructions.js

      import React, { Component } from 'react';
      import './Instructions.css';
      import emoji from './emoji.svg'
      
      export default class Instructions extends Component {
      
        render() {
          return(
            <div className="instructions">
              <img alt="laughing crying emoji" src={emoji} />
              <p>Click on an emoji to view the emoji short name.</p>
            </div>
          )
        }
      }
      

      Guarde y cierre el archivo. La ventana de su navegador se verá igual que antes, excepto que, ahora, todos los recursos del archivo están agrupados en el mismo directorio.

      Ventana de navegador con una imagen más pequeña

      Ahora, observe la estructura una última vez. Primero, el directorio src/:

      Cuenta con el componente root index.js y el CSS relacionado index.css junto al directorio components/ y archivos de utilidad, como serviceWorker.js y setupTests.js:

      Output

      components serviceWorker.js index.css setupTests.js index.js

      Luego, observe el interior de components:

      Verá un directorio para cada componente:

      Output

      App Instructions

      Si observa el interior de cada componente, verá el código del componente y archivos CSS, de prueba y de imagen, si existen.

      Output

      App.css App.js App.test.js
      • ls src/components/Instructions

      Output

      Instructions.css Instructions.js emoji.svg

      En este punto, creó una estructura sólida para su proyecto. Movió mucho código, pero, ahora que tiene una estructura, se ampliará más fácilmente.

      Esta no es la única manera de crear su estructura. Algunas estructuras de archivos pueden aprovechar la división de código al especificar un directorio que se divida en varios paquetes. Otras estructuras de archivos se dividen por ruta y utilizan un directorio común para los componentes que se utilizan en todas las rutas.

      Por ahora, continúe con un enfoque menos complejo. Si surge la necesidad de tener otra estructura, siempre es más fácil pasar de lo sencillo a lo complejo. Comenzar con una estructura compleja antes de necesitarla, dificultará la refactorización.

      Ahora que creó y organizó un componente basado en clases, en el siguiente paso, creará un componente funcional.

      Paso 4: Crear un componente funcional

      En este paso, creará un componente funcional. Los componentes funcionales son los más comunes en el código de React contemporáneo. Estos componentes suelen ser más cortos y, a diferencia de los componentes basados en clases, pueden usar hooks de React, una nueva manera de gestionar estados y eventos.

      Un componente funcional es una función de JavaScript que devuelve cierto JSX. No requiere ampliar nada y no hay métodos especiales que memorizar.

      Para refactorizar <Instructions> como componente funcional, deberá cambiar la clase a una función y eliminar el método de representación de modo que solo quede la instrucción de retorno.

      Para hacerlo, primero, abra Instructions.js en un editor de texto.

      • nano src/components/Instructions/Instructions.js

      Cambie la declaración class a una declaración function:

      tutorial-03-component/src/components/Instructions/Instructions.js

      import React, { Component } from 'react';
      import './Instructions.css';
      import emoji from './emoji.svg'
      
      export default function Instructions() {
        render() {
          return(
            <div className="instructions">
              <img alt="laughing crying emoji" src={emoji} />
              <p>Click on an emoji to view the emoji short name.</p>
            </div>
          )
        }
      }
      

      Luego, elimine la importación de { Component }:

      tutorial-03-component/src/components/Instructions/Instructions.js

      import React from 'react';
      import './Instructions.css';
      import emoji from './emoji.svg'
      
      export default function Instructions() {
      
        render() {
          return(
            <div className="instructions">
              <img alt="laughing crying emoji" src={emoji} />
              <p>Click on an emoji to view the emoji short name.</p>
            </div>
          )
        }
      }
      

      Por último, elimine el método render(). En este punto, solo está devolviendo JSX.

      tutorial-03-component/src/components/Instructions/Instructions.js

      import React from 'react';
      import './Instructions.css';
      import emoji from './emoji.svg'
      
      export default function Instructions() {
        return(
          <div className="instructions">
              <img alt="laughing crying emoji" src={emoji} />
              <p>Click on an emoji to view the emoji short name.</p>
          </div>
        )
      }
      

      Guarde el archivo. El navegador se actualizará y verá su página como antes.

      Navegador con emoji

      También puede volver a escribir la función como función de flecha usando la devolución implícita. La principal diferencia es que pierde el cuerpo de la función. También deberá, primero, asignar la función a una variable y, luego, exportar esa variable:

      tutorial-03-component/src/components/Instructions/Instructions.js

      import React from 'react';
      import './Instructions.css';
      import emoji from './emoji.svg'
      
      const Instructions = () => (
        <div className="instructions">
          <img alt="laughing crying emoji" src={emoji} />
          <p>Click on an emoji to view the emoji short name.</p>
        </div>
      )
      
      export default Instructions;
      

      Los componentes funcionales simples y los componentes basados en clases son muy similares. Cuando tiene un componente sencillo que no almacena estados, lo mejor es usar un componente funcional. La diferencia real entre los dos tipos de componentes es la forma en que se almacenan su estado y sus propiedades de uso. Los componentes basados en clases utilizan métodos y propiedades para establecer el estado y suelen ser algo más largos. Los componentes funcionales utilizan hooks para almacenar el estado o gestionar cambios y suelen ser un poco más cortos.

      Conclusión

      Ahora, tiene una aplicación pequeña con piezas independientes. Creó componentes de los dos tipos principales: funcionales y basados en clases. Separó las partes de los componentes en directorios para poder mantener agrupadas porciones de código similares. También importó y reutilizó los componentes.

      Si comprende los componentes, puede comenzar a ver sus aplicaciones como piezas que puede desarmar y volver a armar. Los proyectos se vuelven modulares e intercambiables. La capacidad de ver aplicaciones completas como series de componentes es un paso importante para comprender React. Si desea acceder a más tutoriales de React, consulte nuestra página temática de React o regrese a la página de la serie Cómo programar con React.js.



      Source link

      [Guía de inicio rápido] sobre cómo instalar y configurar Ansible en Ubuntu 18.04


      Introducción

      En esta guía, explicaremos cómo instalar y configurar Ansible en un servidor Ubuntu 18.04. Para obtener una versión más detallada de este tutorial, con más explicaciones de cada paso, consulte Cómo instalar y configurar Ansible en Ubuntu 18.04.

      Requisitos previos

      Para este tutorial, necesitará lo siguiente:

      • Un nodo de control de Ansible: un sistema Ubuntu 18.04 donde se instalará Ansible. Puede ser un servidor remoto o una máquina local.
      • Uno o más hosts de Ansible: uno o más servidores de Ubuntu 18.04 accesibles desde su nodo de control mediante SSH.

      Paso 1: Instalar Ansible

      Desde su nodo de control, ejecute el siguiente comando para incluir el PPA (archivo de paquetes personal) oficial del proyecto en la lista de fuentes de su sistema:

      • sudo apt-add-repository ppa:ansible/ansible

      Actualice el índice de paquetes de su sistema con lo siguiente:

      Después de esta actualización, podrá instalar el software Ansible con lo siguiente:

      Paso 2: Configurar el archivo de inventario

      Para editar el contenido de su inventario predeterminado de Ansible, abra el archivo /etc/ansible/hosts con el editor de texto que prefiera:

      • sudo nano /etc/ansible/hosts

      El archivo de inventario predeterminado proporcionado por la instalación de Ansible contiene varios ejemplos que puede utilizar como referencias para configurar su inventario. En el siguiente ejemplo se define un grupo llamado [servers] con tres servidores diferentes, cada uno identificado por un alias personalizado: server1, server2 y server3. Asegúrese de reemplazar las IP resaltadas por las direcciones IP de sus hosts de Ansible.

      /etc/ansible/hosts

      [servers]
      server1 ansible_host=203.0.113.111
      server2 ansible_host=203.0.113.112
      server3 ansible_host=203.0.113.113
      
      [all:vars]
      ansible_python_interpreter=/usr/bin/python3
      

      El subgrupo all:vars establece el parámetro de host ansible_python_interpreter, que será válido para todos los hosts de este inventario. Este parámetro garantiza que el servidor remoto utilice el ejecutable /usr/bin/python3 Python 3 en lugar de /usr/bin/python (Python 2.7), que no está presente en versiones recientes de Ubuntu.

      No olvide guardar y cerrar el archivo cuando termine.

      Paso 3: Probar la conexión

      Puede usar el argumento -u para especificar el usuario de sistema remoto. Cuando no se proporcione, Ansible intentará conectarse como su usuario de sistema actual en el nodo de control.

      Desde su nodo de control de Ansible, ejecute lo siguiente:

      • ansible all -m ping -u root

      El resultado deberá ser similar a este:

      Output

      server1 | SUCCESS => { "changed": false, "ping": "pong" } server2 | SUCCESS => { "changed": false, "ping": "pong" } server3 | SUCCESS => { "changed": false, "ping": "pong" }

      Si es la primera vez que se conecta a estos servidores a través de SSH, se le solicitará confirmar la autenticidad de los hosts a los que se conecte a través de Ansible. Cuando se le solicite, escriba yes y luego presione ENTER para confirmar.

      Una vez que reciba una respuesta “pong” de un host, estará listo para ejecutar comandos y playbooks de Ansible en el servidor en cuestión.

      Tutoriales relacionados

      A continuación, se ofrecen los enlaces a más guías detalladas relacionadas con este tutorial:



      Source link

      Cómo instalar y configurar Elasticsearch en Ubuntu 18.04


      Introducción

      Elasticsearch es una plataforma para la búsqueda y el análisis distribuidos de datos en tiempo real.  Es una opción popular debido a su facilidad de uso, sus funciones potentes y su escalabilidad.

      En este artículo, se explicará cómo instalar Elasticsearch, configurarla para su caso de uso, proteger su instalación y comenzar a trabajar con su servidor de Elasticsearch.

      Requisitos previos

      Antes de comenzar con este tutorial, necesitará lo siguiente:

      En este tutorial, trabajaremos con la cantidad mínima de CPU y RAM requerida para ejecutar Elasticsearch. Tenga en cuenta que la cantidad de CPU, RAM y almacenamiento que su servidor de Elasticsearch requiera dependerá del volumen de registros que prevé.

      Paso 1: Instalar y configurar Elasticsearch

      Los componentes de Elasticsearch no están disponibles en los repositorios de paquetes predeterminados de Ubuntu. Sin embargo, pueden instalarse con APT una vez que agregue la lista de fuentes de paquetes de Elastic.

      Todos los paquetes de Elasticsearch están firmados con la clave de firma de Elasticsearch para proteger su sistema contra la suplantación de paquetes. Su administrador de paquetes considerará confiables los paquetes autenticados con la clave. En este paso, importará la clave GPG pública de Elasticsearch y agregará la lista de fuentes de paquetes de Elastic para instalar Elasticsearch.

      Para comenzar, utilice cURL, la herramienta de línea de comandos para transferir datos con URL, para importar la clave GPG pública de Elasticsearch a APT. Tenga en cuenta que estamos usando los argumentos -fsSL para silenciar todos los progresos y posibles errores (excepto los de errores del servidor) y para permitir a cURL hacer una solicitud en una ubicación nueva si se redirige.  Canalice el resultado del comando cURL al programa apt-key, que añade la clave GPG pública a APT.

      • curl -fsSL https://artifacts.elastic.co/GPG-KEY-elasticsearch | sudo apt-key add -

      A continuación, agregue la lista de fuentes de Elastic al directorio sources.list.d, donde APT buscará nuevas fuentes:

      • echo "deb https://artifacts.elastic.co/packages/7.x/apt stable main" | sudo tee -a /etc/apt/sources.list.d/elastic-7.x.list

      A continuación, actualice sus listas de paquetes para que APT lea la nueva fuente de Elastic:

      Luego, instale Elasticsearch con este comando:

      • sudo apt install elasticsearch

      Ahora, Elasticsearch está instalada y lista para usarse.

      Paso 2: Configurar Elasticsearch

      Para configurar Elasticsearch, editaremos sus archivos de configuración. Elasticsearch tiene tres archivos de configuración:

      • elasticsearch.yml se utiliza para configurar Elasticsearch, el archivo de configuración principal
      • jvm.options se usa para configurar los ajustes de la máquina virtual de Java (JVM) de Elasticsearch
      • log4j2.properties se utiliza para configurar el registro de Elasticsearch

      En este tutorial, nos interesa el archivo elasticsearch.yml, donde se almacenan la mayoría de las opciones de configuración. Este archivo se encuentra en el directorio /etc/elasticsearch.

      Utilice su editor de texto preferido para editar el archivo de configuración de Elasticsearch. En este caso, utilizaremos nano:

      • sudo nano /etc/elasticsearch/elasticsearch.yml

      Nota: El archivo de configuración de Elasticsearch se encuentra en formato YAML, lo que significa que debemos mantener el formato de sangrías. Asegúrese de no añadir espacios adicionales al editar este archivo.

      El archivo elasticsearch.yml ofrece opciones de configuración para su clúster, nodo, rutas, memoria, red, descubrimiento y puerta de enlace. La mayoría de estas opciones están preconfiguradas en el archivo, pero las puede cambiar según sus necesidades. Para los fines de nuestra demostración de una configuración de un solo servidor, modificaremos únicamente la configuración del host de red.

      Elasticsearch escucha el tráfico de todos los lugares en el puerto 9200. Es conveniente restringir el acceso externo a su instancia de Elasticsearch para evitar que terceros lean sus datos o cierren su clúster de Elasticsearch a través de su API REST.  Para restringir el acceso y, por lo tanto, aumentar la seguridad, busque la línea que especifica network.host, elimine los comentarios reemplace su valor por localhost para que tenga el siguiente aspecto:

      /etc/elasticsearch/elasticsearch.yml

      . . .
      # ---------------------------------- Network -----------------------------------
      #
      # Set the bind address to a specific IP (IPv4 or IPv6):
      #
      network.host: localhost
      . . .
      

      Hemos especificado localhost para que Elasticsearch escuche en todas las interfaces y las IP vinculadas. Si desea que escuche únicamente en una interfaz específica, puede especificar su IP en lugar de localhost. Guarde y cierre elasticsearch.yml. Si utiliza nano, puede hacerlo al pulsar CTRL+X, seguido de Y y, luego, ENTER.

      Estos son los ajustes mínimos con los que puede comenzar para usar Elasticsearch. Ahora, puede iniciar Elasticsearch por primera vez.

      Inicie el servicio de Elasticsearch con systemctl. Elasticsearch tardará unos minutos en iniciarse. Espere, de lo contrario, es posible que reciba errores de que no se puede conectar.

      • sudo systemctl start elasticsearch

      Luego, ejecute el siguiente comando para permitir que Elasticsearch se cargue cada vez que su servidor se inicie:

      • sudo systemctl enable elasticsearch

      Ahora que Elasticsearch está habilitado en el inicio, pasemos al siguiente paso para hablar sobre la seguridad.

      Paso 3: Proteger Elasticsearch

      Por defecto, cualquier persona que pueda acceder a la API HTTP puede controlar Elasticsearch. Esto no siempre representa un riesgo de seguridad, dado que Elasticsearch escucha únicamente en la interfaz de bucle invertido (es decir, 127.0.0.1), a la que solo se puede acceder de forma local. Por lo tanto, el acceso público no es posible, y siempre y cuando todos los usuarios del servidor sean confiables, probablemente, la seguridad no sea una preocupación importante.

      Si necesita permitir el acceso remoto a la API HTTP, puede limitar la exposición de la red con el firewall predeterminado de Ubuntu, UFW. Ya debería tener este firewall habilitado si siguió los pasos del tutorial Configuración inicial de servidores para Ubuntu 18.04 indicado en los requisitos previos.

      Ahora, configuraremos el firewall para que permita el acceso al puerto de la API HTTP predeterminada de Elasticsearch (TCP 9200) para el host remoto de confianza que, en general, es el servidor que utiliza en una configuración de un solo servidor, como 198.51.100.0. Para permitir el acceso, escriba el siguiente comando:

      • sudo ufw allow from 198.51.100.0 to any port 9200

      Cuando se complete, puede habilitar UFW con el siguiente comando:

      Por último, revise el estado de UFW con el comando que se indica a continuación:

      Si especificó las reglas correctamente, el resultado debería tener el siguiente aspecto:

      Output

      Status: active To Action From -- ------ ---- 9200 ALLOW 198.51.100.0 22 ALLOW Anywhere 22 (v6) ALLOW Anywhere (v6)

      Ahora, el UFW debería estar habilitado y configurado para proteger el puerto 9200 de Elasticsearch.

      Si desea invertir en protección adicional, Elasticsearch ofrece el complemento Shield comercial.

      Paso 4: Probar Elasticsearch

      Ahora, Elasticsearch debe estar en ejecución en el puerto 9200. Puede probarla con cURL y una solicitud GET.

      • curl -X GET 'http://localhost:9200'

      Debería ver la siguiente respuesta:

      Output

      { "node.name" : "My First Node", "cluster.name" : "mycluster1", "version" : { "number" : "2.3.1", "build_hash" : "bd980929010aef404e7cb0843e61d0665269fc39", "build_timestamp" : "2020-04-04T12:25:05Z", "build_snapshot" : false, "lucene_version" : "5.5.0" }, "tagline" : "You Know, for Search" }

      Si ve una respuesta similar a la anterior, Elasticsearch funciona correctamente. De lo contrario, asegúrese de haber seguido correctamente las instrucciones de instalación y haber esperado un tiempo para que Elasticsearch se inicie por completo.

      Para realizar una verificación más completa de Elasticsearch, ejecute el siguiente comando:

      • curl -XGET 'http://localhost:9200/_nodes?pretty'

      En el resultado del comando anterior, puede verificar todos los ajustes actuales del nodo, el clúster, las rutas de las aplicaciones, los módulos y más.

      Paso 5: Usar Elasticsearch

      Para comenzar a usar Elasticsearch, primero, añadiremos algunos datos. Elasticsearch utiliza una API RESTful, que responde a los comandos habituales de CRUD: create, read, update y delete. Para usarlo, utilizaremos el comando cURL de nuevo.

      Puede añadir su primera entrada de la siguiente manera:

      • curl -XPOST -H "Content-Type: application/json" 'http://localhost:9200/tutorial/helloworld/1' -d '{ "message": "Hello World!" }'

      Debería recibir la siguiente respuesta:

      Output

      {"_index":"tutorial","_type":"helloworld","_id":"1","_version":2,"result":"updated","_shards":{"total":2,"successful":1,"failed":0},"_seq_no":1,"_primary_term":1}

      Con cURL, enviamos una solicitud HTTP POST al servidor de Elasticsearch. La URI de la solicitud era /tutorial/helloworld/1 con varios parámetros:

      • tutorial es el índice de los datos de Elasticsearch.
      • helloworld es el tipo.
      • 1 es la ID de nuestra entrada bajo el índice y el tipo anteriores.

      Puede recuperar esta primera entrada con una solicitud HTTP GET.

      • curl -X GET -H "Content-Type: application/json" 'http://localhost:9200/tutorial/helloworld/1' -d '{ "message": "Hello World!" }'

      El resultado debería ser el siguiente:

      Output

      {"_index":"tutorial","_type":"helloworld","_id":"1","_version":1,"found":true,"_source":{ "message": "Hello, World!" }}

      Para modificar una entrada existente, puede usar una solicitud HTTP PUT.

      • curl -X PUT -H "Content-Type: application/json" 'localhost:9200/tutorial/helloworld/1?pretty' -d '
      • {
      • "message": "Hello, People!"
      • }'

      Elasticsearch debe reconocer la modificación correcta de esta manera:

      Output

      { "_index" : "tutorial", "_type" : "helloworld", "_id" : "1", "_version" : 2, "_shards" : { "total" : 2, "successful" : 1, "failed" : 0 }, "created" : false }

      En el ejemplo anterior, modificamos message de la primera entrada a “Hello, People!”. Con eso, el número de versión se aumentó automáticamente a 2.

      Tal vez haya observado el argumento adicional pretty en la solicitud anterior. Habilita un formato de lenguaje natural para que pueda escribir cada campo de datos en una fila nueva. También puede aplicarlo a sus resultados cuando obtiene datos para que sean más legibles al ingresar el siguiente comando:

      • curl -X GET -H "Content-Type: application/json" 'http://localhost:9200/tutorial/helloworld/1?pretty'

      Ahora, la respuesta tendrá un formato que permite que un humano la analice:

      Output

      { "_index" : "tutorial", "_type" : "helloworld", "_id" : "1", "_version" : 2, "found" : true, "_source" : { "message" : "Hello, People!" } }

      En este punto, añadimos y consultamos datos en Elasticsearch. Para obtener más información sobre las demás operaciones, consulte la documentación de la API.

      Conclusión

      Instaló, configuró y comenzó a usar Elasticsearch. Desde la versión original de Elasticsearch, Elastic desarrolló tres herramientas adicionales, Logstash, Kabana y Beats, que se utilizan en conjunto con Elasticsearch como parte de la pila de Elastic. Utilizadas en conjunto, estas herramientas le permiten buscar, analizar y visualizar registros generados desde cualquier fuente y en cualquier formato en lo que se conoce como “registro centralizado”. Para comenzar a usar la pila de Elastic en Ubuntu 18.04, consulte nuestra guía Cómo instalar Elasticsearch, Logstash y Kibana (la pila de Elastic) en Ubuntu 18.04.



      Source link