react revisitado: 02. Componentes

Introducción a los componentes de React

George Saru

archivado en: JavaScript / 7 Mayo, 2017 / taller:

Como vimos, React es un framework orientado a componentes, los cuales se van estructurando unos dentro de otros hasta formar el árbol final de una aplicación.

El componente más sencillo que podemos definir en React es una función que devuelve un fragmento de JSX sin más.

componente-simple.jsx

/* Para definir un componente debemos "importar" React */

import React from 'react';

/* Los componentes comienzan por mayúscula y siguen en camelCase */

const ComponenteSimple = () => {

return (

<h3>Soy un componente mondo lirondo</h3>

)

};

/* Exportamos por defecto el componente */

export default ComponenteSimple;

En nuestra aplicación demo tendremos al menos dos componentes de este tipo, uno para el header y otro para el footer, pero antes de prepararlos vamos a ordenar un poco mejor el scaffolding que prepara create-react.

En vez de ir soltando todos los componentes de forma desordenada en src, creamos ahí una carpeta denominada components, en la que a su vez  haremos una carpeta por cada pantalla de la aplicación y una llamada commons donde echaremos los componentes comunes a varias pantallas, como el header y el footer. Además, en la raíz de components prepararemos un archivo denominado index.js que nos servirá de índice para exportar e importar los componentes de forma más cómoda y limpia. Es decir, hacemos algo así:

src/

components/

commons/

footer.js

header.js

view-main/

view-main.js

index.js

App.js

index.js

Como es un componente simple, de mera presentación, para la cabecera escribimos una función sencilla. (Observa cómo se definen los comentarios intercalando una expresión con las llaves).

src/components/commons/header.js

import React from 'react';

const MainHeader = () => {

return (

<header className='main-header'>

{/* Cabecera principal de la aplicación */}

<h3>Cabecera principal </h3>

</header>

);

};

export default MainHeader;

Para el footer hacemos algo parecido.

src/components/commons/footer.js

import React from 'react';

const MainFooter = () => {

return (

<footer className='main-footer'>

Footer principal

</footer>

);

};

export default MainFooter;

Para incluir estos dos componentes en otro habría que importarlos uno a uno desde este último. Como eso termina siendo algo pesado, en el raíz de components preparamos un archivo llamado index.js que permitirá luego importarlos todos de manera más cómoda. De momento, solo tendrá referenciados estos dos componentes, claro.

src/components/index.js

import MainHeader from './commons/main-header';

import MainFooter from './commons/main-footer';

export {

MainHeader,

MainFooter

}

Ahora vamos con el componente principal de la primera pantalla, la «home», que podemos llamar view-main (a mí me gusta empezar el nombre de los componentes raíz de cada pantalla con el término view-, pero cada cual que lo llame cómo quiera). Lo guardamos en un directorio que podemos llamar igual dentro de components. Este componente de momento solo tendrá el header y el footer comunes de la aplicación, por lo que también podemos escribirlo como una función sencilla.

src/components/view-main/view-main.js

import React from 'react';

/* Como tenemos un archivo index.js donde ya tenemos los componentes mapeados, podemos usar esta otra fórmula */

import { MainHeader, MainFooter } from '../../components';

const ViewMain = () => {

return (

<div className='view-main'>

<MainHeader />

 <p>Aquí irá más contenido</p>

<MainFooter />

</div>

);

};

export default ViewMain;

Añadimos el componente ViewMain al listado que tenemos en index.js.

src/components/index.js

import MainHeader from './commons/main-header';

import MainFooter from './commons/main-footer';

import ViewMain from './view-main/view-main';

export {

MainHeader,

MainFooter,

ViewMain

}

Ahora en el componente App, que recordemos es el componente principal, borramos todo lo que viene por defecto con el create-react y dejamos una clase con un método llamado render que devuelve el componente ViewMain. Más adelante volveré sobre esta manera de definir los componentes.

src/App.js

import React, { Component } from 'react';

import { ViewMain } from './components';

class App extends Component {

render() {

return (

<ViewMain />

);

}

}

export default App;

Ya tenemos casi todo el castillo de matrioskas montado. Solo falta quitar el «Hola Mundo» que teníamos en el index.js del root que preparamos en la entrada anterior y en su lugar poner el componente App.

src/index.js

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App';

import './index.css';

ReactDOM.render(

<h3>Hola Mundo</h3>,

document.getElementById('root')

);

ReactDOM.render(

<App />,

document.getElementById('root')

);

Por último vamos a añadir unas pocas reglas de estilo que nos permitan identificar mejor los componentes en pantalla. Borramos el archivo App.css y nos quedamos solo con index.css, donde podemos escribir algo así:

src/index.css

body {

margin: 2em;

font-family: sans-serif;

max-width: 1200px;

}

.main-header {

border: 1px solid blue;

padding: 0.2em;

}

.main-footer {

border: 1px solid red;

padding: 0.2em;

}

.view-main {

border: 1px solid green;

padding: 0.5em;

}

De esta manera, nos queda algo feo, pero didáctico ^^.

Resumiendo de abajo arriba: tenemos dos componentes comunes, MainHeader y MainFooter, que hemos incluido en un componente para la primera pantalla aka vista principal, el cual se llama ViewMain. A su vez, desde el contenedor principal, App, hemos insertado este componente, y desde el index.js, mediante el método ReactDOM.render(), hemos engarzado App con un nodo del DOM normal que lleva por id root. En un esquema:

 

La aplicación demo tal y como está en este momento se puede encontrar completa en git

|| Tags: ,

valoración de los lectores sobre react revisitado: 02. Componentes

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • 5 sobre 5 (1 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

Aportar un comentario

*