Upgrade Client App to React 18

[firasrg]

I would like to propose upgrading the client app of this project to React v18.

Problem

The current version of React used in the project may lack some of the latest features and optimizations introduced in the modern versions. Additionally, the application may face compatibility issues with the latest React ecosystem, libraries, and tooling.

Upgrading to modern versions will address these problems and provide developers with access to the most recent advancements in React .

Solution

1. Upgrade to Modern React Version (includes verification of dependencies compatibility).
2. Additional improvements/features:
   • Evaluate areas that would need new features or improvements.
   • Discuss and plan the addition of features that align with the goals of the Spring PetClinic project.

Benefits

• Improved development experience and productivity.
• Ensuring compatibility with the evolving React ecosystem.

References

• Link to React documentation: React

I believe that upgrading and adding new features will enhance the development experience. This will enable developers to work with the latest technologies.

Please let me know if you have any questions or if there's any further information I can provide to support this enhancement proposal.

[michaelisvy]

I agree that it needs an upgrade, and at this stage I haven't managed to start the application successfully (it might be due to my version of Node.js being too recent).

[arey]

Like @michaelisvy , an update of the React front and Spring Boot backend would be a good thing. Since you seem motivated and are motivated @firasrg , you have free rein and could work on it. I think @nilshartmann will agree too.

[nilshartmann]

Hi all!

I think that's a very good idea to upgrade this. Unfortunatly I hadn't found the time yet, so I'm more than happy if anyone else would support.

Tbh I think "upgrade" in this case is more or less a re-write 😬

Does it make sense, before starting with the upgrade to could discuss a tech stack that we want to use?

For example:

• should we go with create-react-app or vite?
• use TanStack Query for data fetching?
• CSS: "plain", modules, css-in-js, Tailwind, ... ?
• should we implement frontend tests? should they run in GitHub actions? 🙀

[firasrg]

Hi all

@michaelisvy I got the client app working without backend and data, just UI.

@nilshartmann yeah it needs to be rewritten, I have a good experience with React I can provide a good initiative on that. As for techs, I imagine we would need CRA (create react app) for sure, React Query for datafetching yes! Tailwind CSS or something similar for styling and layouts.

As for tests, I think : Jest + React Testing Library

I have a good background with these tools and some others.

[nilshartmann]

@firasrg not sure, if create-react-app is still a good idea. That project seems (currently) more or less abandoned while more and more people tend to use Vite. That would probably mean vitest instead of jest, but that should also work with RTL.

[firasrg]

TBH I don't know Vite, but based on a first comparison, it seems a good tool that brings better performance over CRA. But I think for beginners and intermediate levels, CRA would be more suitable as it's mature, popular and easier to use. As PetClinic project is intended to be used by new people or immigrants, I think it would be better to start with CRA.

It's up to you

[firasrg]

I think it would be better to start with CRA.

I just got an information from trusted React community members that CRA is no more maintained. I agree with what you said

[michaelisvy]

hello, in case the work can be split, I'll be happy to help out (either for React part or for the Backend part)

[nilshartmann]

hello, in case the work can be split, I'll be happy to help out (either for React part or for the Backend part)

Hi @michaelisvy,

thank you very much!!!

I think it makes sense to consolidate the backend and frontend issue, so please find my ideas here: #26 (comment)

[firasrg]

Alright@nilshartmann , in this case I close this issue.