What are your React best practices?
For studying purposes, I work alone but soon I would like to participate in teams as a React Developer. Here's the problems I've been facing.
I started using Bootstrap but to be honest, I don't like it because I have to use jQuery to make the menu responsive. Additionally, it will make my websites slower because it will have to load all those packages.
I also tried using some UI Libraries such as Material-UI, ReactStrap and they were kinda hard to learn because I had to study their documentation and when I started using additional React Modules such as react-router-dom, things started to become a little more complicated and I stopped.
I also tried using Vanilla Styling, Traditional CSS. I started with making a folder called styles and splitting my styles to device files, for example: mobile.css, desktop.css, tablet.css, global.css. After that I found that my styling became complicated, when I was creating a new element, I had to style that element to all of my files.
After the above, I started making a folder for each component, Button.jsx for example, had Button.css file as well but it made imports repetitive and frustrating. ie:
import PrimaryBtn from components/Buttons/PrimaryBtn.jsx import "./PrimaryBtn.css"
I haven't tried props.styling approach or inline styles yet and styled components and I read this article medium.com/seek-blog/a-unified-styling-lang..
Which made things more confusing
However, still I have some trouble, should I for example, have a folder for pages, a different folder for HTML/components such as buttons, like the official tutorials for Gatsby?
That's all for now, thanks for your time