loading...
Cover image for Playing a little with a Counter Component in React

Playing a little with a Counter Component in React

arthurborges profile image Arthur Borges Updated on ・2 min read

Neverendx (2 Part Series)

1) The beginning of a journey that never ends 2) 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>

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.

Neverendx (2 Part Series)

1) The beginning of a journey that never ends 2) Playing a little with a Counter Component in React

Posted on by:

arthurborges profile

Arthur Borges

@arthurborges

Coming from an Electrical Engineering background, but loved computers since childhood tech movies. Now I finally made the transition from engineering to software, and I hope to continue enjoying it!

Discussion

markdown guide
 

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?

 

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. :)