DEV Community

Beginner's experience with React - a shout for feedback

Mahmoud Shehata on October 27, 2019

Hi there! I'm a react beginner and not really sure if this is the right place to post a call for feedback. I want to share my experience writing m...

Read full post

Sergio Daniel Xalambrí • Oct 27 '19

CSS-in-JS or not?

I personally like it, how the code looks at the end depends a lot on what you are using, with styled-components you will get a new component for your styles and you could move that component to another file if it makes sense.

But if you are more comfortable using CSS outside JS do it, it’s not a requirement, eventually when you start to make bigger apps in bigger teams you may reach a point you could justify the usage of CSS in JS.

Saurabh Sharma • Oct 27 '19

I have seen a lot of people like CSS modules because they are CSS but still encapsulated.

Mahmoud Shehata • Oct 27 '19

I'll look into styles components more...
The Idea of the CSS modules looks really good! I think it's a good balance and actually solves the problem in an elegant way

Sergio Daniel Xalambrí • Oct 27 '19

This idea of React has to return a div that contains other things and all results in too many divs! The markup has empty divs just to return two component togethers! So what's the best way to handle this?

React has something called React.Fragment for exactly this reason. Read more on reactjs.org/docs/fragments.html

Mahmoud Shehata • Oct 27 '19

Yup that looks great! will start using that for sure! Thanks for the tip

Anthony M. • Oct 28 '19

There is an excellent shorthand for fragments too!

const Component = () => (
<>
  <span>
    Hello World
  </span>
</>
);

Sergio Daniel Xalambrí • Oct 27 '19

Is it normal to have to write that much code?
I think this depends on how big are your components and how much are you doing inside them, I tend to have multiple little components and a few big which compose them to create a page/view of the application.

Sergio Daniel Xalambrí • Oct 27 '19

My main question is what is the right way to decide what should be its own component and shouldn't be?
Start everything in the same component until you feel the need to extract something, this could happen if you need to make it reusable, it’s too big and you would prefer to have them in another file or just because it could be a good split point of certain logic.

Mahmoud Shehata • Oct 27 '19

The thing is If you need to process API data for example and have to make a couple of functions to do that. Would be better to have the processing in one component and the display in another?

Cus for this project I was thinking to have ONE component to process both current weather AND forecast and then return the values back and then I'd decide which one to display and which one to pass to which component. I think that is a very logical way to think about it. But then with the one way data flow in React not sure if it's possible.

You could Imagine one parent search Component -> API engine -> Display component
But those display component need to send back data to API engine again if the user wants to update the request or something.

What do you think?

Sergio Daniel Xalambrí • Oct 27 '19

Is this the proper way to do conditional rendering? Looks off to me but works just fine!

There are multiple ways, I wrote an article about this sergiodxa.com/articles/react-condi... and the React docs has a section about this topic reactjs.org/docs/conditional-rende....

The tl;dr off there is no single way, use any JS way to handle conditions.

Sergio Daniel Xalambrí • Oct 27 '19

What's the best way to 'ADD' a component on the click of a button?

Render the component conditionally based on a a state, when you click the button change the state value so the component will be rendered by React.

Mahmoud Shehata • Oct 27 '19

So yeah Not very different from what I did...
I just thought maybe there is another more clever way....