I am relatively new to Frontend development and I am eager to create a visually appealing APP using the MERN Stack. I have recently started working on developing with REACT JS.
In order to enhance the styling of my project, I considered importing the CDN of "BOOSTRAP" and the JavaScript of Jquery in the index.html file, similar to working with html.
Initially, using "Bootstrap Classes" in my HTML seemed to work well. However, I encountered difficulties when attempting to implement functionalities such as "MODALS".
It appears that the use of JQuery by BOOSTRAP to manipulate the DOM conflicts with the way REACT operates, resulting in potential bugs and issues.
The thought of reworking all the styling and rewriting code from scratch seems daunting and I want to avoid making mistakes this time.
After conducting some research, I came across MDBootstrap REACT (Material Design boostrap) and React-Boostrap as alternatives. However, I have reservations. MDBootstrap seems somewhat suspicious to me, especially with the expensive pro version and lack of documentation on how to customize components.
As for React-Boostrap, my main concern lies in the level of personalization it offers and how to go about customizing it. I was unable to find sufficient documentation on this.
If you were in my position, what approach would you take? (I am not inclined to write my own CSS from scratch, but I do want the flexibility to customize components or themes if necessary)