twincities-os / twincitiesos.dev

8 stars 6 forks source link

Add React Integration to the Project #36

Open YusufAzam opened 1 week ago

YusufAzam commented 1 week ago

Description: I’d like to propose adding React to the project to leverage its power and flexibility alongside Astro’s performance-focused approach. The integration will enable the following advantages:

Reasoning: Component Reusability: React’s component-based architecture promotes reusable UI elements. By adding React, we can streamline the development process and make our app more modular. As well as react being a common framework to most developers.

Easier State Management: React provides efficient ways to handle state, especially when combined with libraries like Redux, React Context, or Zustand. This will give us better control over complex UI states, improving user experience.

Seamless SSR with React: Astro already has great support for SSR (Server-Side Rendering), and integrating React will allow us to create fully dynamic React components that can be rendered server-side, improving the initial load performance.

Better Developer Experience: With React integrated into the project, we can benefit from its developer tools, such as React DevTools, which will provide insights into the component hierarchy, performance, and state, making debugging and development easier.

Growing Ecosystem: React has an extensive ecosystem with numerous third-party libraries and tools. By integrating React, we can tap into this rich set of resources, including UI component libraries, hooks, and state management solutions, to boost development speed and capabilities.

Optimized for User Interactivity: If our project requires highly interactive components (like forms, complex modals, or dynamic content), React is optimized for such use cases. It will help us avoid unnecessary re-renders, and its virtual DOM ensures updates are efficient.

Future-Proofing: React is widely adopted and continuously evolving, ensuring long-term stability and support. Adding React can keep the project aligned with modern frontend best practices.

Reference Documentation: Astro React Integration Guide

YusufAzam commented 1 week ago

@branberry @cjohnson19 Thoughts?

gtk-grafana commented 1 week ago

Yes please, it was fun playing with/learning astro but react would be much easier to work with

cjohnson19 commented 1 week ago

I'm not an authoritative figure for this repo, so I'm just throwing in my thoughts.

Current issues[^1] seem simple enough with just Astro, but if adding React makes it easier for others to contribute that's a big value add.

[^1]: #35 #30

The complex issue to carry out would be #19. I've usually seen these handled by an intermediate Markdown "transformer" of sort so any React/Astro would be hidden for the most part.

I've always used MDX to write docs/blog posts, which would entail React, but Markdoc is an option which uses Astro components.

My overall thoughts are: seems fine to add, but I don't necessarily see the need for it in isolation.

branberry commented 1 week ago

I think @cjohnson19 makes great points. I think we can add React, but we don't strictly have to use that over Astro. Ultimately, if people will feel more productive using React, then I'm totally fine with it. I think a lot of our content will be non-interactive, so we could keep using Astro for that, but anything that requires some amount of interactivity, we could switch to creating React components, which would be easy enough.

Also, Chase mentioned MDX, which is something I'll add as we do want to build out the blog.