My FeedDiscussionsHeadless CMS
New
Sign in
Log inSign up
Learn more about Hashnode Headless CMSHashnode Headless CMS
Collaborate seamlessly with Hashnode Headless CMS for Enterprise.
Upgrade ✨Learn more

What are your React best practices?

Marios A. Toparopoulos's photo
Marios A. Toparopoulos
·Apr 5, 2020

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