Listado de apps React en Github para estudiar
Una de las cosas más difícil de React es que todo es muy libre, tienes muchas opciones… ¿qué utilizar para request? ¿usar hooks o usar clases? ¿qué estructura de código usar?
La respuesta a cada una de esas preguntas es que depende del proyecto (🙄) pero para que te hagas una idea de todas las opciones disponibles, he hecho esta lista con proyectos construidos con React en GitHub.
De esa forma, podrás estudiar el código y ver cómo juegan entre sí las distintas opciones que los autores escogieron.
1) Take Note – Live | Repo
“Take Note” es un proyecto open source para tomar notas, conocido como “la app para tomar notas para desarrolladores”
Es una app para tomar notas en texto plano con soporte para markdown, sin editores complejos que no necesitamos :)
El código se ve bastante ordenado:
Esta aplicación usa React hooks y redux-toolkit =) (mira la carpeta slices).
2) Cloud Music - Repo
Es un clon de NetEase, un servicio de streamming de música. El README está en Chino pero el código está en inglés.
El proyecto usa redux (sin redux-toolkit) y hooks. Lo que me llama la atención es la estructura del código:
Se ve muy estandard, pero si miras el reducer (store/reducer.js) puedes notar que están “agrupando” (dentro de la carpeta application) algunos componentes junto a la lógica de redux:
Todoist clone
Karl Hadwen creó un clon de Todoist e incluso tiene un video tutorial en Youtube de cómo hacerlo.
Para el “backend”, usó Firebase en vez de construir una API desde 0. En vez de usar redux u otra librería, simplemente usó Context (sí, no siempre necesitas redux).
4) Mortgage – Live | Repo
Mortgage es una calculadora para saber cuánto tienes que pagar de hipoteca
Usa D3 para dibujar los gráficos y usa hooks. Es una aplicación pequeña pero sirve como punto de partida para saber cómo usar hooks en este tipo de apps.
5) Tomato Work – Live | Repo
Tomato-work es un sistema de gestión personal escrito en React con hooks y redux:
Usa Antd para la interfaz! (la librería Antd es genial). La estructura de código es bastante estandard:
Encontré interesante que tenga una carpeta llamada services (Angular?) donde cada archivo es una abstracción para hacer llamadas a la API. Así, en vez de llamar a axios directamente en el componente, usa la función del servicio.
6) Write with me – Live | Repo
Write with me es un editor de markdown colaborativo construido con React (hooks) y AWS Amplify
Como podrás ver, es un proyecto pequeño:
A diferencia de otros proyectos, el código no está organizado usando distintas carpetas. El manejo del estado de la aplicación está hecho con useReducer.
La carpeta de graphql es porque Amplify usa graphql.
7) JIRA Clone – Live | Repo
Este es un clon simplificado de JIRA. ¡Se ve espectacular!
Usa cypress y jest para testing:
8) Spectrum – Live | Repo
Spectrum es una plataforma de código abierto que ayuda a las personas a construir comunidades online.
He visto muchas personas recomendando este repositorio. Y hay una buena razón: el repositorio tiene TODO el código de su producto. Esto no siempre pasa.
“That being said, this codebase isn’t your typical open source project because it’s not a library or package with a limited scope—it’s our entire product.”
Yo creo que este proyecto es uno de los mejores código abierto full-stack en react que hay. Estudiarlo te puede ayudar mucho a como estructurar proyectos con mucho código.
El código front que es una SPA (react) vive en la carpeta src
As you can infer from the folder structure, they split the code by “type” of code (components, reducers, hooks, etc).
Como puedes ver, estructuran el código según “tipo” (components, hooks, etc).
9) GitHub profile README Generator – Live | Repo
Esta herramienta permite que puedas crear un README para tu perfil de GitHub de manera muy simple y con add-ons como cantidad de visitantes, estrellas en GitHub, etc.
Este es un ejemplo de una aplicación construida con Gatsby. Usa hooks y los archivos están organizados “por tipo” lo cual está bien para el tamaño del proyecto:
10) Moose - Live | Repo
Moose es una aplicación para hacer cast, stremear y descargar torrents construida con Nextron.
¿Qué es Nextron? Bueno es “Next.js” (SSR en aplicaciones React) + “Electron” (para construir aplicaciones de escritorio con herramientas web).
No tengo experiencia con este tipo de aplicaciones, pero por lo que puedo ver, la organización de código es en base a “tipo de archivos”:
Y el proyecto utiliza TypeScript, y para estilos usa css-modules
11) Courselit - [Live] | Repo
Courselit es una aplicación web open source para que crees tus propios cursos online. Es una aplicación full-stack, lo que quiere decir que contempla tanto frontend como el backend.
El frontend está hecho con Next aunque en vez de React utiliza Preact:
El backend está con Express y MongoDB.
Algo interesante es que el proyecto es un MonoRepo, lo que quiere decir que en el mismo repositorio vive el front y el back (ver carpeta packages) y que para ejecutarlo debes ejecutar los dos proyectos. Para manejar el mono repo, utiliza Lerna.
12) Fireact - Repo - Live
Fireact es una aplicación para construir tu propio SaaS y que ya viene lista para recibir pagos mediante Stripe.
En términos técnicos, es una app full-stack construida con Firebase y React (CRA).
La estructura de carpetas es una mezcla entre “tipo de archivos”:
Y por páginas, las cuales están divididas en “páginas con autenticación” y “páginas sin autenticación”:
En cuanto a Firebase, utiliza Firestore, como pueden ver en el archivo UserList (aquí).
Y finalmente, la interfaz utilizó coreui que es un template de administración para Bootstrap:
¿Olvidé algún proyecto?
Fue un poco complicado encontrar proyectos open source que utilizaran hooks y últimas cosas de React 😓.
Si tienes alguno, puedes escribirme por Twitter a @codewithnico