What are your React best practices?

Hello I have started learning React and I have started facing some problems. I consider myself a Junior Web Developer, I just have Pure HTML/CSS/Javascript background. I have read, studied, did some projects but when I started reading about React it's like I'm in a entire different world.

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.

Styling Components

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

Folder, Files, Naming Conventions I read AirBnb's naming convention rules, they have many rules and they can be found here. github.com/airbnb/javascript

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

Start a personal dev blog on your domain for free and grow your readership.

3.4K+ developers have started their personal blogs on Hashnode in the last one month.

Write in Markdown 路 Publish articles on custom domain 路 Gain readership on day zero 路 Automatic GitHub backup and more

Comments (1)

Bolaji Ayodeji's photo

Hi Marios A. Toparopoulos. I wrote about "Top 15 Recommended Tools for React Developers" and I'll recommend you check some of the resources mentioned in the article as they are very helpful.