React, parte 2: Componentes – Fernando Gaitán

Continuamos, y en esta ocasión vamos a ver el tema fundamental para comprender React, más bien el alma: componentes.

Primero que nada, recordar que para que la aplicación funcione debemos iniciar el servidor.

Entramos en la carpeta del proyecto:

cd mi-primer-proyecto-react

(mi-primer-proyecto-react cambiarlo por el nombre que hayas puesto)

Iniciamos el servidor:

npm run dev

Estructura básica de una aplicación web

Deberíamos tener (en mi caso yo lo creé con vite) una estructura similar:

A lo largo del curso iremos conocimiento un poco más en profundidad para qué es cada archivo o directorio. Vamos a comenzar con index.html

Dentro de este archivo podemos ver un documento html básico, y un elemento <div> vacío:

<div id="root"></div>

El mensaje que habíamos visto en la publicación pasada, al instalarlo de hecho se genera ahí dentro.

Pero para conocer un poco más su funcionamiento vamos a editar src/main.jsx. Aclarar también que dentro de src es donde vamos a crear todo el código de react:

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

La etiqueta <App /> no es un elemento de HTML, sino más bien un componente. Los documentos jsx nos permiten combinar código js con xml. Ese <xml> se convertirá en código <html> mediante a una sintáxis similar, que tendremos que tener en cuenta más adelante.

Creando nuestro primer componente

Lo primero que vamos a hacer es eliminar <App />:

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    {/* INSERTE COMPONENTE (Soy un comentario) */}
  </React.StrictMode>,
)

Luego vamos a ir dentro del directorio src y vamos a crear un sub directorio con cualquier nombre, donde van a ir los componentes de nuestra aplicación. En mi caso yo voy a ponerle: ‘components’

Dentro vamos a crear un archivo llamado: ‘MiPrimerComponente.jsx’:

function MiPrimerComponente(){
    return (
        <div>
            <h1> Soy tu primer componente </h1>
        </div>
    )
}

Exportando componentes

Las funciones nos permiten crear componentes, sin embargo, estos no podrán usarse fuera, sino son exportados.

Para eso podemos vamos a agregar export default delante de la función:

export default function MiPrimerComponente(){
    return (
        <div>
            <h1> Soy tu primer componente </h1>
        </div>
    )
}

Otra alternativa podría ser:

function MiPrimerComponente(){
    return (
        <div>
            <h1> Soy tu primer componente </h1>
        </div>
    )
}

export default MiPrimerComponente;

Importando componentes

Ahora que el componente puede usarse por fuera, vamos a ir al archivo main.jsx y vamos importarlo arriba (donde está el resto de los import):

import MiPrimerComponente from './components/MiPrimerComponente.jsx'

Y luego vamos a cambiar:

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    {/* INSERTE COMPONENTE (Soy un comentario) */}
  </React.StrictMode>,
)

Por:

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <MiPrimerComponente />
  </React.StrictMode>,
)

CSS

También podemos usar import para usar hojas de estilos.

Por ejemplo main.jsx importa un documento llamado «./index.css»:

import './index.css'

Hay que aclarar que los estilos también estarán disponibles para el resto de los componentes. Sin embargo, lo recomendable también es que cada uno tenga su propio .css.

Podemos crear una carpeta a la par de «components» llamada «css» y dentro crear las hojas de estilo, que por convención deberían llamarse igual que el componente.

Dentro del componente vamos a importar el .css:

import '../css/MiPrimerComponente.css';

export default function MiPrimerComponente(){
    return (
        <div>
            <h1> Soy tu primer componente </h1>
        </div>
    )
}

atributo className

Algo a tener en cuenta es que en React aunque renderizamos código HTML (pero lo que escribimos es XML) no todo el código va a ser igual.

Con respecto al atributo que tienen los elementos HTML class, debemos reemplazarlo por className.

Css:

.celeste{
    color: #0fb1f5;
}

Jsx:

<h1 className='celeste'> Soy tu primer componente </h1>

Esto se debe a que jsx sigue siendo código js, y la palabra reservada class entra en conflicto, porque en Javascript es para definir clases y en HTML agregar estilos.

Otro ejemplo de esto es:

<label for=''></label>

Teniendo en cuenta que en Javascript for es para hacer ciclos de repetición, debemos reemplazarlo por:

<label htmlFor=''></label>

Self-closing tag

Que podría ser traducido como etiquetas que se cierran a sí mismas, hace referencia a aquellas etiquetas de HTML que no contienen texto u otras etiquetas. Por ejemplo <input>, <br>, <img>, etc.

A partir de la versión de HTML5, hacer esto:

<br>

Es totalmente válido. Sin embargo, en XML esto no se puede. Si abrimos una etiqueta, debemos cerrarla:

<etiqueta> Texto u otras etiquetas </etiqueta>

Y si la etiqueta es una self-closing tag debemos agregar la barra al final:

<etiqueta />