Creación del primer componente

Completado

El desarrollo de React se basa en componentes. Estas unidades independientes están diseñadas para reutilización y modularidad. Los proyectos de React normalmente contienen muchos componentes.

Un componente puede ser una función o una clase. La mayoría de los desarrolladores de React prefieren crear componentes mediante el uso de funciones, por lo que nos centraremos en este estilo.

Normalmente, las aplicaciones tienen un componente principal, normalmente denominado App. App actúa como la raíz de la aplicación. Comenzaremos por crear nuestro componente App.

Creación del componente

1. Abra Visual Studio Code.

2. Cree un nuevo archivo en src. Asígnele el nombre App.jsx.

3. Agregue el siguiente código:

   import React from 'react';
   
   function App() {
       return (
           <article>
               <h1>Recipe Manager</h1>
           </article>
       )
   }
   
   export default App;
   

Exploración del código

Iniciamos el archivo App.jsx importando React para que podamos usar la sintaxis JSX. A continuación, creamos una función denominada App, como crearíamos cualquier otra función en JavaScript. Por último, exportamos la función mediante la sintaxis estándar de JavaScript. El núcleo de nuestro componente está incluido en la instrucción return.

Tenga en cuenta que estamos usando HTML (técnicamente XML) insertado en JavaScript. Esta funcionalidad muestra la eficacia de JSX. Podemos usar la lógica y la eficacia de JavaScript para crear unidades de trabajo independientes (componentes).

El código HTML devuelto por la función (o componente) se muestra en la página. El encabezado contiene el Administrador de recetasde texto.

Nota:

El elemento h1 se anida dentro de un elemento article de HTML 5. Dado que JSX usa XML, es necesario tener un elemento raíz. El elemento article es la raíz para este componente. Esta estructura nos permite agregar HTML y otros componentes de React a medida que la aplicación crece.

Actualización de la aplicación para usar el componente principal

Vamos a actualizar nuestra aplicación para usar nuestro nuevo componente.

1. Abra index.jsx.

2. Después de la línea que pone import ReactDOM from 'react-dom'; (debe ser la línea 3), agregue el código siguiente:

   import App from './App';
   

3. Busque el código que pone <h1>Hello, world!</h1>. Reemplace este mensaje inicial por una llamada al componente App:

   <App />
   

Exploración del código

Este es el contenido completo de index.jsx ahora:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

Nuestra instrucción import importa nuestro componente mediante la misma sintaxis que usaríamos para cualquier otro módulo. Ahora podemos usar el componente como si fuera HTML.

Nota:

Dado que JSX usa la sintaxis de XML, debemos cerrar la etiqueta App. Para ello, se puede usar la sintaxis de formato largo <App></App> o la abreviatura de "autocierre" <App />. Ambas opciones funcionan igual, pero la mayoría de los desarrolladores usan la opción abreviada.

Ver los resultados

Guarde todos los archivos. El explorador se actualiza automáticamente con los resultados.