Original article: How to create your portfolio website using React.js

Después de que mis amigos cancelaran nuestros planes de fin de semana, buscaba algo para pasar el tiempo. Finalmente me decidí por hacer un sitio web portfolio, después de darle un vistazo a mi larga lista de proyectos a realizar pendientes.

Tras muchas horas de buscar tecnologías y diseños, terminé creando este sitio web con React.js y usé Github pages para publicarlo. Pueden encontrar el código acá (Técnicamente se llama "aplicación web", pero en este artículo me referiré a él como "sitio web"...espero que este bien).

Qué vas a aprender

  • Algunos conceptos básicos de React.js
  • Cómo usar create-react-app desde un sitio web con HTML
  • Cómo publicar tu sitio web portfolio usando "Github pages"

Algunos conceptos que necesitas saber antes de comenzar...

Atención: siéntete libre de saltearte esta parte si ya estás familiarizado con los conceptos básicos de React.js y React Components.
Estos conceptos te darán una idea muy básica del mundo de React. Recomiendo profundamente que estudies más sobre React leyendo la documentación y practicando con la ayuda de freeCodeCamp.

Qué es React.js>

Por ahora, solo es necesario saber que React.js es la librería de JavaScript que se usa para construir componentes UI. Fue creada por los ingenieros de Facebook y actualmente está cambiando el mundo de JavaScript...

Qué es un componente de React >

React permite definir a los componentes como clases o funciones. Tambiés es posible agregarle información adicional a los componentes a través de las"props".

Los componentes permiten dividir la UI en secciones independientes como "header", "footer" y "body". Cada componente permite trabajar de manera independiente y de esta manera cada uno de los componentes pueden ser representados  dentro de ReactDOM de manera independiente y sin afectar a la página en su totalidad.

También incluye "métodos del ciclo de vida" que permite definir bloques de código para que se ejecuten de acuerdo con el estado del componente como creación, representación, actualización y destrucción.

Los componentes React vienen con sus propios pros y contras. Por ejemplo, podemos reutilizar un componente al exportarlo a otros componentes pero a veces es confuso manejar múltiples componentes comunicándose y desencadenando representaciones entre ellos.

Así debería lucir un componente:

import React, { Component } from 'react'

export default class Component-name extends Component {
  render() {
    return (
      <div>
        {these code will be rendered into the DOM}
      </div>
    )
  }
}

Qué es Github Pages>

Con Github Pages es posible publicar fácilmente un sitio usando Github gratis y sin necesidad de una gran infraestructura. Desde Github proveen modulos para no tener que preocuparse sobre muchas cosas y al final funcionará como por arte de magia.

Antes de empezar, asegurate de...

Decide que información vas a querer incluir en tu sitio web

Revisa por lo menos una vez tu curriculum actualizado (si no tienes uno, crea uno ahora y ¿quizás deja este proyecto para el próximo fin de semana?). Esto te ayudará a tener una idea más clara sobre qué tipo de información vas a poner en tu portfolio.

Busca inspiración

Busca a través de los miles de modelos gratis de sitios web portfolio que hay en internet, mira cómo y que puedas usar de ellos- haz un dibujo con papel y lapiz para tener una idea de cómo tu sitio web lucirá. Voy a usar este modelo como ejemplo.

Selecciona tus mejores fotos

Por supuesto que no vas a querer lucir mal en tu propio sitio web portfolio. Busca entre tus fotos y selecciona las mejores fotos tuya.

Pon tu lista de reproducción favorita

Los grandes dicen que las cosas buenas solo vienen con buena música...y seguramente no querrás perderte las cosas buenas.

1*7snm7ve4mLm3kwrPl0r2ig
un pequeño vistazo a mi sitio web portfolio

Pasemos al código

En las siguientes secciones, se describirán los distintos paso para crear la aplicación de portfolio pero no es necesario usar el mismo código que yo uso. Concentrate en aprender los conceptos y mostrar algo de creatividad. Lo próximo que sigue esta dividido en tres secciones:

  1. Preparando React-app
  2. Dividiendo la página HTML en componentes React
  3. Publicando la aplicación en Github pages

Preparando la aplicación React...

Vamos a usar creat-react-app -un módulo creado por Facebook- que nos ayudará a crear aplicaciones de React.js de forma fácil y sin preocuparnos por otras herramientas.

  • Ve a la consola y ejecuta el comando npm install creat-react-app para instalar este modulo via npm (asegurate de tener instalado npm antes de usarlo - hace click en este link para más información)
  • Después ejecuta npm create-react-app ${project-name} que traerá scripts para construir una estructura de archivos como esta:
my-portfolio-app
├── README.md (description of the project for GitHUb)
├── node_modules (stores all dependent modules for the project)
├── package.json (stores all meta information of the prokect like dependencies,version,revisions etc.)
├── .gitignore (files declared here will be ignored while uploading to GitHub like node_modules 
├── public (here you will store all images,JS,CSS files) 
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json 
└── src (our main code for app lies here)
    ├── {create component folder here}
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js

Crea la carpeta components dentro del directorio src. Este será el lugar donde guardaremos los componentes.

  • Copia todas las imagenes, tipografías, archivos HTML y CSS del modelo HTML en la carpeta public .

Tu directorio del proyecto debería lucir así:

1*IcnlLThnGN65xfgkFpnnBg
estructura de archivos
  • Ejecuta el comando npm install, que instalará los modulos dependientes dentro del directorio node_module .
  • Si hasta salió todo bien, al ejecutar el comando npm start se iniciará la aplicación React en el localhost. Si visitas la dirección https://localhost:3000, deberías ver la página de inicio de la aplicación React.

Dividiendo la página HTML en componentes de React...

¿Te acuerdas de la carpeta component que creamos dentro del directorio src, en el paso anterior? Ahora dividiremos el modelo de página HTML en componentes para combinarlos y así crear nuestra aplicación React.

  • Para empezar, necesitas definir los componentes que podes crear usando el archivo con el bloque de código HTML entero- encabezado, pie de página y contacto ¡Acá necesitas ser un poco creativo!
  • Busca etiquetas como section/div que  no estén embebidas dentro de otras etiquetas similares.
    Estas etiquetas deben contener código sobre una sección en particular de la página, independiente de otras. Puedes mirar mi repositorio de Github para tener una idea más clara sobre esto.
    Sugerencia: Usa la herramienta para inspeccionar elemento para jugar un poco con el código y ver cómo los cambios se muestran en el navegador.
  • Estos bloques de código HTML serán usados dentro del método render() del componente. El método render() devolverá el código siempre que un componente sea representado dentro del ReactDOM. Mira los códigos de bloques de más abajo como referencia:
<section id="colorlib-hero" class="js-fullheight" data-section="home">
    <div class="flexslider js-fullheight">
        <ul class="slides">
        <li style="background-image: url(images/img_bg_1.jpg);">
            <div class="overlay"></div>
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-6 col-md-offset-3 col-md-pull-3 col-sm-12 col-xs-12 js-fullheight slider-text">
                        <div class="slider-text-inner js-fullheight">
                            <div class="desc">
                                <h1>Hi! <br>I'm Jackson</h1>
                                <h2>100% html5 bootstrap templates Made by <a href="https://colorlib.com/" target="_blank">colorlib.com</a></h2>
                                    <p><a class="btn btn-primary btn-learn">Download CV <em class="icon-download4"></em></a></p>
                                </div>
                        </div>
                    </div>
                </div>
            </div>
        </li>
        <li style="background-image: url(images/img_bg_2.jpg);">
            <div class="overlay"></div>
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-6 col-md-offset-3 col-md-pull-3 col-sm-12 col-xs-12 js-fullheight slider-text">
                        <div class="slider-text-inner">
                            <div class="desc">
                                <h1>I am <br>a Designer</h1>
                                    <h2>100% html5 bootstrap templates Made by <a href="https://colorlib.com/" target="_blank">colorlib.com</a></h2>
                                    <p><a class="btn btn-primary btn-learn">View Portfolio <em class="icon-briefcase3"></em></a></p>
                                </div>
                        </div>
                    </div>
                </div>
            </div>
        </li>
        </ul>
    </div>
</section>
sección del "inicio" del archivo HTML
import React, { Component } from 'react'

export default class Home extends Component {
  render() {
    return (
      <div>
        <section id="colorlib-hero" className="js-fullheight" data-section="home">
            <div className="flexslider js-fullheight">
                <ul className="slides">
                <li style={{backgroundImage: 'url(images/img_bg_1.jpg)'}}>
                    <div className="overlay" />
                    <div className="container-fluid">
                    <div className="row">
                        <div className="col-md-6 col-md-offset-3 col-md-pull-3 col-sm-12 col-xs-12 js-fullheight slider-text">
                        <div className="slider-text-inner js-fullheight">
                            <div className="desc">
                            <h1>Hi! <br />I'm Jackson</h1>
                            <h2>100% html5 bootstrap templates Made by <a href="https://colorlib.com/" target="_blank">colorlib.com</a></h2>
                            <p><a className="btn btn-primary btn-learn">Download CV <em className="icon-download4" /></a></p>
                            </div>
                        </div>
                        </div>
                    </div>
                    </div>
                </li>
                <li style={{backgroundImage: 'url(images/img_bg_2.jpg)'}}>
                    <div className="overlay" />
                    <div className="container-fluid">
                    <div className="row">
                        <div className="col-md-6 col-md-offset-3 col-md-pull-3 col-sm-12 col-xs-12 js-fullheight slider-text">
                        <div className="slider-text-inner">
                            <div className="desc">
                            <h1>I am <br />a Designer</h1>
                            <h2>100% html5 bootstrap templates Made by <a href="https://colorlib.com/" target="_blank">colorlib.com</a></h2>
                            <p><a className="btn btn-primary btn-learn">View Portfolio <em className="icon-briefcase3" /></a></p>
                            </div>
                        </div>
                        </div>
                    </div>
                    </div>
                </li>
                </ul>
            </div>
        </section>
      </div>
    )
  }
}
Componente React creado usando la sección de "inicio" del HTML

Sugerencia: Si sientes que las cosas se vuelven confusas al pasarlas a React - trata de enfocarte en el concepto de "cómo identificar posibles componentes desde el código HTML base". Una vez que estes más a gusto con React, la impletación será más fácil.

¿Notaste que hubo algunos cambios en el código HTML? class  se vuelve className. Estos cambios son necesarios porque HTML no es soportado en React- hasta crearon su propia sintaxis de javascript, basada en HTML, que se llama JSX. Entonces vamos a necesitar algunas partes del código HTML para convertirlo en JSX.

Durante este proyecto, encontré este convertidor de HTML a JSX , que automáticamente convierte HTML en JSX. Recomiendo usar este tipo de herramienta en vez de cambiar tu código a mano.

Después de un tiempo, deberías ya tener varios componentes ¡Ya nos estamos acercando al final! Combina estos componentes dentro uno llamado App.js (Sí, es posible representar un componente dentro de otro) y tu aplicación portfolio estará lista.

import React, { Component } from 'react';
import './App.css';
import Sidebar from './components/sidebar'
import Introduction from './components/introduction'
import About from './components/about'
import Projects from './components/projects'
import Blog from './components/blog'
import Timeline from './components/timeline'

class App extends Component {
  render() {
    return (
      <div id="colorlib-page">
        <div id="container-wrap">
		<Sidebar></Sidebar>
		<div id="colorlib-main">
			<Introduction></Introduction>
			<About></About>
			<Projects></Projects>
			<Blog></Blog>
			<Timeline></Timeline>
          	</div>
      	</div>
      </div>
    );
  }
}

export default App;
Todos los componentes combinados en app.js

Ten en cuenta que en el código de arriba es necesario primero importar los componentes con import,  para luego usarlo dentro de la sección  render(). Y para usar los componentes, dentro del método render(), podemos usar las etiqueta <nombre-del-componente></nombre-del-componente> o simplemente la etiqueta <nombre-del-componente/>.

  • Ejecuta npm start desde tu terminal y deberías ver los cambios reflejados en tu sitio web. No es necesario volver a ejecutar este comando si tenes que hacer más cambios en el código, ya que automáticamente se guardarán al guardar esos cambios. Gracias al hot reload es posible avanzar en el desarrollo más rápidamente.
  • Juega un poco con el HTML y el CSS para cambiar el contenido, de acuerdo con tu curriculum y para hacer tu portfolio más atractivo.Puedes probar distintas tipografías, cambiar los colores y agregar otras fotos a elección.

Publica tu aplicación React con Github pages

Ok, sobreviviste hasta ahora....así que tomate un tiempo para apreciar tu arduo trabajo. Aunque todavía te falta subir y publicar lo que hiciste así podes compartirlo con esos amigos que cancelaron esos planes de fin de semana.

  • Lo primero que tienes que hacer es instalar la librería npm de Github pages. Para hacerlo, ejecuta este comando npm install gh-pages en tu terminal.

Después, necesitas hacer los siguientes cambios en tu archivo manifest.json

Tu archivo manifest.json debería lucir así:

{
	"name": "portfolio-app",
	"version": "0.1.0",
	"private": true,
	"homepage": "https://Dhruv34788.github.io/me",
	"dependencies": {
		"gh-pages": "^2.0.1",
		"react": "^16.8.3",
		"react-dom": "^16.8.3",
		"react-scripts": "2.1.5",
		"yarn": "^1.13.0"},
	"scripts": {
		"start": "react-scripts start",
		"build": "react-scripts build",
		"predeploy": "yarn run build",
		"deploy": "gh-pages -d build",
		"test": "react-scripts test",
		"eject": "react-scripts eject"},
	"eslintConfig": {
		"extends": "react-app"},
	"browserslist": [
		">0.2%",
		"not dead",
		"not ie <= 11",
		"not op_mini all"
	]
}
manifest.json después de añadir el link de gh-pages

Por último, ve a la terminal y ejecuta el comando  npm run deploy y ¡a esperar que ocurra la magia! Tu aplicación será publicada después de que los scripts que se encargan de ello se ejecuten correctamente. Para verificar si tu aplicación fue publicada o no, puedes hacerlo visitando el enlace del campo homepage.

Cuidado: Por favor, ten cuidado al publicar cualquier cosa en internet. Realiza chequeos de seguridad para eliminar links internos, contraseñas, etc para que no llegué a manos de gente malintencionada.

Si vas a  estar actualizando constantemente...

Atención - Vas a necesitar realizar el paso de publicación cada vez que cambies algo y si estas haciendo cambios al código...¿adivina quién se va a aburrir rápido? (No te preocupes, yo te ayudo:P)


https://www.freecodecamp.org/news/learn-how-to-automate-deployment-on-github-pages-with-travis-ci/

Tarea para ti...

¡Felicitaciones! Creaste y publicaste tu aplicación portfolio. Si te interesa, puedes agregar las siguientes secciones a tu sitio web:

  • Blog: crea tu propio blog usando Node.js y una base de datos NoSQL como MongoDB y después fusionala con este sitio web portfolio.
  • Galería: agrega una sección a la página donde puedas mostrar tus fotos más recientes de tus perfiles de redes sociales.
  • Feed de Twitter: agrega una sección que muestre tus últimos tweets.
  • Frases aleatorias: agrega una sección que muestre frases motivadoras, de forma aleatoria.

Si implementas alguna de estas secciones, comparte tu trabajo conmigo. Estoy más que que dispuesto a ayudar (si es que puedo)

Para terminar...

Me gustaría tomarme un momento para reconocer el trabajo de aquellas personas que me inspiraron y me dieron el conocimiento para poder terminar este artículo.

  • Quincy Larson, Sahat Yalkabov y su comunidad: Por crear freeCodeCamp - la plataforma donde puedes aprender sobre cualquier tema relacionado con tecnologías web, con tutoriales prácticos y de manera gratuita.
  • Colorlib: por sus diseños modernos que fueron una gran inspiración para mi sitio web portfolio.
  • Daniel Lo Nigro y su comunidad: por el compilador HTML to JSX, que me fue útil para convertir bloques de códiogo HTML a JSX.
  • A mis queridos amigos: quienes me ayudaron corrigiendo mis errores.
  • ¡A tí!: por quedarte hasta el final, espero que haya sido productivo. Sigue explorando y construyendo cosas maravillosas.
0*FgSZRsUOdqfFZJBY
Foto de Ruediger Theiselman en Unsplash