Componentes: concepto e imports/exports entre componentes

Resumen:

Empezando a tocar mano, vamos a ver componentes y haremos uno de muchos. Esta va a ser la primera vez que veamos el gran potencial que tiene React sobre componentización. Falta bastante por ver, pero ya podemos ir haciendo algo (un portfolio 😎)

Podrás ver la lista de los 100 días en este enlace.

Componentes

Los componentes son bloques de código reutilizables que tienen que cumplir con tres requisitos:

• Tienen que poder representarse a si mismo
• Tiene que tener la capacidad de manejar su estado interno en caso de tenerlo
• Tiene que tener la capacidad de recibir propiedades inmutables (props)

Los componentes que no contienen la capacidad de manejar su estado interno, se los conocen como Dumb o Stateless. Los que si pueden manejar su estado interno, se los conocen como Smart o Statefull.
Un ejemplo de un componente smart es el botón de "favoritos" de alguna aplicación. Eso es un estado interno.

Vamos a crear una post genérico de un blog (título y descripción):
Utilizando el proyecto creado del día anterior (o creando uno nuevo), vamos a editar el App.js para que solo retorne un div:

function App() {
  return (
    <div>
    </div>
  );
}

Luego, vamos a crear una carpeta llamada components dentro de la carpeta src. A dentro, vamos a crear otra carpeta Blog. Por convención, se crea una carpeta principal components y el nombre de los componentes en CamelCase.
Dentro de la carpeta Blog, vamos a crear un archivo llamado index.js:

import React from 'react';

function Blog(){
    return(
        ...
    )
}

export default Blog;

Por defecto, se crea siempre este tipo estructura en cada componente. Siempre importaremos React para obtener todas sus funcionalidades y lo exportaremos. La función siempre debe tener el nombre del componente.

Ahora, procederemos a crear una entrada de Blog:

import React from 'react';

function Blog(){
    return(
        <section>
            <h3>Titulo copado</h3>
            <p>Parrafo copado</p>
        </section>
    );
}

export default Blog;

Debemos llamar desde App al componente Blog:

import React from 'react';
import Blog from './components/Blog/index.js';
import './App.css';

function App() {
  return (
    <div>
      <Blog />
    </div>
  );
}

export default App;

En la segunda linea, importamos el componente (como el archivo se llama index.js, se puede omitir y escribir menos). Dentro del div, ponemos nuestro componente como si fuera una etiqueta de HTML.
Si probamos ahora ejecutando npm start (dentro de la carpeta de la app!), veremos nuestro componente creado.

Lo maravilloso de esto, es que pueden repetir el componente la cantidad que quieran:

function App() {
  return (
    <div>
      <Blog />
      <Blog />
      <Blog />
      <Blog />
    </div>
  );
}

Volviendo a tener solo un componente, vamos a poder crear otros componentes: uno para el título y otro para el párrafo.
Para el titulo, dentro de la carpeta components, creamos otra carpeta llamda Title con un archivo llamado index.js. Codeamos de la misma forma que con index.js de Blog así:

import React from 'react';

function Title(){
    return(
        <h3>Titulo copado</h3>
    );
}

export default Title;

En index.js de Blog, importamos el componente y escribimos su etiqueta:

import React from 'react';
import Title from '../Title'

function Blog(){
    return(
        <section>
            <Title />
            <p>Parrafo copado</p>
        </section>
    );
}

export default Blog;

De la misma forma, crearemos un componente Text y su archivo index.js para nuestro párrafo. Después importamos el componente en index.js de Blog y creamos la etiqueta.

Práctica

Para acompañar el aprendizaje, voy a hacer un portfolio (obvio que para mí).
Con esto que sabemos hasta ahora, podemos hacer dos partes del portfolio: navbar y sección de proyectos. Por ahora solo crearemos los componentes y luego de terminar de aprender React, le daremos estilo y usaremos algunas librerías para darle un poco de animaciones. Después veremos como desployar la app.

Armé esta estructura en base a lo que aprendí hoy:

Entonces, tenemos los siguientes códigos:

• En App.js

import Nav from './components/Nav';
import Projects from './components/Projects';

function App() {
  return (
    <div>
      <Nav />
      <Projects />
    </div>
  );
}

export default App;

• En index.js de Nav:

import React from 'react';
import Menu from '../Menu/'

function Nav() {
  return (
    <div>
        <Menu />
        <Menu />
        <Menu />
        <Menu />
        <Menu />
    </div>
  );
}

export default Nav;

• En index.js de Menu:

import React from 'react';

function Menu() {
  return (
    <a>
        MenuN
    </a>
  );
}

export default Menu;

• En index.js de Projects:

import React from 'react';
import Card from '../Card/';

function Projects() {
  return (
    <section>
        <Card />
        <Card />
        <Card />
        <Card />
    </section>
  );
}

export default Projects;

• En index.js de Card:

import React from 'react';

function Nav() {
  return (
    <div>
        <figure>
            Foto
        </figure>
        <h2>Titulo</h2>
        <p>Descripción</p>
        <h3>Tecnologías</h3>
        <figure>
            Imagenes copadas
        </figure>
    </div>
  );
}

export default Nav;

• Le damos un poco de estilo al componente Card para poder visualizar un poco mejor. Esto lo hacemos desde src en index.css:

section{
  display: flex;
}

section div{
  text-align: center;
  border: 1px solid red;
  margin: 1rem;
}

Y tenemos esto!

Más adelante, mejoraremos esto para poder agregar enlaces e imagenes.

Día 8/100