DEV Community: Harshal Gangurde

Need suggestion about React+Material UI component directory structure

Harshal Gangurde — Tue, 01 Sep 2020 13:31:15 +0000

Hello Guys,

I need a quick suggestion regarding the React component directory structure. I am using Material UI in my React app and using CSS in JS feature to style my components (using makeStyles).

At the moment my JS and CSS code resides in a single JS file. Like this

As I keep adding more CSS classes my JS code keeps moving down (duh...). And it is pretty annoying to keep scrolling up and down to check things or to add new code.

The question is, will it be considered good practice to move CSS classes into a separate file like traditional CSS? If there is any other way to do it please let me know.

Thanks!

Finally! I built my portfolio

Harshal Gangurde — Fri, 22 Mar 2019 02:25:29 +0000

Finally! I have finished working on the first version of my portfolio and I feel good. I had been thinking to build my portfolio for the last two years but never really worked on it. Last week I started searching for the ways to build it and I came across Gatsby, a framework to build static websites. Of course one can simply use HTML, CSS, and JS to do the job but I wanted to learn something new. I saw people using the word Gatsby a lot online and I wanted to try it. This was the great opportunity and I grabbed it. One more advantage with Gatsby is, it is based on React which meant I could improve my React skills along with finishing my portfolio.

Here is the link to my portfolio: https://portfolio-8b931.firebaseapp.com/ (I don't have a domain yet, but that's next thing on the list)

What I learned

A new framework, Gatsby
CSS modules (Component scoped CSS)
Hosting a website on firebase
FormCarry, to handle contact me form without backend

What issues I faced

using CSS modules

There are many ways to add styles to your website but Gatsby recommends CSS Modules for beginners and I took their word for it.
Initially I had issues with styles being not applied to my components until I found this note.
I was using dashes in my CSS class names but was not using them in camelcase format in my components. Once I figured that out everything else went quite smooth.

Please check out my portfolio and feel free to leave any comment here, I would love to get some feedback.

I built my first React Native app

Harshal Gangurde — Sun, 17 Feb 2019 01:21:11 +0000

Hello Developers,

This is my first post on Dev.to and it's about a very first app I developed using React Native. It's a simple and basic calculator app which does, yes you guessed it right, simple calculations.