DEV Community

Cover image for Playing a little with a Counter Component in React
Arthur Borges
Arthur Borges

Posted on • Updated on

Playing a little with a Counter Component in React

Photo by Fabrizio Verrecchia on Unsplash

So, today I'm going to try to implement from scratch my Counter Component in my portfolio page.

To implement a simple counter, it was very easy, just a few lines of code:

import { useState } from 'react'
[...]
const [count, setCount] = useState(0);
[...]
<section className="content">
  <p>{count}</p>
  <button onClick={() => setCount(count + 1)}></button>
</section>
Enter fullscreen mode Exit fullscreen mode

But then I was getting a lot of inconsistencies in the style part. Apparently the counter's component part was not general as I think it was and I had to write a unique stylesheet for it. I think maybe I will give styled-jsx or CSS Modules a try.

...

Styled-jsx worked very well! But I still think that I should be separating my code into more components, and also creating an outer layout to handle the Grid and encapsulate all the other components/elements.

...

I'm struggling very hard to understand and apply CSS Grid with responsive behavior on this scenario:

Grid not responsive

(Why the text content overlapped the grid cell?)

I mean, I don't want to use right now TailwindCSS, Bootstrap, or another heavy framework just to position and centralize content on Web and Mobile in a general way. Do you people have some tips or advice to what I should do? Thank you!

EDIT

Thanks for Sam Jarman for the great advice on using CSS Flex (I was using it alongside Grid, but stuck only to Flexbox now). And it worked! The CSS Stylesheet became smaller and it was very easy to position the elements and reason about where they should stay. For the next component, I will think of something that involves breaking and reusing used components and an outer layout.

Discussion (2)

Collapse
samjarman profile image
Sam Jarman πŸ‘¨πŸΌβ€πŸ’»

As a relatively newbie to CSS myself. I found CSS’s β€œflex layout” really easy to understand. It also works (of course) with react. Maybe that would be an avenue to explore?

Collapse
arthurborges profile image
Arthur Borges Author

Yep, I'm using flex alongside with css grids. Perhaps I should stay with only one of them. Great advice, I'll try to stick with only flexbox for this layout. :)