DEV Community

Cover image for Desarrollando un clon de instagram en React I - Configurando el entorno
Roberto Monge Sencades
Roberto Monge Sencades

Posted on • Edited on

1

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

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

favicon vitejs.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

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay