Una entrevista técnica es una oportunidad que tiene un empleador potencial de evaluar tus habilidades y conocimientos de desarrollo web.

El entrevistador te hará preguntas sobre tu experiencia y habilidades en HTML, CSS, y JavaScript. También te preguntarán, probablemente, preguntas específicas de frameworks como React, Angular, Vue o cualquier otro framework que utilice la empresa.

Quizás también te den un desafío de código para evaluar tus habilidades en un área específica.

Hoy, miraremos las preguntas y problemas más comunes en entrevistas técnicas de front-end, enfocándonos en React y JavaScript.

Lo que los entrevistadores están buscando

Cuando te entrevistes para una posición como desarrollador de front-end, prepárate para discutir tus habilidades y experiencia en varios lenguajes de programación, herramientas y frameworks.

Los entrevistadores también querrán confirmar que tengas un entendimiento profundo de las últimas tendencias y tecnologías del desarrollo web.

Prepárate para hablar acerca de tus proyectos anteriores y como afrontaste la resolución de problemas de todo tipo.

Asegúrate de mostrar tus habilidades de resolución de problemas discutiendo como afrontaste las dificultades durante el proceso de desarrollo.

Por último, no olvides resaltar tus fortalezas.

Preguntas más frecuentes en entrevistas técnicas de Front-End

Los problemas de entrevistas técnicas de front-end son directos y comunes. Si has estado programando por al menos 6 meses, estarás familiarizado con la mayoría de los conceptos que se preguntan.

Una vez practiques las preguntas adecuadas con un enfoque basado en el tiempo, deberías poder pasar las entrevistas.

Echemos un vistazo a las preguntas más frecuentes.

Map, ForEach, Filter y Reduce

Las preguntas más frecuentes (generalmente al principio de las entrevistas) son acerca de métodos de arreglos (array methods). El entrevistador querrá evaluar que tan cómodo te sientes con manipulación de arreglos.

El método .map()

El método .map() itera sobre un arreglo, computa cualquier lógica que hayas escrito en el cuerpo del mapa, y retorna un NUEVO arreglo.

let arr = [
  { id: 1, age: 12, name: 'Manu' },
  { id: 2, age: 24, name: 'Quincy' },
  { id: 3, age: 22, name: 'Abbey' },
]

let names = arr.map((el) => el.name)
console.log(names)
// Resultado: [ 'Manu', 'Quincy', 'Abbey' ]

El método .forEach()

ForEach es similar a.map() pero NO retorna un arreglo.

let arr = [
  { id: 1, age: 12, name: 'Manu' },
  { id: 2, age: 24, name: 'Quincy' },
  { id: 3, age: 22, name: 'Abbey' },
]

arr.forEach((el) => el.age+= 10);
console.log(arr);

// Resultado: 22 32 44

El método .filter()

El método filtró (filter), como el nombre sugiere, ayuda a filtrar los valores dentro de un arreglo basándose en una condición Booleana.

Si la condición Booleana es verdadera, el resultado será retornado y agregado al final del arreglo. Si no, será omitido. Filtro también retorna un arreglo, tal como el método .map().

let arr = [
  { id: 1, age: 12, name: 'Manu' },
  { id: 2, age: 24, name: 'Quincy' },
  { id: 3, age: 22, name: 'Abbey' },
]

let tooYoung = arr.filter((el) => el.age <= 14);
console.log(tooYoung);

// Resultado: [ { id: 1, age: 12, name: 'Manu' } ]

El método .reduce()

En términos simples, el método .reduce() toma en cuenta un valor anterior, valor actual y un acumulador.

El tipo de retorno del método .reduce() es siempre un único valor. Es útil cuando quieres procesar todos los valores del arreglo y obtener algún tipo de valor resultado acumulado.

// Calcula la edad total de tres personas.
let arr = [
  { id: 1, age: 12, name: 'Manu' },
  { id: 2, age: 24, name: 'Quincy' },
  { id: 3, age: 22, name: 'Abbey' },
]

let totalAge = arr.reduce((acc, currentObj) => acc + currentObj.age, 0)
console.log(totalAge)

// Resultado: 57

Aquí, currentObj es el objeto sobre el cual se está iterando. Así mismo, el valor  acc value guarda el resultado, que luego es emitido en el arreglo totalAge.

Cómo implementar Polyfills

Otra importante pregunta de entrevistas es cómo implementar polyfills de los métodos map y filter.

Un polyfill es un fragmento de código (en términos de arquitectura web de JavaScript) que se utiliza para funcionalidades modernas en navegadores antiguos que no lo implementan nativamente.

Puesto de manera sencilla, un polyfill es una implementación customizada de funciones nativas de JavaScript. De alguna manera, se utiliza para crear tus propios métodos .map() o .filter().

Cómo usar el polyfill .map()

let data = [1, 2, 3, 4, 5];

Array.prototype.myMap = function (cb) {
  let arr = [];
  for (let i = 0; i < this.length; i++) {
    arr.push(cb(this[i], i, this));
  }
  return arr;
};
const mapLog = data.myMap((el) => el * 2);
console.log(mapLog);

El método myMap toma un callback que se ejecuta dentro del cuerpo de myMap. Tenemos básicamente un bucle for dentro del cuerpo myMap, que itera sobre this.length. Esto es simplemente el length del arreglo sobre el cual la función myMap es llamada.

Dado que la sintaxis de map() es arr.map(elementoActual, índice, arreglo), la función myMap() toma en cuenta exactamente eso.

De la misma manera, dado que map() retorna un nuevo arreglo, creamos un arreglo vacío y cargamos los resultados en él. Al finalizar, retornamos el nuevo arreglo.

Cómo usar el polyfill .filter()

let data = [1, 2, 3, 4, 5];

Array.prototype.myFilter = function (cb) {
  let arr = [];
  for (let i = 0; i < this.length; i++) {
    if (cb(this[i], i, this)) {
      arr.push(this[i]);
    }
  }
  return arr;
};
const filterLog = data.myFilter((el) => el < 4);
console.log(filterLog);

.filter() es muy similar a .map() en términos de implementación. Pero dado que filter filtra los resultados basándose en un valor booleano, tendremos una condición if() adicional para filtrar los resultados y condicionalmente cargamos dentro del arreglo.

¿Qué es el Debouncing?

Esta es una pregunta de entrevista famosa que tiene muchos usos e implementaciones en el mundo real.

Debouncing es un método para prevenir que una función se invoque con demasiada frecuencia, y que en lugar de esto espere cierto tiempo desde que fue llamada por última vez para invocarla de nuevo.

Piensa en Amazon. Cuando escribes cualquier cosa en la barra de búsqueda, cuando paras por AL MENOS 0.5 segundos, los resultados son descargados. Esto es exactamente lo que hace el debouncing.

Para implementar el debouncing, tomemos un ejemplo: generar un nombre de usuario basado en los aportes del usuario.

import "./styles.css";
let inputEle = document.getElementById("inputElement");
let username = document.getElementById("username");

let generateUsername = (e) => {
  username.innerHTML = e.target.value.split(" ").join("-");
};
let debounce = function (cb, delay) {
  let timer;
  return function () {
    let context = this;
    clearTimeout(timer);
    timer = setTimeout(() => {
      cb.apply(context, arguments);
    }, delay);
  };
};

inputEle.addEventListener("keyup", debounce(generateUsername, 300));

Aquí, estamos intentando crear un nombre de usuario customizado basado en aportes del usuario. Si el usuario comienza a escribir, no querremos crearlo inmediatamente, sino esperar 300 milisegundos antes de crear el nombre de usuario. Estamos intentando imitar un llamado al API, así que asumimos que el usuario escribe cualquier cosa, hace un llamado al API en el backend y descarga una respuesta.

La función debounce() toma dos valores , cb y delay . cb es la función callback que se ejecuta una vez el temporizador se queda sin tiempo.

Usamos setTimeout() para crear un temporizador, lo que significa que la función dentro del setTimeout se ejecutará luego de que haya pasado cierto tiempo.

El método apply se utiliza para llamar a la función callback con el objeto con el que se llamo inicialmente, aplicando argumentos y contexto al mismo.

¿Qué son las Clausuras (Closures)?

De acuerdo a la documentación de MDN para clausuras,

Una Clausura es una función que guarda referencias del estado adyacente (ámbito léxico). En otras palabras, una clausura permite acceder al ámbito de una función exterior desde una función interior. En JavaScript, las clausuras se crean cada vez que una función es creada.

Para simplificar esto, tomemos un ejemplo y entendamos cómo funcionan los cierres.

function start() {
  var name = "Manu"; // name es una variable local creada por start()
  function displayName() {
    // displayName() es la función interna, una 'clausura'
    alert(name); // variable de uso declarada en la función padre
  }
  displayName();
}
start(); // la caja de alerta "Manu" es mostrada

Aquí, una clausura se forma entre las funciones start() y displayName(). La función displayName() tiene acceso a la variable name presente en la función start().

En términos simples, la función interna conocerá sus alrededores (el ambiente léxico).

Ganchos (Hooks) de React

Las preguntas mas populares en las entrevistas técnicas para roles de front-end, cuando se trata de ganchos de React, son:

1. useState()
2. useReducer()
3. useEffect()
4. useRef()
5. Hooks customizados y su implementación.

¿Cómo funciona el hook useState()?

Para manejar un estado dentro ed tu componente, el hook useState() es el mecanismo ideal.

Veamos un ejemplo para entender:

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [title, setTitle] = useState("freeCodeCamp");
  const handleChange = () => {
    setTitle("FCC");
  };
  return (
    <div className="App">
      <h1>{title} useState</h1>
      <button onClick={handleChange}>Change Title</button>
    </div>
  );
}

Los métodos useState() arrojan dos valores, la variable estado y una función para cambiar dicha variable state.

En el fragment de código mostrado arriba, estamos creando un estado title para guardar el título de la página. El estado inicial indicado es freeCodeCamp.

Al presionar click, podemos utilizar el método setTitle() para cambiar la variable de estado a FCC.

El método useState() es el recurso más apropiado para controlar estados en un componente funcional.

¿Cómo funciona el hook useReducer()?

En términos simples, useReducer() es la manera "cool" de controlar un estado en tu aplicación. Es más estructurado y te ayuda a mantener un estado complejo en tu aplicación.

Veamos un ejemplo para entender como funciona el hook useReducer() :

import "./styles.css";
import { useReducer } from "react";

const initialState = { title: "freeCodeCamp", count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case "change-title":
      return { ...state, title: "FCC" };
    case "increment-counter":
      return { ...state, count: state.count + 1 };
    default:
      throw new Error();
  }
}

export default function App() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      <div className="App">
        <h1>{state.title} CodeSandbox</h1>
        <button onClick={() => dispatch({ type: "change-title" })}>
          Change Title
        </button>
        <button onClick={() => dispatch({ type: "increment-counter" })}>
          Increment Counter
        </button>
      </div>
      <p style={{ textAlign: "center" }}>{state.count}</p>.
    </>
  );
}

El hook useReducer() toma dos parámetros, la función reducer y un valor initialState.

La función reducer es una implementación basada en switch-case que retorna el estado final que useReducer() utiliza internamente para proporcionar de vuelta al componente.

Los valores retornados de la función useReducer() son state y dispatch. El estado es el valor state que puede ser utilizado dentro del componente. En nuestro caso, el estado tiene dos valores: title y count. Estos pueden ser manipulados utilizando el método dispatch() que es retornado por el método useReducer().

En el caso de arriba, para cambiar el título, hemos escrito un caso de change-title dentro de la función reducer. Esto puede detonarse (trigger) con la ayuda dela función dispatch({ type: "change-title" }). Esto detonará el la función change-title y cambiará el estado del atributo title.

Lo mismo sucede para la parte count que se encuentra en la aplicación.

Como dije antes, es una manera "cool" de controlar un estado dentro de tu aplicación. ?

¿Cómo funciona el hook useEffect()?

Piénsalo de esta manera: si quieres tener un efecto secundario para una variable de estado que cambia, puedes usar el hook useEffect() para desencadenarlo.

Por ejemplo, digamos que el valor de entrada (valor de entrada) de tu campo "input" cambia, y quieres llamar a un API luego de que haya cambiado. Puedes escribir la lógica del API handle en el bloque useEffect().

import React, {useState, useEffect} from 'react';

export const App = () => {
    const [value, setValue] = useState('');
    useEffect(() => {
      console.log('value changed: ', value);
    }, [value])
	return <div>
        	<input type="text" name="username" value={value} onChange={(e) => setValue(e.target.value)} />
        </div>
}

Aquí, tenemos un campo de input que tiene un valor de estado value adjunto. Este valor cambiará cuando el usuario intente insertar cualquier cosa.

Una vez el valor haya sido actualizado y renderizado, el bloque useEffect() entrará en efecto y la declaración console se desencadenará, arrojando como resultado el último valor de estado que este allí.

Aquí, un buen valor de uso de useEffect() puede ser la implementación de llamadas a la API. Asumamos que quieres llamar a un API a través del valor en el campo input. La función bloque useEffect será la mejor manera de hacerlo.

Otra parte de esto es el arreglo de dependencia, que es el segundo argumento del hook useEffect(). En nuestro caso, mencionamos [value] como el segundo argumento.

Esto básicamente significa que CADA VEZ QUE value CAMBIA, la función dentro de useEffect se desencadenará. Si no se pasa nada en el  arreglo de dependencia, la función bloque se desencadena una vez.

¿Cómo funciona el hook useRef()?

El hook  useRef nos da la habilidad de mutar el DOM (pero esta no es la única implicación de useRef).

De acuerdo a los documentos:

useRef retorna un objeto ref mutable cuya propiedad .current es inicializada al argumento pasado (initialValue). El objeto retornado persistirá por la vida completa del componente.

En términos simples, utilizaremos useRef si queremos persistir el valor de algo durante la vida entera del componente. La implementación básica de useRef viene con elementos DOM. Veamos un ejemplo:

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` apunta al elemento de texto montado
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Enfocar el input</button>
    </>
  );
}

Aquí, asignaremos una propiedad ref al bloque input. Esto se asociará a la referencia inputEl que creamos.

Ahora este elemento input puede ser manipulado de la manera que queramos. Podemos modificar el atributo style y estilizarlo, podemos tomar la propiedad value para ver si está siendo ayudada por el elemento input como valor, y así sucesivamente.

En el ejemplo anterior, cuando hacemos click en el botón, el input está enfocado y podemos inmediatamente comenzar a escribir. podemos hacer esto con la ayuda de inputEl.current.focus() – esencialmente el método focus() presente en el objeto current.

¿Qué son los hooks customizados?

Una de las preguntas que he observado más frecuentemente en rondas de entrevistas de front-end es crear un hook customizado para eventos del teclado.

Hemos visto varios hooks diferentes, pero el entrevistador te podría pedir que crees un hook por ti mismo. Esto podría ser retador para algunos pero con algo de práctica se vuelve mucho más sencillo.

Entendamos lo que es un Hook:

El uso básico de un hook customizado es extraer la lógica de una función a un componente propio.

Reflejando lo que pasará si tienes que escuchar la presión del botón enter dentro de cada uno de tus componentes. En lugar de escribir la lógica para  escuchar una y otra vez, podemos extraer la lógica a un componente por sí mismo y usarlo donde queramos (de la misma forma que useState() o useEffect()).

Hay algunas condiciones para que una función pueda llamarse un Hook:

1. Siempre debe empezar con la palabra use.
2. Podemos decidir que recibe como argumentos y que retorna (si es que retorna algo).

// Custom Hook: useAvailable
function useAvailabe(resource) {
  const [isAvailable, setIsAvailable] = useState(null);

  // ...

  return isAvailable;
}

// Uso:
  const isAvailable = useAvailable(cpu);

Aquí, sin importar cuantas veces llamemos useState y useEffects dentro del hook customizado, serán completamente independientes de la función en donde usemos el hook customizado.

Tomemos un ejemplo creando un hook customizado para almacenar valores locales.

Como crear un hook customizado – ejemplo de useLocalStorage

El hook customizado useLocalStorage es una manera de persistir datos dentro del almacenamiento local. Los valores get (obtener) y set (establecer) dentro del almacenamiento local utilizando pares key y value para que cuando el usuario vuelva a tu aplicación web, vean el mismo resultado que utilizaron anteriormente.

La implementación de más abajo es de un valor de etiqueta simple select que, una vez cambiado, persiste la data en el almacenamiento local.

useLocalStorage.js

// Usar el hook customizado Local Storage
import { useState } from 'react';

function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    if (typeof window === 'undefined') {
      return initialValue;
    }
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.log(error);
      return initialValue;
    }
  });
  const setValue = (value) => {
    try {
      const valueToStore =
        value instanceof Function ? value(storedValue) : value;
      setStoredValue(valueToStore);
      if (typeof window !== 'undefined') {
        window.localStorage.setItem(key, JSON.stringify(valueToStore));
      }
    } catch (error) {
      console.log(error);
    }
  };
  return [storedValue, setValue] as const;
}

export default useLocalStorage;

App.js

import * as React from 'react';
import './style.css';
import useLocalStorage from './useLocalStorate';

export default function App() {
  const [storedValue, setStoredValue] = useLocalStorage(
    'select-value',
    'light'
  );

  return (
    <div>
      <select
        className="select"
        value={storedValue}
        onChange={(e) => setStoredValue(e.target.value)}
      >
        <option value="dark">Dark</option>
        <option value="light">Light</option>
      </select>
      <p className="desc">
        Value from local storage: <span>{storedValue}</span>
      </p>
    </div>
  );
}

Aquí, el hook useLocalStorage toma dos parámetros, el nombre de key local para almacenar, y un valor default que tiene que estar allí.

El hook retorna dos valores: el valor de almacenamiento local del key que estamos utilizando y una manera de cambiar dicho valor de key dándonos un método setter. En este caso, el método setStoredValue.

En el archivo useLocalStorage.js, primero intentamos GET (OBTENER) el valor de almacenamiento local con el key utilizando el método localStorage.getItem(). Si esto existe, estableceremos el valor. Si es encontrado, haremos JSON.parse() del valor y lo retornaremos. De otra fosma, el valor initialValue que fur proporcionado se establecerá como el valor default.

La función setLocalStorage() toma en cuenta si el valor proporcionado es una función o un valor simple variable. Así mismo, se da a la tarea de establecer el valor local utilizando la función localStorage.setItem().

Como destacar como Desarrollador a través de la creación de proyectos paralelos

Lo que siempre me ha ayudado a destacarme son los proyectos paralelos que he construido.

En mi opinión, no tienes que construir 10 proyectos básicos. En cambio, prueba construir uno o dos proyectos verdaderamente buenos en donde implementes los conceptos de React/HTML/CSS/JavaScript y todo lo que has estado aprendiendo.

Asume que el entrevistador tiene 14 entrevistas a la semana y tiene que revisar los CV de 14 candidatos. Estarán más interesados en tu perfil porque has creado una app para acortar URLs que cobra $1 después de cada 1000 visitas al link en lugar de un clon de Amazon o Netflix.

De nuevo, no hay nada malo en crear clones y practicar tus habilidades. Pero siempre es bueno tener al menos un proyecto único que te ayude a destacar de la multitud.

Así mismo, crear proyectos paralelos te ayudará a mejorar como desarrollador. No es probable que sepas todo lo necesario cuando crees un proyectod esde cero. En el camino, tendrás que aprender muchas habilidades diferentes y mejorar en ellas.

Práctica, Práctica, Práctica.

Hay una frase famosa que dice:

(Todas las entrevistas son una entrevista de práctica hasta que obtienes tu primer trabajo de front-end. - William Shakespeare).

Y es verdad en gran medida.

Yo mismo he fallado cientas de veces anes de lograr obtener mi primer trabajo. Es la retroalimentación constante y las iteraciones que tienes que hacer para obtener lo que quieres.

En nuestro caso, obtener un trabajo de front-end es fácil cuando:

• Tienes un conocimiento profundo de tus habilidades – React en este caso (además de HTML, CSS, y JS).
• Tienes un conjunto de proyectos para mostrar, haciendo que destaques.
• Estas dispuesto a dedicar el tiempo y esfuerzo para aprender más y retarte a ti mismo.
• Lees el blog y preguntas prácticas de freeCodeCamp regularmente  (?)

Conclusión

Hay muchas preguntas para practicar para una ronda de preguntas practicas. El entrevistador puede preguntarte diferentes preguntas para probar tus habilidades.

Puedes usar Algochurn para practicar las preguntas de entrevista más populares de JavaScript, preguntas de entrevista de React, y preguntas de algoritmos realizadas comúnmente en entrevistas técnicas de front-end así como sus soluciones y enfoques.

Si tienes preguntas, por favor conecta conmigo a través de Twitter (@mannupaaji) y/o mi página web (manuarora.in)

¡Buena suerte y Happy Coding! ??

Hoy vas a crear una de las aplicaciones web más importantes que puedes construir: tu portafolio de desarrollador.

Todo desarrollador de React o desarrollador web en general necesita mostrar lo que puede hacer a potenciales clientes o empleadores.

Eso es exactamente lo que vamos a construir a continuación, con la ayuda de herramientas estándares de la industria como React, Tailwind CSS y Netlify.

¡Empecemos!

¿Cómo se verá el Portafolio?

Esta es la versión final del portafolio que estaremos creando.

Incluirá información sobre ti, los proyectos que has hecho, las habilidades técnicas que has utilizado en esos proyectos, e información de contacto para que clientes o empleadores puedan comunicarse contigo.

¿Qué herramientas estaremos utilizando?

• Utilizaremos React para crear la interfaz de usuario de la aplicación. Nos permitirá componer cada parte de nuestra página de inicio a través de componentes reutilizables y extender nuestra aplicación si quisiéramos agregar funciones adicionales, como por ejemplo un blog.
• Para dar estilo a nuestra aplicación, utilizaremos Tailwind CSS. Para darle a nuestra aplicación una apariencia profesional, Tailwind nos permitirá aplicar fácilmente múltiples estilos mediante la combinación de nombres de clases de nuestros elementos de React.
• Para desplegar nuestra aplicación en la web, utilizaremos el servicio gratuito de Netlify. Se podrá acceder a nuestro proyecto en un dominio personalizado a usuarios rápidamente a través de un CDN (Red de Distribución de contenido, por sus siglas en inglés).

Cómo empezar

Puedes descargar los archivos iniciales de nuestro proyecto aquí

Cuando tengas el código, todo lo que debes hacer es arrastrar la carpeta del proyecto (descomprimido) al editor de código y ejecutar el comando:

npm install

¡Y estás listo para empezar!

¿Qué herramientas necesito para construir mi Portafolio?

Para seguir el proceso entero de crear nuestra aplicación web desde cero al despliegue, necesitarás lo siguiente:

1. Node.js instalado en tu computador. Puedes descargarlo en nodejs.org.
2. Git instalado en tu computador. Puedes descargarlo en git-scm.com.
3. Te recomendaría utilizar VS Code como editor de código. Puedes descargarlo en code.visualstudio.com.
4. Una cuenta gratuita de Netlify en netlify.com.
5. Una cuenta gratuita de Github en github.com.

Cómo construir la estructura del Portafolio

El beneficio de utilizar React es que podremos expandir nuestra aplicación a cuantas páginas queramos, de manera muy sencilla, y agregar mucho contenido adicional.

Sin embargo, dado que estamos trabajando únicamente con una página, podremos desde dentro del componente de la aplicación determinar los diferentes componentes necesarios muy rápidamente. Tendremos una Barra de Navegación (Navbar) en el nivel superior, con todos los enlaces que nos llevarán a las diferentes secciones del Portafolio.

Posteriormente, incluiremos las siguientes secciones: Acerca de mí (About),  Proyectos (Projects), Testimonios (Testimonials), y para finalizar un formulario de contacto (Contact).

Esta rápida planificación nos permitirá entender cómo debemos llamar a nuestros componentes y en qué orden. Podemos comenzar agregándolos todos en nuestro archivo App.js (en src):

// src/App.js

import React from "react";

export default function App() {
  return (
    <main>
      <Navbar />
      <About />
      <Projects />
      <Skills />
      <Testimonials />
      <Contact />
    </main>
  );
}

Cómo crear nuestros componentes

Ahora que tenemos una lista con todos estos componentes necesitaremos crearlos.

Dentro de nuestra carpeta src, crearemos una carpeta llamada componentes con todos los archivos que necesitaremos:

my-portfolio
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.js
    ├── data.js
    ├── index.css
    ├── index.js
    └── components
        ├── About.js
        ├── Contact.js
        ├── Navbar.js
        ├── Projects.js
        ├── Skills.js
        └── Testimonials.js

Luego crearemos la estructura básica de cada componente de React y lo exportaremos desde ese archivo con export default:

// src/components/About.js

export default function About() {}

// repeat the same basic structure for all 6 components

Y finalmente nos aseguraremos de importarlo en App.js:

// src/App.js

import React from "react";
import About from "./components/About";
import Contact from "./components/Contact";
import Navbar from "./components/Navbar";
import Projects from "./components/Projects";
import Skills from "./components/Skills";
import Testimonials from "./components/Testimonials";

export default function App() {
  return (
    <main>
      <Navbar />
      <About />
      <Projects />
      <Skills />
      <Testimonials />
      <Contact />
    </main>
  );
}

Notemos que debe haber seis componentes en total.

Introducción a Tailwind CSS

Una vez hayamos hecho eso, podemos empezar a trabajar con Tailwind CSS, para dar a nuestra aplicación una apariencia básica.

El beneficio de usar Tailwind CSS es que no tenemos que escribir ningún estilo manualmente en una página de CSS. Todo lo que debemos hacer es combinar múltiples clases para darle a la página la apariencia que queremos.

Por ejemplo, para dar a nuestro portafolio un fondo oscuro con texto gris aplicado a todos nuestros componentes hijos, puedes agregar las siguientes clases al elemento main:

// src/App.js

import React from "react";
import About from "./components/About";
import Contact from "./components/Contact";
import Navbar from "./components/Navbar";
import Projects from "./components/Projects";
import Skills from "./components/Skills";
import Testimonials from "./components/Testimonials";

export default function App() {
  return (
    <main className="text-gray-400 bg-gray-900 body-font">
      <Navbar />
      <About />
      <Projects />
      <Skills />
      <Testimonials />
      <Contact />
    </main>
  );
}

Cómo construir el componente About

Empecemos con nuestra primera sección, la sección "Acerca de mí". Esta consistirá de una introducción básica de nosotros y en cuáles habilidades técnicas nos especializamos.

También incluirá algunos enlaces al formulario de contacto así como a nuestros proyectos. Dado que estos enlaces serán a diferentes partes de la misma página, podremos utilizar las etiquetas: "/#projects" y "/#contact".

Para hacer que estos enlaces funcionen correctamente y así poder dirigirnos a cada sección, estableceremos el atributo id de la sección proyectos a "projects" y los de la sección contacto a "contact".

// src/components/About.js

import React from "react";

export default function About() {
  return (
    <section id="about">
      <div className="container mx-auto flex px-10 py-20 md:flex-row flex-col items-center">
        <div className="lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center">
          <h1 className="title-font sm:text-4xl text-3xl mb-4 font-medium text-white">
            Hola, soy Reed
            <br className="hidden lg:inline-block" />Me encanta construir aplicaciones web.
          </h1>
          <p className="mb-8 leading-relaxed">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui
            laborum quasi, incidunt dolore iste nostrum cupiditate voluptas?
            Laborum, voluptas natus?
          </p>
          <div className="flex justify-center">
            <a
              href="#contact"
              className="inline-flex text-white bg-green-500 border-0 py-2 px-6 focus:outline-none hover:bg-green-600 rounded text-lg">
              Trabaja conmigo
            </a>
            <a
              href="#projects"
              className="ml-4 inline-flex text-gray-400 bg-gray-800 border-0 py-2 px-6 focus:outline-none hover:bg-gray-700 hover:text-white rounded text-lg">
              Mira mis trabajos anteriores
            </a>
          </div>
        </div>
        <div className="lg:max-w-lg lg:w-full md:w-1/2 w-5/6">
          <img
            className="object-cover object-center rounded"
            alt="hero"
            src="./coding.svg"
          />
        </div>
      </div>
    </section>
  );
}

Para la imagen en el lado derecho de la sección, utilizaremos un archivo svg tomado de la carpeta public: coding.svg.

Esta imagen funciona simplemente como un placeholder (marcador de posición) temporal. Recomiendo enfáticamente utilizar una imagen real de ti mismo.

Cómo construir el componente Projects

Nuestra sección de proyectos consistirá de un elemento section con un id of "projects". La sección mostrará una galería de todos los proyectos que hemos desarrollado, con imágenes incluidas.

Tendrá el título del proyecto, las tecnologías con la que lo construimos, y un enlace (si está desplegado).

// src/components/Projects.js

import { CodeIcon } from "@heroicons/react/solid";
import React from "react";
import { projects } from "../data";

export default function Projects() {
  return (
    <section id="projects" className="text-gray-400 bg-gray-900 body-font">
      <div className="container px-5 py-10 mx-auto text-center lg:px-40">
        <div className="flex flex-col w-full mb-20">
          <CodeIcon className="mx-auto inline-block w-10 mb-4" />
          <h1 className="sm:text-4xl text-3xl font-medium title-font mb-4 text-white">
            Aplicaciones que he construido
          </h1>
          <p className="lg:w-2/3 mx-auto leading-relaxed text-base">
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Explicabo
            facilis repellat ab cupiditate alias vero aliquid obcaecati quisquam
            fuga dolore.
          </p>
        </div>
        <div className="flex flex-wrap -m-4">
          {projects.map((project) => (
            <a
              href={project.link}
              key={project.image}
              className="sm:w-1/2 w-100 p-4">
              <div className="flex relative">
                <img
                  alt="gallery"
                  className="absolute inset-0 w-full h-full object-cover object-center"
                  src={project.image}
                />
                <div className="px-8 py-10 relative z-10 w-full border-4 border-gray-800 bg-gray-900 opacity-0 hover:opacity-100">
                  <h2 className="tracking-widest text-sm title-font font-medium text-green-400 mb-1">
                    {project.subtitle}
                  </h2>
                  <h1 className="title-font text-lg font-medium text-white mb-3">
                    {project.title}
                  </h1>
                  <p className="leading-relaxed">{project.description}</p>
                </div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

También utilizaremos la librería @heroicons/react para poder acceder a iconos SVG como componentes de React.

Estaremos importando un arreglo (array) de proyectos del archivo data.js en la misma carpeta. Allí estamos exportando un arreglo de objetos que incluirá cada uno la data individual de cada proyecto:

// src/data.js

export const projects = [
  {
    title: "React Reserve",
    subtitle: "MERN Stack",
    description:
      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium dolore rerum laborum iure enim sint nemo omnis voluptate exercitationem eius?",
    image: "./project-1.gif",
    link: "https://reactbootcamp.com",
  },
  {
    title: "React Tracks",
    subtitle: "React and Python",
    description:
      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium dolore rerum laborum iure enim sint nemo omnis voluptate exercitationem eius?",
    image: "./project-2.gif",
    link: "https://reedbarger.com",
  },
  {
    title: "DevChat",
    subtitle: "React and Firebase",
    description:
      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium dolore rerum laborum iure enim sint nemo omnis voluptate exercitationem eius?",
    image: "./project-3.gif",
    link: "https://jsbootcamp.com",
  },
  {
    title: "Epic Todo App",
    subtitle: "React Hooks",
    description:
      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium dolore rerum laborum iure enim sint nemo omnis voluptate exercitationem eius?",
    image: "./project-4.gif",
    link: "https://pythonbootcamp.com",
  },
];

Cómo construir el componente Skills

Completemos la sección de todas nuestras habilidades y las tecnologías que manejamos.

Esta sección consistirá de una simple lista de todas las herramientas con las que estamos familiarizados y seremos capaces de utilizar en los proyectos de nuestros empleadores o clientes.

Una vez más, importaremos un arreglo desde nuestra carpeta de data. Pero este arreglo consiste de un número de cadenas (strings) que representan cada una de las habilidades como JavaScript, React y Node:

// src/components/Skills.js

import { BadgeCheckIcon, ChipIcon } from "@heroicons/react/solid";
import React from "react";
import { skills } from "../data";

export default function Skills() {
  return (
    <section id="skills">
      <div className="container px-5 py-10 mx-auto">
        <div className="text-center mb-20">
          <ChipIcon className="w-10 inline-block mb-4" />
          <h1 className="sm:text-4xl text-3xl font-medium title-font text-white mb-4">
            Habilidades y Tecnologías
          </h1>
          <p className="text-base leading-relaxed xl:w-2/4 lg:w-3/4 mx-auto">
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nisi sit
            ipsa delectus eum quo voluptas aspernatur accusantium distinctio
            possimus est.
          </p>
        </div>
        <div className="flex flex-wrap lg:w-4/5 sm:mx-auto sm:mb-2 -mx-2">
          {skills.map((skill) => (
            <div key={skill} className="p-2 sm:w-1/2 w-full">
              <div className="bg-gray-800 rounded flex p-4 h-full items-center">
                <BadgeCheckIcon className="text-green-400 w-6 h-6 flex-shrink-0 mr-4" />
                <span className="title-font font-medium text-white">
                  {skill}
                </span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Cómo construir el componente Testimonials

En el componente de testimonios, crearemos una lista con testimonios de antiguos clientes u otras personas que estén familiarizadas con nuestro trabajo.

Estos consistirán de tarjetas que incluirán el testimonio, así como el autor y la compañía para la que esta persona trabaja.

También importaremos un arreglo de testimonios con un número de objetos que incluirán la cita, imagen, nombre y compañía.

// src/components/Testimonials

import React from "react";
import { TerminalIcon, UsersIcon } from "@heroicons/react/solid";
import { testimonials } from "../data";

export default function Testimonials() {
  return (
    <section id="testimonials">
      <div className="container px-5 py-10 mx-auto text-center">
        <UsersIcon className="w-10 inline-block mb-4" />
        <h1 className="sm:text-4xl text-3xl font-medium title-font text-white mb-12">
          Testimonios de clientes
        </h1>
        <div className="flex flex-wrap m-4">
          {testimonials.map((testimonial) => (
            <div className="p-4 md:w-1/2 w-full">
              <div className="h-full bg-gray-800 bg-opacity-40 p-8 rounded">
                <TerminalIcon className="block w-8 text-gray-500 mb-4" />
                <p className="leading-relaxed mb-6">{testimonial.quote}</p>
                <div className="inline-flex items-center">
                  <img
                    alt="testimonial"
                    src={testimonial.image}
                    className="w-12 rounded-full flex-shrink-0 object-cover object-center"
                  />
                  <span className="flex-grow flex flex-col pl-4">
                    <span className="title-font font-medium text-white">
                      {testimonial.name}
                    </span>
                    <span className="text-gray-500 text-sm uppercase">
                      {testimonial.company}
                    </span>
                  </span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Cómo construir el componente contact

Al final de nuestra página, incluiremos un formulario de contacto para así permitir e los potenciales empleadores comunicarse con nosotros.

Este formulario tendrá tres campos: nombre, correo electrónico y mensaje.

Para recibir esta información, utilizaremos la herramienta Netlify Forms, que se encargará fácilmente de guardar estos mensajes.

// src/components/Contact.js

import React from "react";

export default function Contact() {
  return (
    <section id="contact" className="relative">
      <div className="container px-5 py-10 mx-auto flex sm:flex-nowrap flex-wrap">
        <div className="lg:w-2/3 md:w-1/2 bg-gray-900 rounded-lg overflow-hidden sm:mr-10 p-10 flex items-end justify-start relative">
          <iframe
            width="100%"
            height="100%"
            title="map"
            className="absolute inset-0"
            frameBorder={0}
            marginHeight={0}
            marginWidth={0}
            style={{ filter: "opacity(0.7)" }}
            src="https://www.google.com/maps/embed/v1/place?q=97+warren+st+new+york+city&key=AIzaSyBFw0Qbyq9zTFTd-tUY6dZWTgaQzuU17R8"
          />
          <div className="bg-gray-900 relative flex flex-wrap py-6 rounded shadow-md">
            <div className="lg:w-1/2 px-6">
              <h2 className="title-font font-semibold text-white tracking-widest text-xs">
                DIRECCIÓN
              </h2>
              <p className="mt-1">
                97 Warren St. <br />
                New York, NY 10007
              </p>
            </div>
            <div className="lg:w-1/2 px-6 mt-4 lg:mt-0">
              <h2 className="title-font font-semibold text-white tracking-widest text-xs">
                CORREO ELECTRÓNICO
              </h2>
              <a className="text-indigo-400 leading-relaxed">
                reedbarger@email.com
              </a>
              <h2 className="title-font font-semibold text-white tracking-widest text-xs mt-4">
                NÚMERO DE TELÉFONO
              </h2>
              <p className="leading-relaxed">123-456-7890</p>
            </div>
          </div>
        </div>
        <form
          netlify
          name="contact"
          className="lg:w-1/3 md:w-1/2 flex flex-col md:ml-auto w-full md:py-8 mt-8 md:mt-0">
          <h2 className="text-white sm:text-4xl text-3xl mb-1 font-medium title-font">
            ¡Contrátame!
          </h2>
          <p className="leading-relaxed mb-5">
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illum
            suscipit officia aspernatur veritatis. Asperiores, aliquid?
          </p>
          <div className="relative mb-4">
            <label htmlFor="name" className="leading-7 text-sm text-gray-400">
              Nombre
            </label>
            <input
              type="text"
              id="name"
              name="name"
              className="w-full bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
            />
          </div>
          <div className="relative mb-4">
            <label htmlFor="email" className="leading-7 text-sm text-gray-400">
              Correo electrónico
            </label>
            <input
              type="email"
              id="email"
              name="email"
              className="w-full bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
            />
          </div>
          <div className="relative mb-4">
            <label
              htmlFor="message"
              className="leading-7 text-sm text-gray-400">
              Mensaje
            </label>
            <textarea
              id="message"
              name="message"
              className="w-full bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 h-32 text-base outline-none text-gray-100 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out"
            />
          </div>
          <button
            type="submit"
            className="text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded text-lg">
            Enviar
          </button>
        </form>
      </div>
    </section>
  );
}

Cómo insertar una ubicación de Google Maps

A la izquierda del formulario incluiremos un mapa de Google Maps con nuestra ubicación.

Lo haremos con la ayuda de una herramienta online: embed-map.com. Todo lo que hay que hacer es ingresar la ubicación y presionar "Generate HTML code".

Del código proporcionado por la aplicación, no debemos copiar la totalidad, sólo el atributo src del elemento iframe. Reemplazaremos dicho valor con el valor por defecto src de nuestro iframe.

Para enviar cualquier data del formulario a Netlify, Netlify Forms necesita reconocer un formulario como HTML estático. Dado que nuestra aplicación de React es controlada por JavaScript y no es únicamente HTML puro, necesitamos agregar un formulario escondido a nuestro archivo index.html en la carpeta public.

<!-- public/index.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- head content skipped -->
  </head>
  <body>

  <form name="contact" netlify netlify-honeypot="bot-field" hidden>
    <input type="text" name="name" />
    <input type="email" name="email" />
    <textarea name="message"></textarea>
  </form>
  
    <noscript>Necesitas activar JavaScript para correr esta aplicación.</noscript>
    <div id="root"></div>
  </body>
</html>

Tendremos que esconder este formulario, porque no debe ser visto por el usuario, solo por Netlify.

Le daremos el atributo, hidden así como el atributo name que concuerda con el formulario JSX en Contact.js. También debemos darle el atributo netlify para que así Netlify Forms lo reconozca. Finalmente, debemos incluir todos los campos que nuestro formulario JSX: nombre, correo electrónico y mensaje.

Cómo enviar el formulario de contacto

Una vez terminado lo anterior, regresaremos a Contact.js. Utilizaremos JavaScript para poder enviar este formulario.

Primero que nada, crearemos un estado dedicado para cada uno de los valores que se encuentran en el formulario para nombre (name), correo electrónico (email) y mensaje (message):

const [name, setName] = React.useState("");
const [email, setEmail] = React.useState("");
const [message, setMessage] = React.useState("");

Almacenaremos lo que el usuario escriba en cada uno de los campos en el estado con la ayuda del manipulador (handler) onChange.

Para manipular el envío del formulario, le agregaremos el prop onSubmit. La función que se llamará, handleSubmit, hará una solicitud post al endpoint "/" con toda la data de nuestro formulario.

Estableceremos los encabezados de la petición para indicar que nos encontramos enviando la data del formulario. Para el cuerpo de la petición, incluiremos el nombre del formulario así como toda la data del formulario incluida en las variables de estado name, email, y message.

// src/components/Contact.js

import React from "react";

export default function Contact() {
  const [name, setName] = React.useState("");
  const [email, setEmail] = React.useState("");
  const [message, setMessage] = React.useState("");

  function encode(data) {
    return Object.keys(data)
      .map(
        (key) => encodeURIComponent(key) + "=" + encodeURIComponent(data[key])
      )
      .join("&");
  }

  function handleSubmit(e) {
    e.preventDefault();
    fetch("/", {
      method: "POST",
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      body: encode({ "form-name": "contact", name, email, message }),
    })
      .then(() => alert("Message sent!"))
      .catch((error) => alert(error));
  }

  return (
    <section id="contact" className="relative">
      <div className="container px-5 py-10 mx-auto flex sm:flex-nowrap flex-wrap">
        <div className="lg:w-2/3 md:w-1/2 bg-gray-900 rounded-lg overflow-hidden sm:mr-10 p-10 flex items-end justify-start relative">
          <iframe
            width="100%"
            height="100%"
            title="map"
            className="absolute inset-0"
            frameBorder={0}
            marginHeight={0}
            marginWidth={0}
            style={{ filter: "opacity(0.7)" }}
            src="https://www.google.com/maps/embed/v1/place?q=97+warren+st+new+york+city&key=AIzaSyBFw0Qbyq9zTFTd-tUY6dZWTgaQzuU17R8"
          />
          <div className="bg-gray-900 relative flex flex-wrap py-6 rounded shadow-md">
            <div className="lg:w-1/2 px-6">
              <h2 className="title-font font-semibold text-white tracking-widest text-xs">
                DIRECCIÓN
              </h2>
              <p className="mt-1">
                97 Warren St. <br />
                New York, NY 10007
              </p>
            </div>
            <div className="lg:w-1/2 px-6 mt-4 lg:mt-0">
              <h2 className="title-font font-semibold text-white tracking-widest text-xs">
                CORREO ELECTRÓNICO
              </h2>
              <a className="text-indigo-400 leading-relaxed">
                reedbarger@email.com
              </a>
              <h2 className="title-font font-semibold text-white tracking-widest text-xs mt-4">
                NÚMERO DE TELÉFONO
              </h2>
              <p className="leading-relaxed">123-456-7890</p>
            </div>
          </div>
        </div>
        <form
          netlify
          name="contact"
          onSubmit={handleSubmit}
          className="lg:w-1/3 md:w-1/2 flex flex-col md:ml-auto w-full md:py-8 mt-8 md:mt-0">
          <h2 className="text-white sm:text-4xl text-3xl mb-1 font-medium title-font">
            ¡Contrátame!
          </h2>
          <p className="leading-relaxed mb-5">
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illum
            suscipit officia aspernatur veritatis. Asperiores, aliquid?
          </p>
          <div className="relative mb-4">
            <label htmlFor="name" className="leading-7 text-sm text-gray-400">
              Nombre
            </label>
            <input
              type="text"
              id="name"
              name="name"
              className="w-full bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
              onChange={(e) => setName(e.target.value)}
            />
          </div>
          <div className="relative mb-4">
            <label htmlFor="email" className="leading-7 text-sm text-gray-400">
              Correo electrónico
            </label>
            <input
              type="email"
              id="email"
              name="email"
              className="w-full bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
              onChange={(e) => setEmail(e.target.value)}
            />
          </div>
          <div className="relative mb-4">
            <label
              htmlFor="message"
              className="leading-7 text-sm text-gray-400">
              Mensaje
            </label>
            <textarea
              id="message"
              name="message"
              className="w-full bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 h-32 text-base outline-none text-gray-100 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out"
              onChange={(e) => setMessage(e.target.value)}
            />
          </div>
          <button
            type="submit"
            className="text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded text-lg">
            Enviar
          </button>
        </form>
      </div>
    </section>
  );
}

Como puedes observar arriba, estamos codificando la data del formulario con una función especial encode que puedes ver aquí.

Si el mensaje es enviado correctamente, mostraremos una alerta que diga "Mensaje enviado". En caso de que haya un error, alertaremos al usuario del mismo.

Cómo construir el componente Navbar

El último paso es construir el componente de la Barra de Navegación.

Queremos que la barra de navegación se mantenga en la parte superior de la pantalla en dispositivos grandes, pero no en dispositivos móviles.

Adicionalmente, querremos incluir enlaces a cada una de las secciones relevantes: proyectos, habilidades, testimonios y formulario de contacto:

// src/components/Navbar.js

import { ArrowRightIcon } from "@heroicons/react/solid";
import React from "react";

export default function Navbar() {
  return (
    <header className="bg-gray-800 md:sticky top-0 z-10">
      <div className="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
        <a className="title-font font-medium text-white mb-4 md:mb-0">
          <a href="#about" className="ml-3 text-xl">
            Reed Barger
          </a>
        </a>
        <nav className="md:mr-auto md:ml-4 md:py-1 md:pl-4 md:border-l md:border-gray-700	flex flex-wrap items-center text-base justify-center">
          <a href="#projects" className="mr-5 hover:text-white">
            Trabajos anteriores
          </a>
          <a href="#skills" className="mr-5 hover:text-white">
            Habilidades
          </a>
          <a href="#testimonials" className="mr-5 hover:text-white">
            Testimonios
          </a>
        </nav>
        <a
          href="#contact"
          className="inline-flex items-center bg-gray-800 border-0 py-1 px-3 focus:outline-none hover:bg-gray-700 rounded text-base mt-4 md:mt-0">
          ¡Contrátame!
          <ArrowRightIcon className="w-4 h-4 ml-1" />
        </a>
      </div>
    </header>
  );
}

¿Cómo haremos para mantener la barra de navegación en la parte superior de la pantalla en dispositivos grandes? Con la ayuda de la clase md:sticky en nuestro elemento header.

Esta clase significa que se aplicará la regla de estilo position: sticky; a partir del punto de corte mediano (768px).

Cómo desplegar tu Portafolio

Ahora, para desplegar el portafolio en la web, necesitaremos cargar (push) nuestra aplicación a GitHub.

Si no estás familiarizado con Git y GitHub, deberías tomarte unos momentos para aprender a cargar tu código en GitHub por primera vez. Es una habilidad esencial que todo desarrollador web debe tener.

Una vez estés familiarizado con este proceso, podemos crear un nuevo repositorio de GitHub. Luego, correremos los comandos git add ., git commit -m "Despliegue", crear nuestro git remoto, y git push -u origin master.

Una vez nuestro proyecto esté en GitHub, podremos ir a Netlify y seleccionar la opción "Choose Site from Git" (Escoger sitio desde Git). Allí seleccionaremos GitHub para nuestros despliegues continuados, y seleccionaremos el repositorio de GitHub al que acabamos de cargar nuestro código.

Luego de esto, ¡nuestro proyecto será desplegado automáticamente a la web!

Próximos pasos

¡Felicidades! Ya tienes tu propio portafolio personal desplegado en la web, mostrando todos tus proyectos y habilidades a potenciales empleadores.

El próximo paso será configurar un dominio personalizado, preferiblemente con tu nombre (ej. reedbarger.com). Dado que Netlify incluye un DNS (Sistema de Nombres de Dominios, por sus siglas en inglés), esto podrás hacerlo fácilmente con sus herramientas.

Piensa en quizás agregar un blog a tu aplicación de React para así presumir aún más de tus conocimientos como desarrollador ante potenciales empleadores.

Haz que tu portafolio personal sea una expresión de ti mismo y lo que te apasiona como desarrollador, y serás exitoso.

VSCode tiene muchas extensiones de alta calidad, y Live Server es una de las mejores.

Con solo un par de clics, Live Server te permitirá ver tu página en vivo en un navegador real. Mejor aún, cuenta con recarga en vivo (live reloading), por lo que si actualizas tu código, los cambios también se verán reflejados en el navegador.

Todo lo que debes hacer es clic derecho en el archivo HTML que quieres ver, y luego seleccionar "Abrir con Live Server" (Open with Live Server):

¿Pero y si el Live Server no abre el navegador para mostrar la página que esperas? Si esto te está sucediendo, aquí hay un para de posibles soluciones que puedes probar.

Reinicia VSCode

Algunas veces lo mejor que puedes hacer es iniciar VSCode desde cero.

Primero, guarda todo tu trabajo. Luego cierra VSCode, lo que también detendrá todas las extensiones que hayas instalado.

Luego, vuelve a abrir VSCode e intenta de nuevo - ve al archivo HTML que quieres ver, y selecciona "Abrir con Live Server".

Configura el navegador de Live Server

Es posible que la extensión esté funcionando, pero tu sistema no cuente con un navegador por defecto.

Incluso si configuraste el navegador por defecto para tu sistema, no estaría de más hacerle saber a Live Server cuál navegador estarás utilizando, de manera explícita.

En primer lugar, abre la paleta de comandos de VSCode (Command Palette) con F1, luego escribe Preferences: Open Settings (JSON) y selecciona esa opción.

Esto abrirá tu archivo settings.json de VSCode.

Desplázate a la parte inferior del archivo, agrega una coma después de la última configuración, y pega "liveServer.settings.CustomBrowser": "chrome":

Ten en cuenta que también puedes utilizar "firefox", "safari", o cualquier otro navegador como valor para la configuración "liveServer.settings.CustomBrowser".

Para finalizar, guarda el archivo settings.json e intenta abrir el Live Server de nuevo.

Configura el navegador por defecto de tu sistema operativo

Incluso luego de indicar a Live Server cuál navegador quieres usar, es posible que aún no esté abriendo la página correctamente en ese navegador.

Lo próximo que intentaremos es configurar el navegador por defecto del propio sistema operativo.

El método exacto para hacer esto puede variar dependiendo de tu sistema operativo, así que lo mejor es investigar cómo hacer esto si no estás seguro.

Así luce la página de configuración en Windows:

Dirígete a la página en vivo tú mismo

Si por alguna razón el Live Server sigue sin abrir automáticamente en tu navegador, no te preocupes. Siempre puedes abrir el navegador de tu preferencia y ver la página directamente.

Simplemente, abre tu navegador de preferencia y dirígete a http://127.0.0.1:5500/<your_file_name>.

Por ejemplo, si tu archivo se llama index.html, simplemente dirígete a http://127.0.0.1:5500/index.html.

Siempre que el Live Server esté corriendo, deberías poder ver tu página.

Para cerrar

Estas son algunas soluciones comunes que puedes probar si la extensión Live Server de VSCode no está funcionando de la manera que esperas.

Cuídate, y feliz codificación (en vivo).