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.

Take Note – Live

taniarascia/takenote
📝 A free, open source notes app for the web. Contribute to taniarascia/takenote development by creating an account on GitHub.

"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:

React app code structure

Esta aplicación usa React hooks y redux-toolkit =) (mira la carpeta slices).

auth.ts, un slice para la autenticación

Cloud Music

sanyuan0704/react-cloud-music
React 16.8打造精美音乐WebApp. Contribute to sanyuan0704/react-cloud-music development by creating an account on GitHub.

Es un clone de NetEase, un servicio de streamming de música. El README está en Chino pero el código está en inglés.

GIF from README

El proyecto usa redux (sin redux-toolkit) y hooks. Lo que me llama la atención es la estructura del código:

react-cloud music estructura de 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

karlhadwen/todoist
Subscribe to my YouTube channel: https://bit.ly/CognitiveSurge - Building Todoist Using React - karlhadwen/todoist

Karl Hadwen creó un clon de Todoist e incluso tiene un video tutorial en Youtube de cómo hacerlo.

Screenshot from README.me

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).

Mortgage – Live

paulhoughton/mortgage
Mortgage overpayment calculator using React with Hooks and D3 - paulhoughton/mortgage

Mortgage es una calculadora para saber cuánto tienes que pagar de hipoteca

Screenshot from Live website

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.

Tomato Work – Live

xjh22222228/tomato-work
🍅 tomato-work for React 个人事务管理系统. Contribute to xjh22222228/tomato-work development by creating an account on GitHub.
130+ ⭐

Tomato-work es un sistema de gestión personal escrito en React con hooks y redux:

Demo extraida del README

Usa Antd para la interfaz! (la librería Antd es genial). La estructura de código es bastante estandard:

Code structure

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.

Write with me – Live

dabit3/write-with-me
Real-time Collaborative Markdown Editor . Contribute to dabit3/write-with-me development by creating an account on GitHub.

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:

Code structure

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.

JIRA Clone – Live

oldboyxx/jira_clone
A simplified Jira clone built with React/Babel (Client), and Node/TypeScript (API). Auto formatted with Prettier, tested with Cypress. - oldboyxx/jira_clone

Este es un clon simplificado de JIRA. ¡Se ve espectacular!

Screenshot del sitio en vivo

Usa cypress y jest para testing:

Code structure

As the author says, it is a very good example of a modern real-world React codebase.

Tal y como dijo el author, es un muy buen ejemplo de como luce una aplicación moderna y del mundo real (no juguete) construida en React.

Las funcionalidades (del README)

En otras palabras: útil para aprender

¿Me olvidé de algún proyecto?

Si conoces otro proyecto open source construido en React (moderno), puedes escribirme en Twitter para así agregarlo a la lista 💚