DEV Community: Roberto Monge Sencades

Desarrollando un clon de instagram en React IV - Implementando Lazy Loading y Links en los Navs

Roberto Monge Sencades — Sat, 25 Feb 2023 12:54:17 +0000

Bienvenidos al post número cuatro de nuestro proyecto "Desarrollando un clon de Instagram en React".

En este post, implementaremos Lazy Loading en las distintas rutas, para que nuestra velocidad y optimización sea mucho mejor.

Además, implementaremos los links del navbarTop, para que vayan a las rutas que hemos definido anteriormente.

Vamos a ello!

Implementando Lazy Loading en nuestro proyecto

Para comenzar, empezaremos explicando que es Lazy Loading.

Llamamos Lazy Loading a la carga diferida.

Cuando abrimos un sitio web, en nuestro caso nuestra aplicación, el navegador carga todos los recursos necesarios para que nuestra aplicación se muestre adecuadamente. Normalmente, carga todas las páginas, las que vemos, y las que no, asi como sus componentes, imports etc.

Con Lazy Loading, lo que hacemos es que en lugar de cargar todo el contenido de la aplicación. Por medio de Lazy Loading solo se descarga el contenido visible en el área actual de la pantalla.

De este modo, si estamos en la ruta principal, llamaremos y cargaremos la pagina Home, con sus componentes correspondientes.

Con esto, lo que conseguimos, es no cargar las demás páginas, y solo cargarlas, cuando las llamemos.

En React, utilizamos Lazy y Suspense para realizar la carga perezosa (Lazy Loading).

Ahora que entendemos que es, y como funciona Lazy Loading, llego la hora de implementarlo en nuestro proyecto.

Para ello, vamos a ir a nuestro componente raíz, donde tenemos nuestras rutas, asi que vamos a App.jsx

Como primer paso, es importar lazy y Suspense, para ello, utilizaremos:

import { lazy, Suspense } from "react";

Ahora que tenemos importado Lazy y Suspense, utilizaremos lazy para importar nuestras páginas.

const Home = lazy(() => import("./pages/Home/Home"));
const Profile = lazy(() => import("./pages/Profile/Profile"));
const Search = lazy(() => import("./pages/Search/Search"));

Con esto, hemos importado las distintas páginas con Lazy.

Lo siguiente a utilizar es Suspense, pero, ¿Que es Suspense?

Suspense es un componente que importamos de React. Este componente captura cualquier promesa que sea lanzada en tiempo de render.

Nosotros lo utilizaremos para englobar nuestras rutas, de este modo, pasandole un fallback, podremos mostrar lo que queramos mientras el componente Lazy se esta cargando.

En el fallback, le hemos pasado la página Loading, es un loading con un componente Spinner en el centro.

Con esto, tendríamos nuestro lazy loading creado, y ¿como lo comprobamos? pues utilizaremos Inspeccionar Elemento de
Google Chrome.

Iremos a Fuentes y recargaremos la página vaciando el cache.

Como podemos comprobar, en la carpeta Pages se han cargado dos componentes, Home y Loading.

Loading se ha cargado mientras se carga la página Home.

Ahora, seguiremos con los links a las distintas rutas.

Implementando links en los Navs

El siguiente paso es implementar los links, utilizando react-router-dom es un poco distinto a un link normal, puesto que habrá que utilizar el componente Link de react-router-dom

Para ello, vamos a ir a NavbarBottom.jsx:

Importaremos el componente Link de react-router-dom de esta manera:

import { Link } from "react-router-dom";

Ya por último, será enblogbar nuestras imagenes del menú con nuestro componente Link

Al componente Link hay que pasarle una prop llamada to, en ella, hay que pasarle el nombre de la ruta a la que vamos a ir.

De este modo, nuestro componente quedaría así:

Con esto, ya tendríamos nuestro componente listo para ir a las distintas rutas.

Hemos terminado nuestro Lazy Loading, para la carga diferida de nuestra página, y ya hemos implementado nuestros Linkpara la redirección a nuestras rutas.

En el post número cinco, realizaremos el componente Stories

El enlace al repositorio os lo dejo por aquí, podeis aportar cualquier cambio mediante pull request.

Repositorio clone-instagram-react

Desarrollando un clon de Instagram en React III - Implementando las rutas, ESLint y Prettier

Roberto Monge Sencades — Sun, 19 Feb 2023 19:41:34 +0000

Bienvenidos al post número tres de nuestra pequeña aventura.

En este post, implementaremos las rutas mediante la librería react-router-dom, además, implementaremos las librerías ESLint y Prettier, para organizar el código, saltos de linea, y evitarnos algunos errores gracias a las normas de ESLint.

Implementando ESLint y Prettier

Comenzaremos implementando ESLint y Prettier, pero para empezar, explicaremos que son estas dos herramientas.

ESLint: Es un linter de código JavaScript. Su función es analizar el código de nuestra aplicación, detectar problemas en por medio de patrones y si esta a su alcance resolverlos él mismo.

Por otro lado, Prettier es un formateador de código. Tambien analiza nuestro código JavaScript.

Utilizando ambos, conseguiremos tener un código más limpio, con menos errores y estructurado mediante unas normas especificas que definiremos mediante los ficheros de configuración.

Comenzamos instalando los paquetes:

npm i prettier eslint-config-prettier eslint-plugin-prettier -D
O, si utilizas yarn:

yarn add prettier eslint-config-prettier eslint-plugin-prettier -D

Una vez instalados los paquetes, comenzaremos creando un fichero llamado .eslintrc, en el, insertaremos la configuración.

Comenzaremos diciendo al fichero de configuración que estamos desarrollando en React, y que utilizaremos el plugin de Prettier.

{  
  "extends": ["react-app", "plugin:prettier/recommended"]
}

Con esto, ya tendremos ESLint listo con la configuración recomendada para React.

El siguiente paso será crear un fichero para la configuración de Prettier, lo llamaremos .pretierrc.

En este fichero, insertaremos la siguiente configuración:

{
  "semi": true,
  "tabWidth": 2,
  "printWidth": 100,
  "singleQuote": true,
  "trailingComma": "none",
  "jsxBracketSameLine": true
}

En esta configuración, estamos diciendo que utilizaremos ';' en el final de las sentencias, el número de espacios al tabular, en este caso, dos. Utilización de comillas dobles o simples.

Una vez realizada la configuración, solo necesitarás instalar las extensiones ESLint y Prettier en tu editor de código favorito, en mi caso, en VSCode.

Y ya estaría listo!

Implementando las rutas de la aplicación con `react-router-dom`

Vamos a implementar las rutas para nuestro clon de instagram, de esta manera, podemos separar la logica en distintas rutas, facilitando y mejorando el código y la usabilidad.

El primer paso, es instalar react-router-dom, para ello, lo instalaremos con NPM o Yarn.

npm install react-router-dom o si utilizas Yarn, yarn add react-router-dom.

Una vez instalado, necesitamos colocar las rutas en el fichero que se carga cuando se inicia la aplicación, en nuestro caso, en App.jsx

Antes de nada, hay que crear las páginas que vamos a tener en nuestra aplicación, comenzaremos con tres: Home, Profile y Search

Para ellos, vamos a crear una carpeta llamada pages dentro de la carpeta src.

Después, crearemos una carpeta con cada página, y dentro de ella, dos ficheros básicos, el JSX y el CSS.

Una vez creado, tendrá que quedar algo así:

Todos los ficheros JSX tienen que tener su función creada, por ejemplo, en Home:

import './Home.css';

const Home = () => {
    return (
        <h1>Home</h1>
    );
}

export default Home;

Ya tenemos nuestras páginas creadas, y el próximo paso es crear las rutas y enlazarlas a nuestras páginas.

Vamos al fichero App.jsx e importaremos las siguiente funciones:

import { BrowserRouter, Route, Routes } from "react-router-dom";

BrowserRouter: Este inyecta propiedades a nuestro componente para poder acceder al historial de navegación, realizar redirecciones, etc.

Route: Route: Es el componente que utilizamos para crear nuestras rutas a otros páginas.

El código debe quedar de esta manera una vez importado, y pasaremos a explicar el funcionamiento.


import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from "./pages/Home/Home";
import Profile from "./pages/Profile/Profile";
import Search from "./pages/Search/Search";

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/profile" element={<Profile />} />
          <Route path="/search" element={<Search />} />
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

En el componente App, hemos importado las páginas Home, Profile y Search.

Como siguiente paso, hemos llamado al componente <BrowserRouter>, en este componente, englobaremos toda la funcionalidad de las rutas.

Lo siguiente, es implementar <Routes>, dentro de el, insertaremos todas las rutas de la aplicación.

Y por último, implementaremos <Route> por cada ruta, a este componente, hay que pasarle dos valores, el path, en el que indicaremos que ruta vamos a asignar al elemento de la página que asignamos.

Con element, asignaremos el componente que se va a renderizar cuando se llame a esa ruta.

Con esto, tendríamos nuestras tres primeras rutas listas para funcionar.

Como dato importante, hay que saber que cuando se levanta la aplicación, la ruta por defecto que se ve es /. De ahi, que insertemos el Home como página inicial.

Acabamos nuestro tercer post con ESLint, Prettier y las rutas implementadas.

En el próximo post, crearemos el componente <Stories> e implementaremos los componentes <NavbarTop> y <NavbarBottom> en nuestra página Home.

El enlace al repositorio os lo dejo por aquí, podeis aportar cualquier cambio mediante pull request.

Repositorio clone-instagram-react

Desarrollando un clon de instagram en React II - Desarrollando los Nav

Roberto Monge Sencades — Tue, 31 Jan 2023 18:45:05 +0000

Comenzamos con el post número dos de nuestra pequeña aventura.

En este post veremos como desarrollar el <NavbarBottom> y el <NavbarTop>.

Antes de nada, necesitamos los iconos para los distintos botones de la aplicación.

Estos los podemos sacar de la aplicación web de instagram, son SVGs, por lo que copiaremos el svg, crearemos un archivo svg por cada elemento dentro de la carpeta assets, (más adelante manejaremos mejor los ficheros) e insertaremos el código.

Os dejaré por aquí los SVG de los distintos iconos para que los tengais.

Home:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" width="24" height="24">
<path d="M22 23h-6.001a1 1 0 0 1-1-1v-5.455a2.997 2.997 0 1 0-5.993 0V22a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V11.543a1.002 1.002 0 0 1 .31-.724l10-9.543a1.001 1.001 0 0 1 1.38 0l10 9.543a1.002 1.002 0 0 1 .31.724V22a1 1 0 0 1-1 1Z"></path></svg>

Search:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" width="24" height="24"><path d="M19 10.5A8.5 8.5 0 1 1 10.5 2a8.5 8.5 0 0 1 8.5 8.5Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path><line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="16.511" x2="22" y1="16.511" y2="22"></line></svg>

Reels:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" width="24" height="24">
<line fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="2" x1="2.049" x2="21.95" y1="7.002" y2="7.002"></line><line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="13.504" x2="16.362" y1="2.001" y2="7.002"></line><line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="7.207" x2="10.002" y1="2.11" y2="7.002"></line><path d="M2 12.001v3.449c0 2.849.698 4.006 1.606 4.945.94.908 2.098 1.607 4.946 1.607h6.896c2.848 0 4.006-.699 4.946-1.607.908-.939 1.606-2.096 1.606-4.945V8.552c0-2.848-.698-4.006-1.606-4.945C19.454 2.699 18.296 2 15.448 2H8.552c-2.848 0-4.006.699-4.946 1.607C2.698 4.546 2 5.704 2 8.552Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path><path d="M9.763 17.664a.908.908 0 0 1-.454-.787V11.63a.909.909 0 0 1 1.364-.788l4.545 2.624a.909.909 0 0 1 0 1.575l-4.545 2.624a.91.91 0 0 1-.91 0Z" fill-rule="evenodd"></path></svg>

Messages:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" width="24" height="24"><path d="M22.91 2.388a.69.69 0 0 0-.597-.347l-20.625.002a.687.687 0 0 0-.482 1.178L7.26 9.16a.686.686 0 0 0 .778.128l7.612-3.657a.723.723 0 0 1 .937.248.688.688 0 0 1-.225.932l-7.144 4.52a.69.69 0 0 0-.3.743l2.102 8.692a.687.687 0 0 0 .566.518.655.655 0 0 0 .103.008.686.686 0 0 0 .59-.337L22.903 3.08a.688.688 0 0 0 .007-.692" fill-rule="evenodd"></path></svg>

Y por último, para la foto de perfil, podeis utilizar la imagen que queráis.

Ahora que ya tenemos las imagenes, vamos con el desarrollo del componente:

Para comenzar, creamos una carpeta en la raíz, que llamaremos components. En esta carpeta, guardaremos todos los componentes generales, que se utilizan en varias páginas, de acuerdo con la arquitectura que vamos a utilizar, Clean Architecture.

Dentro de components, vamos a crear otra carpeta que llamaremos NavbarBottom, y dentro de ella, vamos a crear el fichero jsx y el css.

NavbarBottom.jsx y NavbarBottom.css.

Para el desarrollo de los componentes, utilizaremos arrow functions.

Asi que comenzamos el inicio del componente con el siguiente código:

const NavbarBottom = () => {
  return (
    <footer>
    </footer>
  );
};

export default NavbarBottom;

El próximo paso será insertar las imagenes, que posteriormente serán botones, pero por ahora, insertaremos las cinco imagenes dentro del footer e importaremos los svg que guardamos antes en la carpeta assets. Además, pondre una constante llamada URL_IMAGE_PROFILE_ICON en la que guardaré la url de la imagen de perfil.

Ya que estamos, importaremos NavbarBottom.css, que hemos creado antes, para estilar luego el navbar.

import "./NavbarBottom.css";
import home from "../../assets/home.svg";
import search from "../../assets/search.svg";
import reels from "../../assets/reels.svg";
import messages from "../../assets/messages.svg";

const URL_IMAGE_PROFILE_ICON =
  "https://img.freepik.com/free-photo/portrait-happy-young-woman-looking-camera_23-2147892777.jpg?w=2000";

const NavbarBottom = () => {
  return (
    <footer>
      <img src={home} />
      <img src={search} />
      <img src={reels} />
      <img src={messages} />
      <img src={URL_IMAGE_PROFILE_ICON} id="profile_icon" />
    </footer>
  );
};

export default NavbarBottom;

En este momento, tenemos el componente listo, solo quedaría darle los estilos.

Para ello, comenzamos con el footer, vamos a comenzar con la posición. En instagram, este menú esta en la parte de abajo de la app, y su comportamiento es flotante, siempre está aunque se haga scroll.

Asi que, vamos a darle el siguiente estilo:

footer {
    width: 100%;
    position: sticky;
    bottom: 0;
    z-index: 5;
    background-color: white;
}

Lo siguiente a incorporar a nuestro footer, es flex, para que los iconos se alineen, y justificaremos el contenido para que ocupe todo el contenedor, respetando los margenes, esto lo realizaremos con space-around.

Añadiremos también un padding, para dejar el contenido espaciado, y pondremos en gris el border de arriba, para simular exactamente la estetica de instagram.

footer {
    display: flex;
    width: 100%;
    justify-content: space-around;
    position: sticky;
    left: 0;
    bottom: 0;
    z-index: 5;
    padding: 10px 0 10px 0;
    border-top: 0.3px solid rgb(213, 213, 213);
    background-color: white;
}

Por último, estilaremos la imagen de perfil, para darle un tamaño de 24px y que sea rendondeada.

Para ello, daremos un id a la imagen, en este caso, #profile_icon.

footer #profile_icon {
    width: 24px;
    height: 24px;
    border-radius: 100%;
}

Con esto, tenemos nuestro componente listo!

Ahora, seguimos con el componente <NavbarTop>, que tiene un aspecto muy parecido al otro componente.

Para comenzar, dentro de la carpeta components, vamos a crear una nueva carpeta con el nombre NavbarTop.

Una vez creada, crearemos los ficheros NavbarTop.jsx y NavbarTop.css.

Este componente es bastante sencillo, contiene el logo de Instagram a la izquierda, y luego a la derecha, el botón de añadir historia, el botón para ver las interacciones que han tenido contigo y por último, el botón para ver los mensajes directos.

Comenzamos abriendo el archivo NavbarTop.jsx y creamos la función junto con el import del archivo NavbarTop.css, y exportamos la función.

import "./NavbarTop.css";

const NavbarTop = () => {
  return (
  );
};

export default NavbarTop;

Lo siguiente será importar los iconos que vamos a utilizar, y que hemos mencionado más arriba.

import "./NavbarTop.css";
import logo from "../../assets/logo.svg";
import heart from "../../assets/heart.svg";
import messages from "../../assets/messages.svg";
import add from "../../assets/add.svg";

const NavbarTop = () => {
  return (
  );
};

export default NavbarTop;

Ahora que tenemos todos lo necesario, vamos a plantear como realizar el componente.

Crearemos un nav con el logo, y después, crearemos un div con un id right_buttoms en el que insertaremos los botones de la derecha.

¿Por que creamos un div para los botones de la derecha?
Por que de esta manera, podemos poner el contenedor padre con flex, justificar el contenido con justify-content: space-between, y queda el logo a la izquierda del todo, y el div con los botones a la derecha del todo.

Ya el siguiente paso sería poner un display: flex al div right_buttons y tendríamos la estructura creada.

El nav le daremos un position: sticky para que se quede fijo arriba, tal y como tiene el comportamiento en Instagram y daremos un padding por arriba y por abajo de 10px con padding: 10px 0 10px 0.

Con estas instrucciones, el componente quedaría así:

import "./NavbarTop.css";
import logo from "../../assets/logo.svg";
import heart from "../../assets/heart.svg";
import messages from "../../assets/messages.svg";
import add from "../../assets/add.svg";
const NavbarTop = () => {
  return (
    <nav>
      <img src={logo} id="navbar--logo" />
      <div id="right_buttons">
        <img src={add} />
        <img src={heart} />
        <img src={messages} />
      </div>
    </nav>
  );
};

export default NavbarTop;

Se ha añadido un id al tag img del logo, para poder añadir un margin-left: 10px, y que quede exactamente como en instagram.

Ahora, veamos como quedó el css con las instrucciones de arriba.

nav {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0 10px 0;
    position: sticky;
    top: 0;
    background-color: white;
}

nav #right_buttons {
    display: flex;
}

nav #right_buttons img {
    padding: 0 10px 0 10px;
}

#navbar--logo {
    margin-left: 10px;
}

Hemos añadido a los distintos botones de la derecha, un padding para que no estuvieran juntos.

De este modo, hemos creado los dos navs principales de nuestro clon de instagram.

Espero que os haya gustado la segunda entrada del post, y para el próximo post, crearemos las rutas de la aplicación con react-router-dom, para ir colocando los componentes en las distintas páginas.

El enlace al repositorio os lo dejo por aquí, podeis aportar cualquier cambio mediante pull request.

Repositorio clone-instagram-react

Desarrollando un clon de instagram en React I - Configurando el entorno

Roberto Monge Sencades — Tue, 31 Jan 2023 17:51:51 +0000

Hace unos meses, tomé como objetivo practicar la maquetación simple y sencilla mediente CSS puro y HTML5, sin librerias de CSS y preprocesadores como SASS o LESS.

Se me ocurrió la idea de realizar un clón de instagram, asi que me he propuesto realizarlo en React.

En estos post, os iré contando mi pequeña aventura de desarrollar una aplicación como Instagram.

Comenzaremos creando el front, pero quien sabe si en algún momento, me animo a realizar una API en Python o Node.JS para alimentar la aplicación.

Por el momento, vamos a crear la aplicación básica con datos ficticios y ya habrá tiempo.

Para este proposito, voy a utilizar ViteJS para realizar el proyecto.

Para quien no sepa que es ViteJS, dejo un enlace a su web:

Vite | Next Generation Frontend Tooling

Next Generation Frontend Tooling

vite.dev

ViteJS es una herramienta de compilación que tiene como objetivo proporcionar una experiencia de desarrollo más rápida y ágil para proyectos web modernos.

Pasandole un template, que ya tiene definida la propia herramienta, te genera el proyecto y un servidor para poder ver los cambios en local.

Es mucho mas rápido que create-react-app.

Comenzamos creando el proyecto, para ello, vamos a lanzar el comando:

npm create vite@latest clone-instagram-react -- --template react

Con esto, crearemos el proyecto, y lo llamaremos, clone-instagram-react.

Ya tenemos nuestro proyecto listo para comenzar a desarrollar.

Por el momento voy a evitar el login y el registro, y vamos directamente a la vista de home, donde se encuentra el listado de stories y las publicaciones.

Desarrollaremos los componentes de página que arriba hemos descrito.

Y como componentes generales, crearemos el nav y el menú que está en el footer.

En el próximo post, comenzaremos con el desarrollo del componente NavbarBottom.

El enlace al repositorio os lo dejo por aquí, podeis aportar cualquier cambio mediante pull request.

Repositorio clone-instagram-react

DEV Community: Roberto Monge Sencades

Desarrollando un clon de instagram en React IV - Implementando Lazy Loading y Links en los Navs

Implementando Lazy Loading en nuestro proyecto

Implementando links en los Navs

Desarrollando un clon de Instagram en React III - Implementando las rutas, ESLint y Prettier

Implementando ESLint y Prettier

Implementando las rutas de la aplicación con react-router-dom

Desarrollando un clon de instagram en React II - Desarrollando los Nav

Desarrollando un clon de instagram en React I - Configurando el entorno

Vite | Next Generation Frontend Tooling

Implementando las rutas de la aplicación con `react-router-dom`