8 ideas de proyectos de React.js que le ayudarán a empezar a aprender haciendo

Una de las mejores formas de aprender es haciendo. Pero a menudo los desarrolladores luchan con la gran pregunta "¿qué debo construir?"

Aquí hay 8 ideas de proyectos, completas con resúmenes de proyectos e ideas de diseño, para que comience a aprender haciendo.

  • Negocios y mundo real: Panel de estadísticas de mapas
  • Divertido e interesante: Instrumento musical
  • Personal y cartera: Blog
  • Productividad: Notebook
  • Rompecabezas y juegos: Space Invaders
  • Herramientas y bibliotecas: tema del marco
  • Complementos del proyecto: menciones web
  • Clones: búsqueda de productos

Esta es una vista previa del libro electrónico gratuito 50 proyectos para React & the Static Web. Puede encontrar las 50 ideas de proyectos completas, incluidas estas 8, en 50reactprojects.com.

Panel de estadísticas del mapa

Categoría: Negocios y mundo real

Cree un tablero de mapa que muestre estadísticas e información geográfica sobre COVID-19.

Breve

Lidiar con una pandemia global significa que virus como el Coronavirus impactan al mundo de manera diferente según la ubicación geográfica.

Tener un mapa con un desglose de las estadísticas de cada país es una forma útil de poder determinar cosas como qué países se han visto más afectados.

Nivel 1

La forma más fácil de ver las estadísticas de un país a otro es tener un mapa en el que pueda navegar con las estadísticas de cada país disponibles junto a ese país.

Cree una aplicación de mapeo que use la API de coronavirus disease.sh para agregar marcadores al mapa para cada país junto con la cantidad de casos de COVID-19.

Nivel 2

Si bien tener las estadísticas de cada país es útil, podría ser útil poder comparar esas estadísticas con el número de casos en todo el mundo.

Agregue un panel de estadísticas que muestre la cantidad de casos de COVID-19 en todo el mundo, así como cualquier otra estadística útil de la API.

Nivel 3

Obtener estadísticas actuales es una buena manera de comprender el estado actual del mundo, pero ¿cómo se compara eso históricamente?

Utilice la API de datos históricos para mostrar gráficos en el tablero que brindan un contexto sobre el crecimiento y la propagación del virus.

Que hacer

  • Crear una nueva aplicación de mapas
  • Obtener datos de países de la API
  • Agregar marcadores al mapa
  • Agregar estadísticas a los marcadores
  • Obtener datos globales de la API
  • Crear un panel de estadísticas
  • Agregar estadísticas globales
  • Obtener datos históricos de la API
  • Agregar gráficos al mapa

Caja de herramientas

  • API de datos de enfermedades abiertas (disease.sh)
  • Folleto de React (react-leaflet.js.org)
  • Iniciador de folletos de Gatsby (github.com)

Tutoriales

  • Cómo crear una aplicación de mapa y tablero de Coronavirus (COVID-19) en React with Gatsby y Leaflet (freecodecamp.org)
  • Cómo agregar estadísticas de casos de Coronavirus (COVID-19) a su tablero de mapa React con Gatsby (freecodecamp.org)
  • Mapeo con React Leaflet (egghead.io)

Inspiración

  • Panel COVID-19 del Centro de Ciencia e Ingeniería de Sistemas (CSSE) de la Universidad Johns Hopkins (JHU) (coronavirus.jhu.ed)
  • Demostración del tablero de Coronavirus (COVID-19) (coronavirus-map-dashboard.netlify.app)

Idea de diseño

Instrumento musical

Categoría: divertido e interesante

Crea un piano interactivo que puedas usar para tocar música con tu teclado.

Breve

No todo el mundo tiene el lujo de tener un instrumento musical, pero tal vez esas personas tengan una computadora portátil, un teléfono o una tableta. Tener un piano es una forma poderosa de permitir que las personas toquen música incluso si no tuvieron la oportunidad antes.

Nivel 1

Con el navegador y las API de audio web, podemos crear sonidos que, cuando se combinan, pueden sonar como música.

Crea un conjunto de botones que reproducen notas de una escala cuando se hace clic.

Nivel 2

Si bien no todos han tocado un instrumento antes, el concepto y la interfaz de un instrumento como un piano es generalmente más intuitivo que un montón de botones.

Cree un diseño de piano usando botones que funcionan haciendo clic en el botón o usando el teclado físico.

Nivel 3

Es posible que tengamos espacio limitado en el navegador, pero hay una amplia gama de notas, escalas y sonidos que un teclado eléctrico podría hacer con algunos efectos adicionales.

Crea conmutadores de efectos que cambian el sonido de las notas cuando se activan.

Que hacer

  • Crear botones
  • Reproducir sonido cuando se hace clic
  • Organizar notas en una escala
  • Crear diseño de piano
  • Establecer eventos de teclado
  • Crear diseño de efectos
  • Alternar efectos de audio

Caja de herramientas

  • Reaccionar HotKeys (github.com)

Tutoriales

  • Construyendo un piano con React Hooks (dev.to)
  • Cómo construir un teclado de piano usando Vanilla JavaScript (freecodecamp.org)
  • ¡Construyendo un piano con tone.js! (dev. a)
  • Cómo hice un piano en solo 1 kb de JavaScript (frankforce.com)

Inspiración

  • React Guitar (react-guitar.com)

Idea de diseño

Blog

Categoría: Personal y Portafolio

Cree un blog que pueda utilizar para compartir sus experiencias y proyectos profesionales.

Breve

Con cualquier carrera, tener un blog para compartir tus experiencias es una buena manera de que la gente sepa en qué estás trabajando y ayudar a otros a aprender de tus experiencias.

También es una forma de reforzar lo que ha aprendido para que pueda consultarlo en el futuro.

Nivel 1

Para poder compartir sus experiencias, necesita una estructura de sitio web que le permita crear contenido nuevo y administrar el contenido existente.

Una forma de hacerlo es creando archivos de rebajas que su sitio web utiliza para crear nuevas páginas y mostrar las publicaciones.

Cree un blog utilizando archivos de rebajas como fuente de contenido.

Nivel 2

Tener su contenido en archivos de rebajas es una buena manera de administrar el contenido estático, pero es posible que no desee tener que editar el código cada vez que escribe o edita una publicación.

Integre un sistema de gestión de contenido que le permita agregar contenido nuevo o editar el existente con una interfaz de usuario agradable.

Nivel 3

Si está compartiendo código en su blog, HTML admite de forma nativa el código y las etiquetas previas que le ayudan a formatear el código de forma legible. Pero eso no incluye el resaltado de sintaxis que ayuda a mejorar la legibilidad.

Integre un resaltador de sintaxis que haga que los bloques de código sean más legibles.

Que hacer

  • Crea un blog
  • Agregar el primer contenido estático
  • Fuente de contenido estático
  • Integrar CMS
  • Agregar código al contenido
  • Agregar resaltado de sintaxis

Caja de herramientas

  • Netlify CMS (netlifycms.org)
  • Prism.js (prismjs.com)

Tutoriales

  • Crear un blog de Gatsby con Netlify CMS (gatsbyjs.org)
  • Cómo crear su blog de codificación desde cero con Gatsby y MDX (freecodecamp.org)

Inspiración

  • Inicio de Gatsby Netlify CMS (gatsby-netlify-cms.netlify.app)

Idea de diseño

Cuaderno

Categoría: Productividad

Cree una aplicación de cuaderno para agregar, administrar y organizar un grupo de notas.

Breve

Tomar notas es una excelente manera de asegurarnos de mantener un registro de nuestros pensamientos o recordar las conclusiones importantes de una reunión. ¡Poder administrarlos y organizarlos fácilmente es importante para encontrarlos más tarde!

Nivel 1

El primer requisito de un cuaderno es poder tomar notas. Esto puede ser bastante simple para comenzar, donde realmente necesita algún tipo de entrada que recopile lo que escribe y lo almacene en algún lugar para más adelante.

Cree un formulario para agregar nuevas notas y verlas en una lista.

Nivel 2

Para encontrar sus notas más tarde, desea alguna forma de organizar esas notas y una forma de buscarlas. Eso incluye agregar categorías o un sistema de etiquetado, así como una interfaz de usuario para realizar búsquedas.

Agregue la capacidad de etiquetar o categorizar notas y una entrada para buscar a través de ellas.

Nivel 3

Ya sea que nos demos cuenta o no, podemos encontrar conexiones entre nuestros pensamientos y, lo que es más importante, nuestras notas, donde podemos aprovechar esa red de pensamientos para nuestro cuaderno.

Agregue enlaces de notas inspirados en Roam Research para crear una red de pensamientos.

Que hacer

  • Crea un formulario
  • Almacenar notas nuevas
  • Lista de notas
  • Agregar etiquetas o categorías
  • Agregar búsqueda de notas
  • Agregar red de notas

Caja de herramientas

  • Tema del cerebro de Gatsby (github.com)
  • Fuse.js (fusejs.io)

Tutoriales

  • Cómo agregar búsquedas a una aplicación React con Fuse.js (freecodecamp.org)

Inspiración

  • Espuma (foambubble.github.io)
  • Roam Research (roamresearch.com)
  • Tema del jardín de Gatsby (github.com)

Idea de diseño

Invasores espaciales

Categoría: Rompecabezas y juegos

Crea un juego de disparos de naves espaciales de invasores espaciales para disparar múltiples oleadas de naves enemigas.

Breve

Space Invaders es un clásico arcade que te pone en una nave espacial contra una invasión alienígena. Cuando intentas derribarlos, ellos están respondiendo y solo tienes una cantidad limitada de protección antes de que estés expuesto a ser golpeado.

Nivel 1

La parte central del juego es que te mueves alrededor de una nave espacial tratando de golpear a un grupo de alienígenas con tus armas. Si bien hay uno de ustedes, hay muchos de ellos.

Crea una nave espacial que pueda moverse y disparar a los extraterrestres que no se muevan.

Nivel 2

Lo que hace que el juego sea complicado es que los alienígenas se mueven constantemente. Cada vez que golpean el borde del área de juego, bajan y aceleran, acercándose a su nave.

Agregue movimiento a los alienígenas que van de lado a lado en el área de juego. Cada vez que los alienígenas lleguen a un lado deberían bajar un nivel. También deben acelerar en ciertos intervalos.

Nivel 3

Estás solo, pero afortunadamente puedes obtener algo de protección. Tienes escudos detrás de los que puedes esconderte que te protegen mientras duren.

Crea varios escudos frente a la nave espacial del jugador que pueden recibir una cantidad limitada de daño.

Que hacer

  • Crea un juego nuevo
  • Crea alienígenas estáticos
  • Crea una nave espacial de jugador
  • Agregar controles de nave espacial
  • Agregar arma de nave espacial
  • Configurar daño alienígena
  • Haz que los alienígenas disparen
  • Haz que los extraterrestres se muevan
  • Agregar intervalos alienígenas
  • Agregar escudos

Tutoriales

  • Aprenda JavaScript construyendo 7 juegos (freecodecamp.org)

Inspiración

  • Space Invaders (codepen.io)

Idea de diseño

Tema del marco

Categoría: Herramientas y Bibliotecas

Cree un tema de Gatsby que configure un proyecto con el marco de trabajo Tailwind CSS.

Breve

Como desarrolladores, normalmente tenemos que hacer un montón de pasos similares cada vez que creamos un nuevo proyecto. Pero las herramientas como los temas nos permiten abstraer esos pasos y empaquetarlos de una manera fácil de usar que puede funcionar para cualquier proyecto nuevo.

Nivel 1

Los temas de Gatsby son un sistema similar a un complemento en el que podemos aprovechar la canalización de Gatsby para compartir la funcionalidad como un paquete en npm.

Esto abre la puerta a hacer realmente cualquier cosa que haríamos en un sitio de Gatsby, pero haciéndolo reutilizable en cualquier sitio de Gatsby.

Crea un nuevo tema de Gatsby que, cuando se usa, crea una nueva página de guía de estilo en cualquier proyecto al que se agregue.

Nivel 2

El objetivo de los temas no es solo crear páginas, sino agregar funcionalidad que nos haga productivos. Esto incluye cosas como marcos y configuraciones de proyectos.

Agregue un marco CSS al tema de Gatsby que permita que el proyecto se agregue para usar ese marco.

Nivel 3

A veces, los temas son mejores solo como herramientas, a veces es útil tener opiniones. Una forma de agregar funcionalidad útil a un marco CSS es crear componentes de stock.

Cree componentes React reutilizables utilizando el marco CSS que se puede usar en el proyecto al que se agregó el tema.

Que hacer

  • Crea un tema nuevo
  • Agregar al proyecto de ejemplo
  • Crear nueva página de estilo
  • Agregar marco CSS
  • Usa CSS en el ejemplo
  • Crear componentes
  • Utilizar componentes

Caja de herramientas

  • Temas de Gatsby (gatsbyjs.org)
  • Tailwind (tailwindcss.com)

Tutoriales

  • Construyendo un tema (gatsbyjs.org)
  • ¿Qué es Tailwind CSS y cómo puedo agregarlo a mi sitio web o aplicación React? (freecodecamp.org)

Inspiración

  • Tema de Gatsby Tailwind (github.com)

Idea de diseño

Webmenciones

Categoría: Complementos de proyectos

Agregue la integración de menciones web a un sitio web que muestre las interacciones de Twitter con el sitio web.

Breve

La interacción social es una forma impactante de atraer más audiencia y conversación a los temas sobre los que escribimos.

Tener algo en un sitio web muestra que la interacción puede ser útil tanto para inspirar a las personas a querer involucrarse como para que las personas sientan que pueden ser parte de ella.

Nivel 1

Para hacer uso de las menciones web, un sitio web debe configurarse con metaetiquetas para proporcionar información.

Agregue las metaetiquetas adecuadas a un sitio web y valide su uso con webmention.io.

Nivel 2

La API de Webmentions es una forma de ver mediante programación conexiones en interacciones sociales desde una URL de su sitio web. Te permite obtener el tipo de interacción e incluso el avatar de perfil de la persona.

Conecte un sitio web a las menciones web y agregue una lista de interacciones sociales a las páginas de publicaciones del blog.

Nivel 3

Ahora que el sitio web muestra todas las interacciones, debería haber una manera fácil de unirse a la conversación.

Agrega un enlace social que, cuando se hace clic, crea un tweet con un enlace a la página.

Que hacer

  • Agregar metaetiquetas al sitio web
  • Validar metaetiquetas
  • Conectarse a Webmention
  • Conecta las redes sociales a Bridgy
  • Enumerar interacciones
  • Botón Agregar tweet

Caja de herramientas

  • Webmention.io (webmention.io)
  • Bridgy (brid.gy)
  • Webmention del complemento de Gatsby (github.com)

Tutoriales

  • Indieweb pt2: Uso de menciones web en Once (mxb.dev)
  • Webmentions del lado del cliente (swyx.io)
  • Empezando con Webmentions en Gatsby (knutmelvaer.no)
  • Creación de menciones web de complementos de Gatsby (christopherbiscardi.com)

Inspiración

  • Knut Melvær (knutmelvaer.no)
  • Swyx (swyx.io)

Idea de diseño

Búsqueda de productos

Categoría: Clones

Cree un clon de Product Hunt que permita a las personas publicar un nuevo producto con calificaciones.

Breve

Todos vivimos por los productos, ya sean nuestros teléfonos móviles o las aplicaciones que usamos en nuestras computadoras portátiles.

Si bien hay toneladas de productos en el mundo, puede ser difícil navegar entre lo bueno y lo malo. Herramientas como Product Hunt proporcionan una plataforma para aprender sobre nuevas herramientas y obtener reacciones y reseñas de otros.

Nivel 1

La parte más importante de aprender sobre nuevos productos es el producto en sí. Queremos saber qué es el producto, cómo se ve y cómo funciona.

Cree una página que le permita agregar un nuevo producto a un sitio web con un título, una imagen y una descripción.

Nivel 2

Al aprender sobre productos, las reseñas son una forma en que podemos confiar en un producto antes de comprarlo. Nos ayuda a ganar confianza en lo que estamos a punto de gastar nuestro dinero o nuestro tiempo.

Agregue la posibilidad de que las personas agreguen reseñas sobre cada producto.

Nivel 3

A la gente le encantan los productos, por lo que hay toneladas de ellos en el mundo. Hay demasiados para intentar clasificarlos manualmente, por lo que necesitamos un mecanismo para buscar y navegar.

Agregue la capacidad de buscar productos y navegar por categoría.

Que hacer

  • Crear sitio web de producto
  • Crear base de datos
  • Agregar formulario de producto
  • Agregar producto a la base de datos
  • Solicitar producto por página
  • Agregar formulario de revisión
  • Agregar reseñas a la base de datos
  • Agregar reseñas al producto
  • Agregar búsqueda de productos
  • Agregar categorías de productos

Caja de herramientas

  • Hasura (hasura.io)

Tutoriales

  • Creación de una aplicación de clonación de Product Hunt con Hasura y Next.js (logrocket.com)
  • Cómo construir una versión básica de Product Hunt usando React (freecodecamp.org)

Idea de diseño

Más proyectos

Si quieres más ideas de proyectos, echa un vistazo a 50 proyectos para React y la web estática.

Deja de preguntarte ¿qué debo construir? Descarga gratis en 50reactprojects.com

¡Sígueme para obtener más Javascript, UX y otras cosas interesantes!

  • ? Sigueme en Twitter
  • ? ️ Suscríbete a mi Youtube
  • ✉️ Suscríbete a mi boletín