Mi primer Portfolio con Node, Express y ReactJs. Parte 2.

Codeando con el Frontend.

¡Hola! Vengo a postear la segunda parte del portfolio. Donde vamos a trabajar con React haciendo la integración de nuestra API.

En esta parte, vamos a ver la parte más linda de todas. Los estilos...

Datito: Vamos a hacer el deploy de esta app en Vercel.

Creando la app de React.

Iniciando el entorno

Estando en la carpeta

portfoliointegracion

(la creamos en el post anterior cuando empezamos con el backend) vamos a escribir el siguiente comando

npx create-react-app <nombre del frontend>
cd my-app
npm start

Con esto ya vamos a tener corriendo la app de React.

Para integrar la API que creamos vamos a estar usando el paquete Axios, que se instala de la siguiente manera:

npm install axios --save

Organizando las carpetas

Una vez instalado, vamos a crear los archivos para comenzar a trabajar de manera ordenada. Sobre la carpeta src, vamos a crear una carpeta Component, y dentro de estas necesitamos crear dos carpetas que van a contener nuestros componentes: About y Portfolio.

En About creamos dos archivos: About.css y About.js.
En Portfolio creamos dos archivos: Portfolio.css y Portofolio.js.
Nos debería quedar algo como esto:

Integrando la API

En About.js vamos a usar Hooks y Axios para la integración. Tenemos que escribir el siguiente código:

import React,{useState,useEffect} from 'react';
import axios from 'axios';
import './About.css'

function About(){
    const [information, setInformation] = useState({});
    useEffect(() => {
        axios.get('https://backend-portfolio-giuli.herokuapp.com/About')
        .then(
            res => setInformation(res.data[0])
        )}, [setInformation])
    return()
};

export default About;

Importante: Recuerden que en axios.get() va la URL de su api.

Lo mismo hacemos con Portfolio.js:

import React,{useState,useEffect} from 'react';
import axios from 'axios';
import './Portfolio.css'

function Portfolio(){
    const [projects, setProjects] = useState({});
    useEffect(() => {
        axios.get('https://backend-portfolio-giuli.herokuapp.com/Portfolio')
        .then(
            res => setProjects(res.data)
        )}, [setProjects])

    return()
};

export default Portfolio;

Return está vacío porque aún no empezamos a usar la data que trajimos con axios. Tampoco lo importamos en App.js porque al ser un componente que retorna vacío , va a romper por todos lados.

Maquetando los componentes.

Una vez que tenemos las integraciones, vamos a comenzar a usar los datos en el componente, pasándolos a un html.

Importante aclaración: Cada uno va a tener su propio JSON, lo que posiblemente haga que no tengamos las mismas keys. Para esas personas, este HTML no le va a servir.

En el HTML del About.js, dentro del return:

<div className="About-card">
            <div className="div-foto">
                <img className="foto-perfil" alt="FotoPerfil" src={information.photo}></img>
            </div>
            <div className="Descripcion">
                <h1>{information.name}</h1>
                <h2>{information.profession}</h2>
                <p>{information.about_me}</p>
                <ul className="skills">
                    { information.skills && information.skills.map((skill, index) => 
                        <p className="skill">{skill}</p>
                    )}
                </ul>
            </div>
        </div>

{ information.skills && information.skills.map((skill, index) =>

{skill}

)} => En mi JSON, los skills eran un array, así que para mostrarlos tengo que recorrerlos.

Lo mismo hacemos con el return de Portfolio.js:

<>
            <div className="mega-card-portfolio">
                { projects.length > 0 && projects.map((project, index) => 
                        <div className="individual-card">
                        <h1>{project.name}</h1>
                        <img className="imagen-proyecto" alt="imagen-proyecto" src={project.image}></img>
                        <p>{project.description}</p>
                        <a className="boton-visitar" href={project.link}>Visitar Proyecto</a>
                    </div>
                )}
            </div>
</>

</> => Para poder recorrer los proyectos, vamos a usar los Fragments.

{ projects.length > 0 && projects.map((project, index) => En este caso necesitamos recorrer todos los proyectos para poder armar las tarjetas individuales. Hacemos una comprobación condicional, para que React no intente renderizar cuando el objeto este vacío.

Mostramos los componentes en la App.

Para mostrar los componentes en la página, tenemos que modificar el App.js :

import React from 'react';
import './App.css';
import About from './Component/About/About';
import Portfolio from './Component/Portfolio/Portfolio'

function App() {
  return (
    <div className="App">
      <About/>
      <Portfolio/>
    </div>
  );
}

export default App;

Styling

Esta parte es extremadamente personal, y debería ser en donde decidan destacarse. Para que el portfolio sea SUYO, y no solo algo que copiaron de un blog de quinta. :D

En About.css escribimos:

.About{
    background-color: seashell;
    display: flex;
    margin: 10px auto;
    width: 80%;
    padding: 2rem;
    border-radius: 3%;
    box-shadow: 10px 5px 5px black;

}

.div-foto{
    display: inline;
}

.foto-perfil{
    width: 80%;
}

.Descripcion{  
    justify-content: center;
}

.skills{
    display: flex;
    flex-wrap: wrap;
}

.skill{
    background-color: palevioletred;
    margin: 0.3rem;
    padding: 0.8rem;
    border-radius: 6%;
}

En Portfolio.css van los siguientes estilos:

.mega-card-portfolio{
    display: flex;
    flex-wrap: wrap;
}

.individual-card{
    background-color: seashell;
    margin: 2rem auto;
    box-shadow: 10px 5px 5px black;
    border-radius: 3%;
    padding: 1%;
}

.imagen-proyecto{
    width: 80%;
}

.boton-visitar{
    background-color: palevioletred;
    text-decoration: none;
    padding: 0.8rem;
    border-radius: 3%;
}

En mi caso hice un cambio en Index.css en la propiedad body agregué:

background-color: rosybrown;

Como habrán notado me gusta mucho el rosa.

Debería quedar algo así:

Subiendo el proyecto a Github

En su perfil de Github deben hacer click en el botón con un + y seleccionar crear nuevo repositorio.
Una vez completado el formulario que les aparece hacen click en crear respositorio y en su consola, desde la carpeta que contiene la API, escriben los siguientes comandos (estos también se los indica Git, aunque le haremos un ligero cambio):

git init
git add .
git commit -m "first commit"
git remote add origin <el link de su repo>
git push -u origin master

Después de que hicieron el push, van a su página en Github y presionan F5, ya deberían tener su repo cargado.

Sip, lo copié tal cual del primer post.

Deploy en Vercel

Una vez que tenemos la cuenta de Vercel, cuando iniciamos sesión en nuestro perfil, en la esquina superior derecha vamos a tener el botón Import Project.

Una vez hacemos click, nos presenta la siguiente pantalla, en nuestro caso como subimos el repo a github elegimos esa opción para importar.

En este paso seguro les va a preguntar si quieren deployar todos sus proyectos de Github, o solo uno en particular.

(En mi caso como tengo muchos proyectos de Back, seleccioné este proyecto en particular)

En el siguiente paso les pide la URL del repo y cuando hacen click en continuar, tienen la siguiente pantalla.

Hacen click en Deploy y van a tener su app en React publicada para que puedan compartirla con quien quieran. :D

(Tengan en cuenta que a veces demora un poco en renderizar porque Heroku pone sus apps en standby cuando no estan siendo utilizadas)

Eeeeen fin. Con esto ya tenemos nuestro proyecto FINALIZADO.

Espero que les haya servido.
Cualquiera duda o sugerencia, pueden encontrarme en Twiter :D

Besis, los quiero.

Comments

[GusEngers]

Muy bueno!