React component choices


I’m in the beginning stages of learning React.
I’m trying to think "reactively’ (thinking in terms of components)…however, i don’t quite understand how to KNOW when to make a particular section of a website a component?

Any suggestions?

Break it down with pencil and paper. :smile:
I tought the old tutorial in cover this, but maybe they already updated it.
Anyway, break your UI starting with the larger one down to smallest one.
You could break everything into smaller component but not necessary. I do it if I want to reuse the component.
For example if you want to make a form, you could break each input into its own component.
My approach is to make it one big component until I think I need to reuse it or there is some logic that need separation.
Also read others people code and see how they break theirs into component.
Hope that helps.

1 Like

Hmm… So for example, a login screen would look something like this?

| /____logo(element)____avatar(elements)
| …/____LoginButtonComponent
|…/_____elements for text boxes
|. … /____elements for buttons
|. /____somemoreStuff(elements or components

Each component is a basically a function that takes some parameters (props) and returns some react elements (which are compiled from JSX). Every time the function gets new props, it runs again. And all of those elements are held together in a (simple) representation of the DOM. And you can then use (eg) the ReactDOM library to actually render that tree to a webpage.

Say you fetch some data. And what comes back is a list of things. So you maybe have a component that fetches some data, which renders a component that renders a list, and that maps over the entries of the list, rendering a component for each list item. So that would be three components.

So what you’re writing maybe doesn’t quite make sense without any data to go on. Start with the data and go from there is normally the best bet with React.

React isn’t some generic website template system: it’s a library for the UI. There are frameworks that use React as the basis for writing websites (Gatsby and Next.js), where what you’ve written makes a bit more sense.

The first paragraph in the above quote was a great example. It help visualize how components should be utilized (of course this depends on the project).

The second paragraph was a nice golden Nugget.

Much appreciated * off to the races!*

Yes, you could do that.