Mi primer Portfolio con Node, Express y ReactJs. Parte 2.
Tags: react, webdev, tutorial, javascript
Published: 2020-10-05 12:42:21

##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...

![alt](https://photos.collectednotes.com/photos/590/ad09342a-9378-4f4f-9585-088e577e89b7)

Datito: Vamos a hacer el deploy de esta app en [Vercel](https://vercel.com/).

###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: 

![alt](https://photos.collectednotes.com/photos/590/d9329204-064a-49d8-8148-bc6da51bf4a1)
 
####Integrando la API


En *About.js* vamos a usar [Hooks](https://es.reactjs.org/docs/hooks-effect.html#example-using-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) =><p className="skill">{skill}</p>)}** => 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](https://es.reactjs.org/docs/fragments.html#short-syntax).

**{ 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í: 

![alt](https://photos.collectednotes.com/photos/590/c42daadd-d35e-4a1b-bbf3-9bfe5802fd0a)

####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](https://vercel.com/), cuando iniciamos sesión en nuestro perfil, en la esquina superior derecha vamos a tener el botón **Import Project**.

![alt](https://photos.collectednotes.com/photos/590/6aab14d8-1197-4c26-a882-1c8ae8f67f80)

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

![alt](https://photos.collectednotes.com/photos/590/cb6c91ff-4d94-460f-b2ad-db3ed4a30335)

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. 
 
![alt](https://photos.collectednotes.com/photos/590/2e1b87be-0f7d-45cd-bd0c-f3a52ab2ebd4)

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. 

![alt](https://media.giphy.com/media/5GoVLqeAOo6PK/source.gif)

Espero que les haya servido. 
Cualquiera duda o sugerencia, pueden encontrarme en [Twiter](https://twitter.com/GiulianaEOlmos) :D

Besis, los quiero. 

[![Invitame un café en cafecito.app](https://cdn.cafecito.app/imgs/buttons/button_1.svg)](https://cafecito.app/giulianaeolmos)